Ausklappbares Menu bestehend aus Button

[Nin]

Hallo,

komme mit einer Sache einfach nicht klar...
Ich versuche ein Menu zu erstellen mit selbst gestalteten Button.
Einer der Button soll sich beim Roll-Over ausklappen, um ein Submenu aus Button anzuzeigen.
Würde sagen, dass ich dazu eine Liste in einer Liste erstellen muss... aber finde einfach keinen Weg über CSS, so dass es klappt...
Wie muss ich die IDs/Klassen für <ul> / <li> / <a> definieren, so dass es funktioniert? (die Button selbst haben eine Größe von 120px x 30 px)

...hier meine allgemeine Struktur dafür in HTML:

<div>
  <ul>
    <li> <a href="#" alt=""></a> </li>
    <li> <a href="#" alt=""></a> </li>
    <ul>
      <li> <a href="#" alt=""></a> </li>
      <li> <a href="#" alt=""></a> </li>
    </ul>
    <li> <a href="#" alt=""></a> </li>
    <li> <a href="#" alt=""></a> </li>
  </ul>
</div>

Bin dankbar für jeden konstruktiven Vorschlag!
Lieben Gruß

[Gunnar Bittersmann]

@@Nin:

nuqneH

Würde sagen, dass ich dazu eine Liste in einer Liste erstellen muss... aber finde einfach keinen Weg über CSS, so dass es klappt...

In http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=SELFHTML hast du nicht gesucht?

<div>
  <ul>

Wozu soll das 'div', das als einziges Kind 'ul' enthält, gut sein?

<li> <a href="#" alt=""></a> </li>
    <li> <a href="#" alt=""></a> </li>
    <ul>

Nein, 'ul' darf nicht Kind von 'ul' sein. 'ul' darf nur 'li'-Kindelemente haben.

Qapla'

[suit]

Wozu soll das 'div', das als einziges Kind 'ul' enthält, gut sein?

Ohne nähere Betrachtung kann man das nicht pauschal als Fehler ankreiden. Ab und zu braucht man für diverse Formatierungsvorhaben einfach zusätzliche elemente - bis ::outside flächendeckend unterstützt wird, dürfte es wohl noch einige Jahre dauern.

[Gunnar Bittersmann]

@@suit:

nuqneH

Wozu soll das 'div', das als einziges Kind 'ul' enthält, gut sein?

Ohne nähere Betrachtung kann man das nicht pauschal als Fehler ankreiden. Ab und zu braucht man für diverse Formatierungsvorhaben einfach zusätzliche elemente

In HTML5 bietet sich dafür 'nav' an.

Qapla'

[suit]

In HTML5 bietet sich dafür 'nav' an.

In älteren HTML-Versionen gabs dafür bereits <menu /> (anstatt <ul />) - warum man sich dazu entschieden hat das Rad neu zu erfinden verstehe ich nicht ganz :)

[Beat]

Ich versuche ein Menu zu erstellen mit selbst gestalteten Button.
Einer der Button soll sich beim Roll-Over ausklappen, um ein Submenu aus Button anzuzeigen.
Würde sagen, dass ich dazu eine Liste in einer Liste erstellen muss... aber finde einfach keinen Weg über CSS, so dass es klappt...
Wie muss ich die IDs/Klassen für <ul> / <li> / <a> definieren, so dass es funktioniert? (die Button selbst haben eine Größe von 120px x 30 px)

...hier meine allgemeine Struktur dafür in HTML:

<div>
  <ul>
    <li> <a href="#" alt=""></a> </li>
    <li> <a href="#" alt=""></a> </li>
    <ul>
      <li> <a href="#" alt=""></a> </li>
      <li> <a href="#" alt=""></a> </li>
    </ul>
    <li> <a href="#" alt=""></a> </li>
    <li> <a href="#" alt=""></a> </li>
  </ul>
</div>

Dein HTML ist fehlerhaft.
Ein <ul> Element darf nur <li> Elemente als Children haben.
a Elemente kennen kein alt Attribut.

<ul class="navigation">  
  <li> <a href="#">1</a> </li>  
  <li> label  
    <ul class="subnavigation">  
       <li> <a href="#">2a</a> </li>  
       <li> <a href="#">2b</a> </li>  
    </ul>  
  </li>  
  <li> <a href="#">3</a> </li>  
</ul>  

mfg Beat

[Nin]

