CSS Pull-Down Menü von Xen, 29.03.2010 08:06

CSS Pull-Down Menü

Xen 29.03.2010 08:06

Guten Morgen Community,

ich habe ein CSS-Pulldown Menü auf meiner Website. Dieses funktioniert im Firefox und IE8 auch einwandfrei, allerdings in z.B. IE7 funktioniert dieses gar nicht.

Meine Frage, könnt ihr am Code erkennen, was ich ändern muss um es zum laufen zu bringen?
Wo finde ich Lösungsansätze um es im IE7 und weitere Browsern zum laufen zu bringen.

Da die Seite schon besteht und sehr umfangreich wird, wäre es toll wenn ich nicht alles nocheinmal von vorne machen müsste.

Anbei der Link zur HTML-Datei: hier

Hier die CSS-Zeilen:

  
/* Menü */  
#menu {  
	position:absolute;  
	top:50px;  
	right:0px;  
	height: 25px;  
	background-color:#FFFFFF;  
	border:1px solid #003399;  
	white-space: nowrap;  
	z-index:1;}  
		  
		  
/* Menupunkt stylen */  
ul.cssmenu {  
  position: relative;  
  display: block;  
  margin: 0px;  
  padding: 0px;}  
  
ul.cssmenu ul {  
  position: relative;  
  display: none;}  
  
ul.cssmenu li {  
  position: relative;  
  display: inline;  
  float: left;}  
  
  
/* Menupunkt stylen */  
ul.cssmenu li a {  
  font-size: 11px;  
  text-decoration: none;  
  text-align: left;  
  letter-spacing:0em;  
  line-height: 25px;  
  display: block;  
  height: 25px;  
  width:100%;  
  padding-left:10px;  
  padding-right:10px;}  
  
