ausklappbare Navigationsleiste - onmouseout

[Simon]

Hallo Leute,

ich tüftle gerade an einer ausklappbaren Navigationsleiste. Ist soweit fertig, mein Problem:
Ich möchte dass Sie ausklappt wenn der Cursor drüber ist und einklappt wenner weg ist.

Dafür hab ich 2 Elemente. Ein div dass immer zu sehen ist und das aufklappbare. Ich hänge also bei onmouseover das zweite unten am ersten hin.

Meine Idee war, dass ich bei onmousout eines divs prüfe, ob der curser auf dem anderen ist.

Allerdings schließt sich das hängende div nicht mehr:
(Lasse ich setTimeout() weg, schließt sich das hängende div sobald ich das erstere verlasse)

			window.onload = function () {  
				  
				// TOP-NAV-LIST SHOW/HIDE  
				var top_nav_onmouseout = true;  
				var top_nav_list_onmouseout = true;  
				  
				document.getElementById('top_navigation').onmouseover = function () {  
					show_element('top_nav_list');  
					top_nav_onmouseout = false;  
				}  
				  
				document.getElementById('top_nav_list').onmouseover = function () {  
					top_nav_list_onmouseout = false;  
				}  
				  
				function check_nav_onmouseout () {  
					if (top_nav_onmouseout && top_nav_list_onmouseout) {  
						hide_element('top_nav_list');  
					}  
				}  
				  
				document.getElementById('top_navigation').onmouseout = function () {  
					top_nav_onmouseout = true;  
					window.setTimeout("check_nav_onmouseout()", 100);  
				}  
				  
				document.getElementById('top_nav_list').onmouseout = function () {  
					top_nav_list_onmouseout = true;  
					window.setTimeout("check_nav_onmouseout()", 100);  
				}  
				  
				document.onclick = function () {  
					hide_element('top_nav_list');  
				}  
				  
				// TOP-NAV-LIST SHOW/HIDE END  
				  
			} // WINDOW ONLOAD END

CSS auszug:

  
  
#top_navigation, #content, #top_nav_list {  
	text-align: left;  
	border: 1px solid #CCC;  
}  
  
#top_navigation {  
	width: 75px;  
	padding: 5px 8px;  
	margin: 0px 15px -1px auto;  
	background-image: url(images/arrow_down_grey.gif);  
	background-repeat: no-repeat;  
	background-position: bottom right;  
}  
  
label, h1, h3, #footer, .top_nav_head {  
	color: #999;  
}  
  
#top_nav_list {  
	padding: 0px;  
	width: 160px;  
	position: absolute;  
	top: 32px;  
	right: 15px;  
	background-color: #FFF;  
	border-style: dashed;  
	visibility: hidden;  
	display: block;  
	z-index: 1;  
}  
  
#top_nav_list ul {  
	list-style-type: none;  
	list-style-position: inside;  
	padding: 0px;  
	margin: 0px;  
}  
  
#top_nav_list li {  
	padding: 8px 8px;  
	width: auto;  
}  

Danke fürs durchlesen

[fastix®]

Moin!

Im Jahr 2010 geht das ganz einfach und schlank mit CSS:

1. Du baust eine Liste. Die muss ja nicht aussehen wie eine Liste :)

2. Beim Überfahren eines Listenelementes der ersten Gruppe (:hover) wird die dazugehörende, eingeschlossene, Liste angezeigt (display:block)

Tipp: Vermeide margins. Opera regiert darauf sehr unwirsch und schließt dann das Menü.

Hier der einfache Fall:

HTML:

  
<div class="menue">  
  <ul>  
     <li>Gruppe A  
        <ul>  
          <li>Link A 1</li>  
          <li>Link A 2</li>  
        </ul>  
     </li>  
  
     <li>Gruppe B  
        <ul>  
          <li>Link B 1</li>  
          <li>Link B 2</li>  
          <li>Link B 3</li>  
        </ul>  
     </li>  
  </ul>  