Hallo Beat,

klar danke für die Info wegen dem alt Attribut... habe es rausgenommen.
Wollte damit auf die Button aus der CSS-Datei verweisen, falls diese aus irgendwelchen Gründen bei den Besuchern nicht sichtbar wären.... aber wenn das auf diese Weise nicht geht, spare ich es mir.

Was mich verwirrt: Deine korrigierte HTML-Datei enthält ebenfalls ein <ul> innerhalb der <li> Auflistung. Du hast ein <li> jedoch eigens für die "Sub-<ul>" erstellt....
Mein Problem ist vor allem die Strukturierung / der Aufbau der entsprechenden CSS Datei. Wie muss ich die Elemente ansprechen, damit es funktioniert (wie müsste ich jetzt z.B. die <li> label ansprechen?

Gruß Nin

[Beat]

Was mich verwirrt: Deine korrigierte HTML-Datei enthält ebenfalls ein <ul> innerhalb der <li> Auflistung.

Ja aber dieses ul ist kein direktes Kind des ersten ul Elements.

Du hast ein <li> jedoch eigens für die "Sub-<ul>" erstellt....

Natürlich. Irgend ein sichtbares Label zum hovern braucht es ja.

Mein Problem ist vor allem die Strukturierung / der Aufbau der entsprechenden CSS Datei. Wie muss ich die Elemente ansprechen, damit es funktioniert (wie müsste ich jetzt z.B. die <li> label ansprechen?

#navigation #subnavigation {display:none;}  
#navigation li:hover #subnavigation {display:block;}

Ich selbst würde war nicht mit display, sondern mit positionierung arbeiten.
Aber das ist ein Detail.

mfg Beat

[Beat]

#navigation #subnavigation {display:none;}

#navigation li:hover #subnavigation {display:block;}

  
Nein ich habe im HTML Klassen verwendet, also  
  
~~~css
.navigation .subnavigation {display:none;}  
.navigation li:hover .subnavigation {display:block;}

mfg Beat

[Nin]

Hallo Beat,

super danke - mit der Info kann ich schon mehr anfangen... hoffe, es klappt dann auch... habe leider jetzt gerade keine Zeit mehr daran zu arbeiten.

Noch eine Frage (zur Sicherheit).
Die Klassen hast Du nebeneinander geschrieben, weil die so aufeinander aufbauen sollen oder?
D.h. ich lege es quasi so an:

.navigation {}

.navigation .subnavigation {display:none;}

.navigation .li:hover .subnavigation {display:block;}

Das ergibt für mich sinn, danke! :-)

Aber: Wie bringe ich denn dann schlussendlich über CSS die Button ein?

DANKE!
LG Nin

[suit]

Aber: Wie bringe ich denn dann schlussendlich über CSS die Button ein?

Nachdem du das nicht Spezifizierst, spamme ich einfach mal zwei Links rein:

http://css.maxdesign.com.au/listamatic/
http://wellstyled.com/css-nopreload-rollovers.html

[Nin]

Hallo nochmal,

also das Menü steht und alle Button funktionieren. Was jetzt noch mein Problem ist: Die Subnavi ist durchgehend sichtbar (nicht nur bei Rollover) und sie befindet sich nicht an der richtigen Stelle (Subnavi ist auf Höhe der anderen Button und nicht UNTER dem Button "festetouren"). Hier mal meine Definierungen...

  
<div id="menu">  
	<ul class="navi">  
		<li> <a id="einkehren" href="z_main_einkehren.html"></a> </li>  
		<li> <a id="biere" href="z_main_biere.html"></a> </li>  
		<li> <a id="festetouren" href="z_main_festetouren.html"></a>  
        <ul class="subnavi">  
			<li> <a id="bierkul" href="z_sub_bierkul.html"></a> </li>  
			<li> <a id="kultur" href="z_sub_kultur.html"></a> </li>  
			<li> <a id="bayron" href="z_sub_bayron.html"></a> </li>  
		</ul>  
		</li>  
		<li> <a id="region" href="#"></a> </li>  
		<li> <a id="shop" href="#"></a> </li>  
		<li> <a id="kontakt" href="#"></a> </li>  
	</ul>  
</div>  

  
/* Menu Anfang*/  
#menu .navi {  
		list-style-type:none;  
		float:left;  
		height:30px; width:732px;  
		margin-right:2px;  
		display:block;  
		text-decoration:none;  
}  
#menu .navi a {  
		list-style-type:none;  
		float:left;  
		height:30px; width:120px;  
		margin-right:2px;  
		display:block;  
		text-decoration:none;  
}  
/* Mainmenu Button */  
	#einkehren {background-image:url(images_layout/z_Mbutton_einkehren_off.png);}  
	#einkehren:hover, #einkehren:focus {background-image:url(images_layout/z_Mbutton_einkehren_on.png);}  
	#biere {background-image:url(images_layout/z_Mbutton_biere_off.png);}  
	#biere:hover, #biere:focus {background-image:url(images_layout/z_Mbutton_biere_on.png);}  
	#festetouren {background-image:url(images_layout/z_Mbutton_festetouren_off.png);}  
	#festetouren:hover, #festetouren:focus {background-image:url(images_layout/z_Mbutton_festetouren_on.png);}  
	#region {background-image:url(images_layout/z_Mbutton_region_off.png);}  
	#region:hover, #region:focus {background-image:url(images_layout/z_Mbutton_region_on.png);}  
	#shop {background-image:url(images_layout/z_Mbutton_shop_off.png);}  
	#shop:hover, #shop:focus {background-image:url(images_layout/z_Mbutton_shop_on.png);}  
	#kontakt {background-image:url(images_layout/z_Mbutton_kontakt_off.png);}  
	#kontakt:hover, #kontakt:focus {background-image:url(images_layout/z_Mbutton_kontakt_on.png);}  
  
