[GELÖST] Horizontales Menü mit zwei Levels

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

[GELÖST] Horizontales Menü mit zwei Levels

Post by antibart »

Hallo,

irgendwie stehe ich heute auf dem Schlauch ....

Ich möchte ein horizontales Menü mit einem ebenfalls horizontalen Submenu direkt darunter immer linksbündig mit dem jeweiligen aktiven Hauptmenupunkt erstellen. Die Unterpunkte erscheinen erst bei Klick auf den Hauptpunkt

Ich benutze die simple navigation mit eigenen CSS und verschachtelten Listen.

Das funktioniert zwar alles rein technisch, nur optisch nicht so ganz.

Denn der jeweilige Hauptmenüpunkt wird mit den Unterpunkten des Submenus in die Breite gezogen (siehe Anhang). Das ist ja auch eigentlich recht logisch, da der nächste Listenpunkt ja erst kommen kann, wenn die reingeschachtelte Liste am Ende ist.. Dennoch würde ich gerne wissen, ob es nicht doch  einen Weg gibt, das zu verhindern.

Eine Lösung wäre wohl, einfach zwei separate Menüs aufzurufen: eines für Level 1 und eines für Level 2..

Bloss: dann bräuchte ich für jede Hauptseite ein eigenes Template, da die Positionen ja variieren. Und bei diesem noch etwas unkonzipierten Projekt, bei dem sicher noch einiges hin- und hergeschoben wird, würde ich die Nachbearbeitung gern so einfach wie möglich halten.

...
Attachments
menu.jpg
Last edited by antibart on Fri Dec 05, 2008 1:08 pm, edited 1 time in total.
cyberman

Re: Horizontales Menü mit zwei Levels

Post by cyberman »

Evtl. hilft dir das Template tabbed2 weiter

http://themes.cmsmadesimple.org/index.p ... eturnid=17
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: Horizontales Menü mit zwei Levels

Post by antibart »

Vielen Dank schon mal...

.. ich befürchte allerdings, bis ich das durchgeguckt, verstanden, eingerichtet und angepasst habe, bin ich mit der Lösung mit den mehreren Templates dann doch schneller.

Ich hoffte, es gäbe etwas flotteres per css und position oder so. Aber es ist erstaunlich: auch über Google ist so etwas gar nicht so einfach rauszukriegen. Die meisten arbeiten dann gleich wieder mit hover-menüs, was ich ja gar nicht brauche.
kohola
Forum Members
Forum Members
Posts: 28
Joined: Sun Nov 30, 2008 1:57 pm

Re: Horizontales Menü mit zwei Levels

Post by kohola »

hallo antibar

poste doch mal das css - bzw. hänge es an, ansosten ist eine "Ferndiagnose" recht schwierig
aber mal so in die Luft geschossen: positionierst du das Untermenü überhaupt --> explizit?

lg
kohola
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: Horizontales Menü mit zwei Levels

Post by antibart »

kohola wrote:

poste doch mal das css - bzw. hänge es an, ansosten ist eine "Ferndiagnose" recht schwierig
aber mal so in die Luft geschossen: positionierst du das Untermenü überhaupt --> explizit?
Nein bzw ja

Nein - denn genau dieses explizite Postionieren soll ja eben vermieden werden. Das war der Grund meines Vorgehens und meiner Frage. Das Untermenu soll ja durch die verschachtelte ul immer automatisch dort positioniert werden, wo sich der jeweilige Hauptpunkt befindet (siehe Bild oben im Anhang) ... von ein ein paar Pixeln "zum schön machen" natürlich ganz abgesehen.

Die Positionierung klappt ja auch und war nicht das Problem... Das Problem war, dass die Breite des Submenus die Breite des übergordneten Punktes beeinflusst. Das würde bei einem vertikalen Menü natürlich auch passieren, sobald das Wort im Untermenü die Breite sprengt - aber dort man mehr Möglichkeiten (div etwas vergrößern, Schrift kleiner usw)

Ja, weil ich es nun wie oben schon von mir beschrieben gemacht habe (und demnach das Original CSS auch nicht mehr habe)... Dh: ich habe statt einer verschachtelten Liste ein Extra Untermenu erstellt, was genau dort positioniert ist wo es sein soll. Schade, weil ich dadurch ein -zwei Templates mehrb benutzen muss.

Aber da ich solche verschachtelten Menüs schon öfter erstellt habe, kann ich gerne ein anderes posten, was im Prinzip das gleiche macht - nur eben vertikal.

Denk Dir einfach ein float:left dazu und andere Dimensionen:

Code: Select all

#menu ul {
margin : 0;
padding : 0;
list-style-type : none;
overflow : hidden;
background-color : #f0f1f1;
width : 282px;
}
#menu ul ul {
margin : 0;
padding : 0;
list-style-type : none;
overflow : hidden;
background-color : #f0f1f1;
width : 282px;
border-top : 1px solid #265b91;
}
#menu li {
margin : 0 0 -1px 0;
border-bottom : 1px solid #265b91;
}
#menu ul ul li {
background : url(images/pfeil.gif) no-repeat;
padding : 0;
margin : 0;

}
Last edited by antibart on Fri Dec 05, 2008 11:39 am, edited 1 time in total.
mike-r

Re: Horizontales Menü mit zwei Levels

Post by mike-r »

Code: Select all

li {
	float:left;
}
li ul {
	position:absolute;
}
...
<ul>
	<li>Oberpunkt 1</li>
	<li>Oberpunkt 2
		<ul>
			<li>Unterpunkt 1</li>
			<li>Unterpunkt 2</li>
		</ul>
	</li>
</ul>
Sollte etwa tun, was Du möchtest.
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: Horizontales Menü mit zwei Levels

Post by antibart »

mike-r wrote:

Sollte etwa tun, was Du möchtest.
... und zwar sowas von...

Ich sagte ja: Ich stand auf dem Schlauch ... die absolute Position ...

Heißen Dank...
Last edited by antibart on Fri Dec 05, 2008 2:49 pm, edited 1 time in total.
kohola
Forum Members
Forum Members
Posts: 28
Joined: Sun Nov 30, 2008 1:57 pm

Re: [GELÖST] Horizontales Menü mit zwei Levels

Post by kohola »

... ok - zu spät - das nächste mal!
Post Reply

Return to “Layout und Design”