</div><!-- klappmenue -->

CSS:

div.menue ul {  
  cursor:pointer;  
  display:block;  
}  
  
  
div.menue ul ul {  
    display:none;  
}  
  
div.menue ul li:hover ul {  
    display:block;  
}

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Simon]

Wald vor lauter Bäumen, danke

P.S. ebenfalls danke für den Opera-Tipp

[Matthias Apsel]

Om nah hoo pez nyeetz, Simon!

display: none; ist meist keine gute Idee, weil die Elemente in Screenreadern dann auch nicht gefunden werden.

Besser ist für das Ausgeblendete

position: absolute; und aus dem Anzeigenbereich schieben z.B. mit left: -1000px;

und für das Eingeblendete

position: relative;
left: auto;

oder was passendes

Dabei nicht vergessen, der übergeordneten Liste position: relative; zu geben, damit die andere Liste weiß, an welchem Elternelement sie sich ausrichten soll.

Matthias

[fastix®]

Moin!

display: none; ist meist keine gute Idee, weil die Elemente in Screenreadern dann auch nicht gefunden werden.

dann wäre es aber sympathischer dem Element die richtige Höhe zu geben:

div.menue ul {
  cursor:pointer;
  display:block;
}

div.menue ul ul {
    display:block;
    height:1.5em; /* ggf. Wert einstellen */
    overflow:hidden;
}

div.menue ul li:hover ul {
    display:block;
    height:auto;
    overflow:visible;
}

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Simon]

wow, thx.

danke matthias + fastix
für die hintergrund-infos (und das sind die wohl wertvollsten (: )

VID (Versinkend in Demut)

Simon

[JürgenB]

Hallo fastix®,

2. Beim Überfahren eines Listenelementes der ersten Gruppe (:hover) wird die dazugehörende, eingeschlossene, Liste angezeigt (display:block)

und was macht der immer noch vorhandene IE6?

Gruß, Jürgen

[fastix®]

Moin!

und was macht der immer noch vorhandene IE6?

Der schreibt das Javascript von http://www.fastix.org/fastix-cms-layout_2/ ab und bei Bedarf um.
Das behebt auch gewisse Opera-Probleme.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[JürgenB]

Hallo fastix®,

Der schreibt das Javascript von http://www.fastix.org/fastix-cms-layout_2/ ab und bei Bedarf um.
Das behebt auch gewisse Opera-Probleme.

wäre nett gewesen, wenn du das Simon sofort geantwortet hättest. Noch kann man den IE6 bei so wichtigen Dingen wie der Navigation nicht ignorieren.

Gruß, Jürgen

[dave]

Hi,

Noch kann man den IE6 bei so wichtigen Dingen wie der Navigation nicht ignorieren.

Wenn ihn einfach alle auch bei wichtigen Dingen ignorieren würden, gäbe es ihn vermutlich nicht mehr.

Bei privaten Projekten nehme ich keinerlei Rücksicht auf veraltete Browser (auch nicht IE7, FF<3.6 etc.).

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, JürgenB!

und was macht der immer noch vorhandene IE6?

der bekommt die Navigationsliste grundsätzlich ausgeklappt; getreu dem Motto: Die Funktionalität muss gewährleistet sein.

Matthias

[Alexander (HH)]

Moin Moin!

ich tüftle gerade an einer ausklappbaren Navigationsleiste. Ist soweit fertig, mein Problem:
Ich möchte dass Sie ausklappt wenn der Cursor drüber ist und einklappt wenner weg ist.

Warum willst Du Deine Site auf Krampf unnavigierbar machen? Drop-Down-Menüs kann man auch rein mit CSS bauen. Und eine Navigation, die kein elendiges Abtasten der halben Seite erfordert, halte ich für noch besser. Einfach <ul>, <li>, <a> und etwas CSS für Schriftauswahl und Farben.

Alexander