Horizontale Navigation overflow:hidden

[timof]

Hallo,

Standardmäßig bekommt das div #nav ja ein overflow:hidden für die horizontale Navigation. Zumindest wenn man das template mit dem Builder erstellt.

Ich brauche relativ häufig ein Dropdownmenü als horizontale Navigation. Durch das overflow:hidden wird das aufgeklappte natürlich versteckt.

Jetzt meine Frage:
Warum bekommt das #nav div dieses hidden? Ist das notwendig oder kann ich es weglassen?
Es wird schon einen Sinn haben, sonst würde es ja nicht durch den Builder erstellt werden und ich möchte ungerne an den "Eckpfeilern" von YAML rumpfuschen. :-)

[djesse]

Hallo,

Warum bekommt das #nav div dieses hidden? Ist das notwendig oder kann ich es weglassen?

Weil die bei YAML mitgelieferten Navigationen keine Dropdown-Navigationen sind - damit stellt sich auch die Anforderung ausklappender Inhalte nicht. Benötigt wird die Eigenschaft grundsätzlich zum Einschließen der floatenden Menüpunkte im Elternelement.

Wenn Du eine andere Menüform bauen willst, brauchst Du selbstverständlich auch selbstverständlich ein angepasstes CSS.

Es wird schon einen Sinn haben, sonst würde es ja nicht durch den Builder erstellt werden und ich möchte ungerne an den "Eckpfeilern" von YAML rumpfuschen. :-)

Das ist kein Eckpfeiler von YAML, sondern lediglich ein Menübaustein, den man verwenden kann oder auch nicht. Zur Umsetzung eines Dropdowns fallen mit 3..4 mögliche Ansätze ein, die ich hier nicht alle erklären kann. Am besten schaust Du Dir die Technik von einem der zahlreichen Onlinebeispiele im Netz ab und baust es nach.

Gruß
Dirk

[dnastone]

ich versuche gerade mit dem neuesten ymla framework eine dropdown navi einzubauen.

habe im css folgendes eingetragen:
#nav {overflow: inherit;}

aber das dropdown verschwindet immer hinter der main seite.

wie schaffe ich es das das drop down menü immer an oberster stelle liegt und angezeigt wird?

hier ein auszug vom code:

<div id="header" role="banner">
<div class="page_margins">
<div class="page">
<div class="subcolumns">
<div class="c25l">
<dnn:LOGO runat="server" ID="dnnLOGO" />
</div>
<div class="c75r">
<div id="nav" role="navigation">
<dnn:RADMENU runat="server" ID="dnnMENU" EnableEmbeddedSkins="false" Skin="dnn" />
</div>
</div>
</div>
</div>
</div>
</div>

<div id="main">
<div class="page_margins">
<div class="page">
<div id="col3">
<div id="col3_content" class="clearfix">
<div id="ContentPane" runat="server">Col3</div>
</div>
<!-- IE Column Clearing -->
<div id="ie_clearing"></div>
</div>
<div id="col1">
<div id="col1_content" class="clearfix">
<div id="RightPane" runat="server">Col1</div>
</div>
</div>
</div>
</div>
</div>

danke

[Mr. Magpie]

Für qualifizierte Antworten sind Links zu der Problemseite immer äußerst hilfreich.

[dnastone]

dsa ist der link zur seite:

http://cms6.tscheppe.at/

beim menüpunkt produkte klappen die unterpunkte auf, aber leider unter dem main bereich.

[Mr. Magpie]

Ich kann da nur einen Unterpunkt entdecken, ist das richtig?

Ändere einmal versuchsweise in deiner basemod.css die Zeile 56 und zwar gibst du dort #nav noch ein overflow:visible - dann schauen wir mal, ob es auch in den IE funktioniert, beim FF tat's jedenfalls

[dnastone]

ich habe jetzt 5 unterpunkte angelegt und overflow auf visible gestellt.

aber in allen browser, IE, chrome und FF bleibt das klappmenü hinter dem main bereich und legt sich nicht darüber.

[Mr. Magpie]

Das ist nur ein Browser-Cache-Problem - leere deinen Cache und es funktioniert - soeben getestet in FF5, IE7 und IE8.

Jetzt setzt du auch noch in Zeile 45 der basemod.css den overflow für #header auf visible und dann werden die aufklappenden Unterpunkte auch nicht an der Grenze header/main abgeschnitten

[dnastone]

das overflow im header wars. jetzt klappt es bei mir auch einwandfrei.
vielen dank