CSS Navigation mit Listen / Subnavi

[Florian]

Moin zusammen,

ich habe mal wieder ein Frage! Um auf einer Seite eine Navigation mit Listen zu ermöglichen, programmierte ich folgenden Code:

<ul id="menu">
   <li>Know How
        <ul>
                <li><a href="">Software</a></li>
                <li><a href="">Hardware</a></li>
                <li><a href="">Betriebsysteme</a></li>
                <li><a href="">Contribution</a></li>
        </ul>
   </li>

...usw..

im CSS wird folgendermassen formatiert:

ul#menu, ul#menu ul { list-style: none; margin: 0; padding: 0; }
ul#menu li { position: relative; width: 160px; background: lavender; border: 0px solid silver; padding: 3px; }
ul#menu li ul { position:absolute; left: 170px; top: 0px; display: none;}
ul#menu li:hover ul { display: block; }

Jetzt meine Frage:
Wenn die Subnavis sich aufklappen und es befinden sich zahlreiche Punkte im Subnavi werden die z.B. am Browserfensterende abgeschnitten. Wie auch wenn sich die Subnavi am Rande des rechten / linken Rand des Browsers öffnet sin diese nicht sichtbar!

Wenn man ein "overflow: scroll" im <div> ansetzt erscheint das ganze Subnavi nicht mehr!

Wie kann ich diese Problem lösen?

MFG
Florian

[Marc]

Hallo Florian,

ich habe mal wieder ein Frage! Um auf einer Seite eine Navigation mit Listen zu ermöglichen, programmierte ich folgenden Code:

Das ist sicher kein programm, also ist es auch cniht programmiert, aber das nur am Rande.

<ul id="menu">
   <li>Know How
        <ul>
                <li><a href="">Software</a></li>
                <li><a href="">Hardware</a></li>
                <li><a href="">Betriebsysteme</a></li>
                <li><a href="">Contribution</a></li>
        </ul>
   </li>

...usw..

im CSS wird folgendermassen formatiert:

ul#menu, ul#menu ul { list-style: none; margin: 0; padding: 0; }
ul#menu li { position: relative; width: 160px; background: lavender; border: 0px solid silver; padding: 3px; }
ul#menu li ul { position:absolute; left: 170px; top: 0px; display: none;}
ul#menu li:hover ul { display: block; }

Jetzt meine Frage:
Wenn die Subnavis sich aufklappen und es befinden sich zahlreiche Punkte im Subnavi werden die z.B. am Browserfensterende abgeschnitten. Wie auch wenn sich die Subnavi am Rande des rechten / linken Rand des Browsers öffnet sin diese nicht sichtbar!

Was denn für eine Subnavi? Wo wird die aufgeklappt? Wie? Per JavaScript? Per CSS? Wahrschenlich hast Du auf den Folgeseiten verschachtelte Listen?

Vielleicht versuchst Du die Frage nochmal etwas verständlicher zu formulieren. Am besten wäre ein Link...

Wenn man ein "overflow: scroll" im <div> ansetzt erscheint das ganze Subnavi nicht mehr!

Was für ein <div>? Wie sollen wir wissen, was für eine Auswirkung ein irgendwo in Deinem Code befindliches DIV auf Deine Navigation hat? In Deinem Code-Schnipsel gibt es kein DIV...

Wie kann ich diese Problem lösen?

Ohne den restlichen Code kann ich das noch nicht mal raten...

Viele Grüße,
Marc.

[wahsaga]

hi,

Was denn für eine Subnavi? Wo wird die aufgeklappt? Wie? Per JavaScript? Per CSS?

Alle diese Fragen beantwortet der Beispielcode doch eigentlich in hinreichemdem Maße.

gruß,
wahsaga

[Marc]

Hallo zusammen,

hi,

Was denn für eine Subnavi? Wo wird die aufgeklappt? Wie? Per JavaScript? Per CSS?

Alle diese Fragen beantwortet der Beispielcode doch eigentlich in hinreichemdem Maße.

Stimmt, sorry, hätte mir die CSS-Angaben genauer ansehen sollen, dann kann man es erraten...

At Florian: Kennst Du das eric-Meyer-Beispiel?
http://meyerweb.com/eric/css//edge/menus/demo.html

Vielleicht hilft Dir das bereits weiter?

Viele Grüße,
Marc.

[Florian]

Hallo Peter,

ok ich erstellte den Code..besser???
Ok <div> war falsch formuliert, meinte die ID des der UL:
<ul id="menu">

Hier fügte ich das overflow folgendermassen ein:
<ul id ="menu" style="overflow:scroll;">