#menu .subnavi {  
		list-style-type:none;  
		float:left;  
		top:32px; left:244px;  
		height:30px; width:120px;  
		margin-right:2px;  
		display:none;  
		text-decoration:none;  
}  
#menu .subnavi a {  
		list-style-type:none;  
		float:left;  
		height:30px; width:120px;  
		display:block;  
		text-decoration:none;  
}  
/* Submenu Button */  
	#bierkul {background-image:url(images_layout/z_Sbutton_bierkul_off.png);}  
	#bierkul:hover, #bierkul:focus {background-image:url(images_layout/z_Sbutton_bierkul_on.png);}  
	#kultur {background-image:url(images_layout/z_Sbutton_kultur_off.png);}  
	#kultur:hover, #kultur:focus {background-image:url(images_layout/z_Sbutton_kultur_on.png);}  
	#bayron {background-image:url(images_layout/z_Sbutton_bayron_off.png); display:none;}  
	#bayron:hover, #bayron:focus {background-image:url(images_layout/z_Sbutton_bayron_on.png);}  
	*/  
/* Menu Ende */  
  

Hoffe, ihr könnt damit etwas anfangen und mir erklären, ob diese umsetzungsweise überhaupt OK ist bzw. was ich ändern muss...

DANKE!

[Beat]

#menu .navi a {
list-style-type:none;
float:left;
height:30px; width:120px;
margin-right:2px;
display:block;
text-decoration:none;
}

Warum formatierst du hier das a Element, wenn du doch eher das li Element formatieren willst?

mfg Beat

[Nin]

Hmmm... weil das Menu ursprünglich ohne Subnavi aufgebaut war und auch nicht in einer Liste stand, sondern im Prinzip aus mehreren Einzelbutton, die nebeneinander stehen. Habe jetzt versucht diese Variante abzuwandeln.

Wenn ich jetzt einfach aus
#menu .navi a {}  die Bezeichnung
#menu .navi li {}  mache, funktioniert es nicht...

D.h. ich müsste alle formatierungen nochmal ändern und meine Button ganz anders einbringen?
Bei meinen Recherchen im Netz hab ich bisher immer nur Menüs gesehen, die ohne dieses Subnavi-Prinzip aufgebaut sind... von daher hab ich damit jetzt irgendwie Probleme...

Wenn Du mir dabei helfen kannst wäre ich wirklich dankbar!

[Beat]

Wenn Du mir dabei helfen kannst wäre ich wirklich dankbar!

Ich möchte nicht deinen Code parsen, um herauszufinden, wie dein Menu aussehen soll.
Beschreibe es!

mfg Beat

[suit]

Nein ich habe im HTML Klassen verwendet, also

.navigation .subnavigation {display:none;}

.navigation li:hover .subnavigation {display:block;}

  
Wozu - kennst du den Nachfahren-Selektor nicht? Den kennen sogar sehr antike Browser ...