ul.cssmenu li:hover > a {  
  background-color: #003399;  
  color: #FFFFFF;}  
  
  
/* Untermenüpunkt einblenden */  
ul.cssmenu li:hover > ul {  
  position: absolute;  
  top: 25px;  
  left:0px;  
  display: block;  
  border:1px solid #003399;  
  background-color: #b2c1e0;  
  padding:0;}  
  
  
/* Farben der einzelnen Ebenen (werden vererbt)*/  
ul.cssmenu a {  
  color: #000000;  
  background-color: #FFF;}  
  
ul.cssmenu ul a {  
  background-color: #b2c1e0;}  
  
  
/* Menüpunkte breite*/  
.menu1 {  
  width:85px;  
  margin-right:19px;  
  border-left:1px solid #003399;  
  border-right:1px solid #003399;}  
  
.menu2 {  
  width:175px;  
  margin-right:19px;  
  border-left:1px solid #003399;  
  border-right:1px solid #003399;}  
  
.menu3 {  
  width:230px;  
  margin-right:19px;  
  border-left:1px solid #003399;  
  border-right:1px solid #003399;}  
  
.menu4 {  
  width:130px;  
  margin-right:19px;  
  border-left:1px solid #003399;  
  border-right:1px solid #003399;}  
  
.menu5 {  
  width:95px;  
  margin-right:19px;  
  border-left:1px solid #003399;  
  border-right:1px solid #003399;}

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Pull-Down Menü

Felix Riesterer Homepage des Autors 29.03.2010 09:03

– Informationen zu den Bewertungsregeln

Liebe(r) Xen,

Wo finde ich Lösungsansätze um es im IE7 und weitere Browsern zum laufen zu bringen.

war das eine Frage. Ich finde nicht?

Anbei der Link zur HTML-Datei: hier

<http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=SELFHTML - Dynamische CSS-Navigation für moderne Browser> (und lies danach weiter!)

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Pull-Down Menü

Xen 29.03.2010 10:18

– Informationen zu den Bewertungsregeln

Hallo Felix,

ich habe soeben mal das Menü überprüfen lassen in verschiedenen Browsern (dieses von SelfHTML). Selbst dieses funktioniert nicht einwandfrei in älteren Browsern. Z. B. im IE7 wird auch nur ein komplette weiße Seite angezeigt.

Ich schätze mal eine 100%ige Lösung wird es nicht geben oder?
Wahrscheinlich kann man mit diesem Menü doch den größten Teil abdecken.

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Pull-Down Menü

Joachim Homepage des Autors 29.03.2010 10:26

– Informationen zu den Bewertungsregeln

Hi,

Selbst dieses funktioniert nicht einwandfrei in älteren Browsern. Z. B. im IE7 wird auch nur ein komplette weiße Seite angezeigt.

Was auch immer Du da testest: ie7 kann Css_Menüs, lediglich ie6 braucht eine Javascript-Unterstützung. Hier findest Du einen diesbezüglichen Css-Navi-Test

Gruesse, Joachim

--
Am Ende wird alles gut.

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Pull-Down Menü

Xen 30.03.2010 10:14

– Informationen zu den Bewertungsregeln

Guten Morgen Joachim;

ich habe mal dein Script umgesetzt, allerdings funktioniert der Hover-Effekt nicht mehr im IE6. Zudem kann ich in dem Main-Menü die Schriftfarbe beim Hovern nicht auf #FFFFFF setzen, diese bleibt immer Schwarz.

Hier der Code in der externen css datei

  
/* Menü */  
#navi {  
	position:absolute;  
	top:50px;  
	right:0px;  
	margin:0px 0px 0px 0px;  
	padding:0px;  
	z-index:1}  
  
	  
    #navi li {  
        position: relative;  
        font-size: 11px;  
		line-height:25px;  
        float: left;  
        padding: 0px 10px 0px 10px;  
        margin: 0px 0px 0px -1px;  
        list-style:none;  
		background-color:#FFFFFF;  
        border: 1px solid #003399;  
        overflow: visible;  
    }  
  
/* Submenü */  
	#navi ul {  
		display: none;  
		text-align: left;  
		margin: 0px;  
		padding: 0px 0px 0px 0px;  
		position: absolute;  
		top: 25px;  
		left: -1px;  
		list-style: none;}  
	  
  
    #navi ul li {  
        position: static;  
        margin: 0px 0px -1px 0px;  
        padding: 0px 15px 0px 15px;  
        white-space: nowrap;  
        border: 1px solid #003399;  
        font-size: 11px;  
        float: none;}  
  
  
		#navi a {  
			color: #000;  
			text-decoration: none;  
			font-size: 11px;}  
  
			#navi li:hover {  
				background: #003399;  
				color:#FFFFFF;}  
				  
			#navi li:hover li:hover {  
				background: #b2c1e0;}  
				  
			#navi li:hover ul {  
				display:block;}

Hier die HTML Datei:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">  
<html>  
<head>  
  
<link rel="shortcut icon" href="favicon.ico" />  
<link href="engine/variovac-styles.css" rel="stylesheet" type="text/css" />  
  
<!--[if lte IE 7]>  
<style>  
  
    /*  
        ie6/7 gets confused if mouseover/out in an empty element  
        add dummy background image to make it believe there is something  
    */  
  
    ul, li {  
        min-height: 1px;  
        background-image:url(leer.gif);  
    }  
  
    #navi ul li {  
        overflow: visible;  
    }  
  
</style>  
<![endif]-->  
<!--[if lte IE 6]>  
<style>  
    ul, li {  
        height: 1px;  
    }  
    #navi ul {  
        width: 1px;  
    }  
</style>  
<![endif]-->  
  
<script type="text/javascript">  
  
    // inits navi hovers for ie6  
    //  
    function init_navi(id) {  
  
        // do nothing if not ie6  
        //  
        var is_ie6  =  !!(document.all && navigator.appVersion.indexOf("MSIE 6.")!=-1);  
        if (!is_ie6) return;  
  
        var curr_ul =  false;  
        var main_ul =  document.getElementById(id);  
        var all_li  =  main_ul.getElementsByTagName("li");  
  
        // loop available list items  
        //  
        for (var i = 0; i < all_li.length; i++) {  
  
            // find out if sub-ul is available  
            // store sub-ul as property  
            //  
            curr_ul         =  all_li[i].getElementsByTagName("ul");  
            all_li[i].ul    =  curr_ul.length? curr_ul[0] : false;  
  
            // set onmouseover and out  
            // toggle class name  
            // toggle sub-ul's display  
            //  
            all_li[i].onmouseover   =  function () {  
                this.className      =  this.className + " navi-active";  
                if (!this.ul) return;  
                this.ul.style.display =  "block";  
            }  
            all_li[i].onmouseout    =  function () {  
                this.className      =  this.className.replace(/\s?navi\-active/i, "");  
                if (!this.ul) return;  
                this.ul.style.display =  "";  
            }  
        }  
    }  
</script>  
  
</head>  
  
<body bgcolor="#CCCCCC" onLoad="init_navi('navi')">  
  