Auswirkung davon ist, dass keine Subnavi durch die Listen Itemes mehr sichtbar wird!
Die Subnavi zum Verständnis sind die <li>:
<li><a href="">Software</a></li>

Sie werden nicht durch Javascript eingebunden sondern schick und schnell mit CSS! Hier nochmals der CSS Code welcher auch sehr gut funktioniert, nur eben die Sichtbarkeit der LI(Subnavi) an Browserenden nicht darstellt!

ul#menu, ul#menu ul { list-style: none; margin: 0; padding: 0; }
ul#menu li { position: relative; width: 160px; background: lavender; border: 0px solid silver; padding: 3px; }
ul#menu li ul { position:absolute; left: 170px; top: 0px; display: none;}
ul#menu li:hover ul { display: block; }

Folgende Zeilen ermöglicht das Darstellen der LI beim mouseover(hover):

ul#menu li ul { position:absolute; left: 170px; top: 0px; display: none;}
ul#menu li:hover ul { display: block; }

Hat nun jemand vieleicht eine Idee?
Gruss
Florian

Hallo Florian,

ich habe mal wieder ein Frage! Um auf einer Seite eine Navigation mit Listen zu ermöglichen, programmierte ich folgenden Code:

Das ist sicher kein programm, also ist es auch cniht programmiert, aber das nur am Rande.

<ul id="menu">
   <li>Know How
        <ul>
                <li><a href="">Software</a></li>
                <li><a href="">Hardware</a></li>
                <li><a href="">Betriebsysteme</a></li>
                <li><a href="">Contribution</a></li>
        </ul>
   </li>

...usw..

im CSS wird folgendermassen formatiert:

ul#menu, ul#menu ul { list-style: none; margin: 0; padding: 0; }
ul#menu li { position: relative; width: 160px; background: lavender; border: 0px solid silver; padding: 3px; }
ul#menu li ul { position:absolute; left: 170px; top: 0px; display: none;}
ul#menu li:hover ul { display: block; }

Jetzt meine Frage:
Wenn die Subnavis sich aufklappen und es befinden sich zahlreiche Punkte im Subnavi werden die z.B. am Browserfensterende abgeschnitten. Wie auch wenn sich die Subnavi am Rande des rechten / linken Rand des Browsers öffnet sin diese nicht sichtbar!

Was denn für eine Subnavi? Wo wird die aufgeklappt? Wie? Per JavaScript? Per CSS? Wahrschenlich hast Du auf den Folgeseiten verschachtelte Listen?

Vielleicht versuchst Du die Frage nochmal etwas verständlicher zu formulieren. Am besten wäre ein Link...

Wenn man ein "overflow: scroll" im <div> ansetzt erscheint das ganze Subnavi nicht mehr!

Was für ein <div>? Wie sollen wir wissen, was für eine Auswirkung ein irgendwo in Deinem Code befindliches DIV auf Deine Navigation hat? In Deinem Code-Schnipsel gibt es kein DIV...

Wie kann ich diese Problem lösen?

Ohne den restlichen Code kann ich das noch nicht mal raten...

Viele Grüße,
Marc.

[Marc]

Hallo zusammen,

Hallo Peter,

??? :-)

ok ich erstellte den Code..besser???

Ja, obwohl ich selber Tomaten auf den Augen hatte...

Hier fügte ich das overflow folgendermassen ein:
<ul id ="menu" style="overflow:scroll;">

Das heißt ja, dass Inhalte, die größer, als die Liste sind, nur angezeigt werden, wenn man scrollt (und dass einem der Scrollbalken zur Verfügung gestellt wird).

Auswirkung davon ist, dass keine Subnavi durch die Listen Itemes mehr sichtbar wird!
Die Subnavi zum Verständnis sind die <li>:
<li><a href="">Software</a></li>

Eine andere Navi gibt es aber im Beispiel nicht?!? - is auch egal für das Problem...

ul#menu li { width: 160px;}
ul#menu li ul { position:absolute; left: 170px;display:none;}
ul#menu li:hover ul { display: block; }

OK, du blendest die Liste mittels display:none aus und beim überfahren mit der Maus wird sie angezeigt. Allerdings in einem 160pixeln breiten li 170 pixel weit vom linken Rand entfernt. :-)

Hat nun jemand vieleicht eine Idee?

ul#menu li:hover ul { display: block; position:absolute; left:10px;}

Is aber nur eine Idee, habe es nicht ausprobiert und arbeite normal nicht mit position:absolute

Viele Grüße,
Marc.