<div class="menu">  
    <ul id="navi">  
    <li><a href="#">Home</a>  
    	<ul>  
			<li class="menu1"><a href="Home_dt.php">Start</a></li>  
			<li class="menu1"><a href="index.htm">Intro</a></li>  
			<li class="menu1"><a href="GB/Home_gb.php">Englisch</a></li>  
        </ul>  
    </li>  
  
    <li><a href="#">Produktinformation</a>  
    	<ul>  
			<li class="menu2"><a href="Info/kraeftig.htm">kr&auml;ftig und kraftsparend</a></li>  
			<li class="menu2"><a href="Info/leise.htm">funktional und leise</a></li>  
			<li class="menu2"><a href="Info/hygienisch.htm">zeitsparend und hygienisch</a></li>  
			<li class="menu2"><a href="Info/ueberzeugend.htm">&uuml;berzeugend</a></li>  
			<li class="menu2"><a href="Info/Qualitaet.htm">garantierte Qualität</a></li>  
			<li class="menu2"><a href="Info/intelligenz.htm">Vorsprung durch Intelligenz</a></li>  
			<li class="menu2"><a href="Info/innovativ.htm">innovativ und fortschrittlich</a></li>  
			<li class="menu2"><a href="Info/passend.htm">passend für jedes Gebäude</a></li>  
			<li class="menu2"><a href="Info/Highlights.htm">Highlights</a></li>  
        </ul>  
    </li>  
  
    <li><a href="#">Poduktkatalog</a>  
    	<ul>  
			<li class="menu3"><a href="Katalog/Staubsauger.htm">Zentralstaubsauger und Zubeh&ouml;r</a></li>  
			<li class="menu3"><a href="Katalog/Komplettsystem.htm">Komplettsysteme</a></li>  
			<li class="menu3"><a href="Katalog/Reinigung.htm">Reinigungs-Sortimente</a></li>  
			<li class="menu3"><a href="Katalog/Saugschlaeuche.htm">Saugschl&auml;uche und Zubeh&ouml;r</a></li>  
			<li class="menu3"><a href="Katalog/Pakete.htm">Installations-Pakete</a></li>  
			<li class="menu3"><a href="Katalog/Steckdosen.htm">Saugsteckdosen und Zubeh&ouml;r</a></li>  
			<li class="menu3"><a href="Katalog/Kehrschaufel.htm">Kehrschaufel und Zubeh&ouml;r</a></li>  
			<li class="menu3"><a href="Katalog/Rohrsystem.htm">Klebe-Rohrsystem 2 Zoll &oslash; 50,8 mm</a></li>  
			<li class="menu3"><a href="Katalog/Saugduesen.htm">Saugd&uuml;sen und Zubeh&ouml;r</a></li>  
			<li class="menu3"><a href="Katalog/Inst-Zubehoer.htm">Installationszubeh&ouml;r</a></li>  
			<li class="menu3"><a href="Katalog/Brandschutz.htm">Brandschutz</a></li>  
			<li class="menu3"><a href="Katalog/Einbau.htm">Einbaudetails</a></li>  
			<li class="menu3"><a href="Katalog/Grossanlagen.htm">Grossanlagen</a></li>  
			<li class="menu3"><a href="http://www.easy-line.de/" target="_blank">Easyline Wäscheabwurf</a></li>  
        </ul>  
    </li>  
  
    <li><a href="#">Service</a>  
    	<ul>  
			<li class="menu4"><a href="Service/Wir.htm">Wir stellen uns vor</a></li>  
			<li class="menu4"><a href="Service/Weg.htm">Wegbeschreibung</a></li>  
			<li class="menu4"><a href="Service/Vertreter.htm">Vertreter vor Ort</a></li>  
			<li class="menu4"><a href="Service/Download.htm">Download</a></li>  
			<li class="menu4"><a href="Service/serv-form.htm">Service-Formular</a></li>  
			<li class="menu4"><a href="Service/Haendler/index.php">H&auml;ndlerzugang</a></li>  
        </ul>  
    </li>  
  
    <li><a href="#">Kontakt</a>  
    	<ul>  
			<li class="menu5"><a href="Kontakt/Adresse.htm">Unsere Adresse</a></li>  
			<li class="menu5"><a href="Kontakt/Kontaktformular.htm">Kontaktformular</a></li>  
        </ul>  
    </li>  
	  
    <li><a href="Impressum.htm">Impressum</a></li>  
	  
    <li><a href="Sitemap.htm">Sitemap</a></li>  
    </ul>  
</div>  
  
</body>  
</html>

Vielen Dank für Eure Hilfe

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Pull-Down Menü
LX 31.03.2010 14:11

css
– Informationen zu den Bewertungsregeln
Hallo!

Kannst Du diese Beispiele nicht mal eben auf einen Server testweise hochladen, damit wir sie etwas einfacher testen können?

Ich würde empfehlen, die entsprechenden Events im IE über das bubbling zu verteilen, was im script etwa so aussieht:
```
toggleHover=function(ev) {  
    ev=ev||window.event;  
    node=ev.target||this;  
    while (node && node != document.getElementsByTagName('body')) {  
        if (ev.type=='mouseover') { node.className += ' hover'; }  
        else { node.className = node.className.replace(/\bhover\b/g, '');  
    }  
}  
document.onmouseover=toggleHover;  
document.onmouseout=toggleHover;  
```
Damit sparst Du Events und hast somit bessere Performance. Die Klasse hover kannst Du natürlich auch durch active oder was auch immer ersetzen.

Gruß, LX

--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. CSS Pull-Down Menü
  
  xen 31.03.2010 14:29
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo LX,
  
  danke schonmal für die 2 Posts :P (das nächste mal werde ich dein Hinweis berücksichtigen)
  
  Anbei findest du den Link zur HTML hier
  
  und die CSS hier
  
  Werde gleich dein Post ausprobieren, soweit ich diesen verstehe.
  
  Danke im voraus
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. CSS Pull-Down Menü
    
    LX 31.03.2010 14:47
    
    css
    
    – Informationen zu den Bewertungsregeln
    OK, wenn ich das korrekt verstehe, handelt Dein Problem davon, dass im IE6 die untere Linie der Einträge nicht gezeigt wird. Klingt für mich nach einem klassischen hasLayout-Problem - versuche es einmal mit
    
    #navi li ul { zoom: 1; }
    
    Gruß, LX
    
    --
    RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. CSS Pull-Down Menü
      
      xen 31.03.2010 15:02
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      Das ist leider nicht mein Hauptproblem (zwar auch ein Problem, aber da weiß ich woher es kommt)
      
      Probleme:
      
      1. ich bekomme nicht hin das sich die Hauptnavi (ohne Ausklappmenü) die Schriftfarbe beim Hovern nicht weiß färbt. Hier habe ich schon einiges im CSS probiert aber irgendwie bekomme ich es nicht geregelt.
      
      2. Im IE6 ist kein Hovern der Flächen ersichtlich, egal worüber man mit der Maus fährt.
      
      Ich hoffe es ist nun etwas verständlicher -> Sorry
      
      PS: zoom: bringt in dem Fall leider nicht, aber wie gesagt das mit der Linie liegt am margin-bottom: -1px <- das bekomme ich aber noch hin, wäre auch nicht Tragisch falls nicht
      
      grüße xen
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum
      1. CSS Pull-Down Menü
        
        LX 31.03.2010 16:04
        
        css
        
        – Informationen zu den Bewertungsregeln
        
        Probleme:
        
        ich bekomme nicht hin das sich die Hauptnavi (ohne Ausklappmenü) die Schriftfarbe beim Hovern nicht weiß färbt. Hier habe ich schon einiges im CSS probiert aber irgendwie bekomme ich es nicht geregelt.
        
        Das Problem kann ich hier im IE6 nicht nachvollziehen. Dass der Hintergrund sich nicht wie im FF verfärbt, liegt daran, dass die entsprechenden CSS-Deklarationen fehlen.
        
        Gruß, LX
        
        --
        RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
        
        Beitrag melden
        
        –
        Informationen zu den Bewertungsregeln
        
        Übersicht
        
        alle Foren
        
        SELFHTML-Forum
        
        anmelden
        
        Benutzerkonto erstellen
        
        Beitrag im Thread-Baum

CSS Pull-Down Menü
xen 31.03.2010 13:28

css
– Informationen zu den Bewertungsregeln
Plz help me :P
Beitrag melden

–
Informationen zu den Bewertungsregeln

CSS Pull-Down Menü
ChrisB 29.03.2010 15:53

css
– Informationen zu den Bewertungsregeln
Hi,

Anbei der Link zur HTML-Datei: hier

Beseitige erst mal die Fehler, danach kann man weitersehen.

MfG ChrisB

--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Xen: CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü

CSS Pull-Down Menü