XHTMLforum - Dropdownmenü zentrieren

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Dropdownmenü zentrieren (http://xhtmlforum.de/showthread.php?t=71407)

Dropdownmenü zentrieren

Hallo,
habe eine Navigation erstellt und bekomme das zweite Sub-Menü nicht zentriert. Kann mir dabei bitte jemand helfen.

Hier ist das Beispiel:
Edit fiddle - JSFiddle

Ich möchte also das Sub-Menü unter Reisen-->Asien zentriert haben, also mittigs unter "Asien".

Html:

Code:

<nav>

        <ul id="nav">

            <li><a href="#">Reisen</a>

                <ul class="sub1">

                    <li><a href="#">Europa</a></li>

                <li><a href="#">Amerika</a></li>

                <li><a href="#">Asien</a>

                        <ul class="sub2">

                            <li><a href="#">Thailand</a></li>

                        <li><a href="#">Bhutan</a></li>

                        <li><a href="#">China</a></li>

                        <li><a href="#">Vietnam</a></li>

                        <li><a href="#">Japan</a></li>

                    </ul>

                </li>

                <li><a href="#">Afrika</a></li>

                <li><a href="#">Australien</a></li>

            </ul>

        </li>

        <li><a href="#">Magazin</a></li>

        <li><a href="#">Karriere</a></li>

        <li><a href="#">Kontakt</a></li>

     </ul>

</nav>

CSS:

Code:

* {

        margin: 0;

        padding: 0;

}

body {

        padding: 100px;

}

ul#nav, ul.sub1, ul.sub2 {

        list-style-type: none;

}

ul#nav li {

        width: 125px;

        text-align: center;

        position: relative;

        float: left;

        margin-right: 4px;

}

ul#nav a {

        text-decoration: none;

        display: block;

        width: 125px;

        height: 25px;

        line-height: 25px;

        background-color: #FFF;

        border: 1px solid #CCC;

        border-radius: 5px;

        color: #000;

}

ul.sub1 a, ul.sub2 a {  

        margin-top: 4px;

}

ul#nav li:hover > a {  

        background-color: #6E6E6E;

        color: #FFF;

}

ul#nav li:hover a:hover {  

        background-color: #E2E2E2;

}

ul.sub1, ul.sub2 {

        display: none;

        position: absolute;

        width: 645px;

}

ul#nav li:hover ul.sub1 {

        display: block;

        float: left;

}

ul.sub1 li:hover ul.sub2 {

        display: block;

}

--------------

Gibt es außerdem eine andere Möglichkeit, die Sub-Menüs horizontal anzuordnen, ohne eine width zu vergeben (bei ul.sub1, ul.sub2)? Damit ich später keine Probleme beim responsiven Design bekomme...

--------------

Zu guter letzt hätte ich noch ein weiteres Problem..
Wie kann ich zwischen den beiden Sub-Menüs eine Linie einpflegen, auf der ein Punkt oder ein beliebiges Zeichen den aktiven Status anzeigt.
Klingt etwas kompliziert, hier mal ein Bild:

https://www.dropbox.com/s/eziivh7f00...ation.jpg?dl=0

Es geht um den Punkt unter "Asien".

Vielen Dank schonmal im Voraus

Zitat:

Zitat von Pinocchio (Beitrag 541603)

Ich möchte also das Sub-Menü unter Reisen-->Asien zentriert haben, also mittigs unter "Asien".

Dann sind aber die li-Elementen als Containing Block (googeln) für die positionierten Untermenüs (sub1, sub2) unpassend. ul#nav wäre dafür geeignet.

Zitat:

Zitat von Pinocchio (Beitrag 541603)

Gibt es außerdem eine andere Möglichkeit, die Sub-Menüs horizontal anzuordnen, ohne eine width zu vergeben (bei ul.sub1, ul.sub2)? Damit ich später keine Probleme beim responsiven Design bekomme...

Klar. Aber zuest s.Oben → Containing Block

Zitat:

Zitat von Pinocchio (Beitrag 541603)

Zu guter letzt hätte ich noch ein weiteres Problem..
Wie kann ich zwischen den beiden Sub-Menüs eine Linie einpflegen, auf der ein Punkt oder ein beliebiges Zeichen den aktiven Status anzeigt.
Klingt etwas kompliziert, hier mal ein Bild:

Die Linie könntest Du mit einem Border bei den Uls darstellen.
Für den Punkt (oder sonst was) könntest Du mit Pseudoklassen (:after, :before) arbeiten oder extra Elementen in den Listenelementen oder in den Links setzen.

Nach jedem Link im Menü einen Punkt zu setzen, ist auch aus Sicht der Zugänglichkeit, nicht verkehrt. So nutze ich beispielsweise das span-Element mit dem Punkt im Beispiel auf meinem Test-Server
Accessible menu :: tests.emil-webdesign.net
um eine Art Pfeil bei Submenüs darzustellen.

Mit Grafiken ist das Ganze natürlich auch leicht umzusetzen.

Danke etux,

das mit dem positionieren / zentrieren hat wunderbar geklappt.

Zu der Linie und dem Punkt:
habe ein bisschen rumgespielt, nur wenn ich das mit der border mache, dann wird diese ja erst beim hovern eingeblendet, weil die border ja zum sub1 gehört. ich hätte halt gerne die linie von anfang an sichtbar.

als grafik habe ich das problem, dass ich die zwischen die beiden sub1 und sub2 haben möchte, dann krieg ich schwierigkeiten, wenn ich mit der maus von sub1 über die grafik zu sub2 möchte.

Zitat:

Zitat von Pinocchio (Beitrag 541626)

... dann wird diese ja erst beim hovern eingeblendet, weil die border ja zum sub1 gehört. ich hätte halt gerne die linie von anfang an sichtbar.

Nav und die ul#nav sind immer sichtbar.

Zitat:

Zitat von Pinocchio (Beitrag 541626)

als grafik habe ich das problem, dass ich die zwischen die beiden sub1 und sub2 haben möchte, dann krieg ich schwierigkeiten, wenn ich mit der maus von sub1 über die grafik zu sub2 möchte.

Ich dachte eher an Hintergundgrafiken (CSS).

Habs mittlerweile auch mit ner Hintergrundgrafik gemacht und die Navi darüber gesetzt. Vielen Dank für deine Hilfe !

Dropdownmenü Feinheiten

Habe mittlerweile noch 2 kleinere Probleme, die ich alleine nicht lösen kann:

das Beispiel meiner Navigation ist auf Edit fiddle - JSFiddle

Das 1. Problem ist, dass ich das Untermenü beim Menüpunkt "Karriere" gerne zentriert hätte.

Das 2. Problem ist folgendes: wenn ich eines der Untermenüs hovere, dann bleibt das darüber liegende Menü auch markiert. Das ist auch gut so. Allerdings würde ich das gerne beim 1. Untermenü ändern.
Ich hätte also gerne, dass wenn ich das 2. Untermenü hovere, das 1. Untermenü einen anderen hover-status hat als das Hauptmenü.

Ich hoffe, ich konnte das verdeutlichen und bedanke mich schonmal für eure Hilfe.

Zu 1:
Der ul.sub1 könntest Du eine Breite geben (beispielsweise 100%) und ein „text-align: center;“.
Wenn Du jetzt die Listenelementen (li) mit „display: inline-block;“ (und „float: none“) formatierst, werden sie auf die Breite der ul.sub1 zentriert.
Ein exaktes Zentrieren (bezogen auf dem Menüpunkt Karriere) ist zwar auch möglich, aber deutlich komplizierter. So meintest Du es aber nicht, oder?
Sollen alle Sub-Ebenen zentrier werden, oder nur die unter Karriere?
Zu 2:
Mach es Dir einfacher – definiere alles nur über „li:hover“. Z.B. statt "a:hover" nimmst Du „li:hover a“.
Wenn Du für eine Ebene die hover-Ereignisse definierst, mach sie gleich für die nächsten Ebenen rückgängig.
Gehe dann so schrittweise (ebeneweise :D ) weiter.
Wenn Du fertig bist, kannst Du anschließend den Quellcode reduzieren - identische Regel können zusammengefasst werden.

Dropdownmenü Feinheiten

Danke für die schnelle Antwort.

Zu 1.
"Ein exaktes Zentrieren (bezogen auf dem Menüpunkt Karriere) ist zwar auch möglich, aber deutlich komplizierter. So meintest Du es aber nicht, oder?"

Genau so hätte ich es gemeint. Also beim ersten Reiter "Reisen" die 5 Elemente passen, die sollen quasi genauso breit sein wie das Hauptmenü.
Bei "Karriere" allerdings sollen die 3 Elemente mittigs unter "Karriere" sein.
Mit deinem Vorschlag von width:100%, text-align:center,display:inline-block und float:none funktionierts leider nicht.
Was ich außerdem komisch finde ist, dass ich die sub1 und sub2 als ID machen muss, als CLASS kann ich sie nicht ansteuern...

Zu 2.
nur die li:hover a anzusprechen funktioniert nicht. Dann bekommt das gesamte sub1 und sub2 die hover-farbe.
Hab jetzt den gewünschten effekt, indem ich "ul#sub1 li:hover > a" hinzugefügt habe.

Danke!

Zitat:

Zitat von Pinocchio (Beitrag 541917)

Bei "Karriere" allerdings sollen die 3 Elemente mittigs unter "Karriere" sein.
Mit deinem Vorschlag von width:100%, text-align:center,display:inline-block und float:none funktionierts leider nicht.

Das ist schon alles richtig so.
Dan machst du, was verkehrt.

Siehe hier ein Beispiel: Edit fiddle - JSFiddle

HTML-Code:

<!DOCTYPE html>

<html lang="de">

<head>

   <meta charset="utf-8">

   <title>Test </title>

  

<style type="text/css">

* { margin: 0; padding:0; }

html { font-size: 110%; }

body { font-family: Verdana, sans-serif; }



nav { 

   display: inline-block;

   position: relative;

}

nav ul {

   background: orange;

   padding: 0 0 4px 4px;

   text-align: center;

}

nav ul:after {

   display: block;

   clear: both;

   content: " ";

}

nav ul li {

   float: left;

   list-style: none;

   margin: 4px 4px 0 0;

   width: 125px;

}

nav ul li a {

   background: #fff;

   border: 1px solid #ccc;

   border-radius: 5px;

   color: #000;

   display: block;

   line-height: 25px;

   text-decoration: none;

}

nav ul li a:hover {  

   background: #6E6E6E;

   color: #fff;

}

/* ----- Sub ------ */

nav ul li ul {

   display: none;

   left: 0;

   position: absolute;

}

   nav ul li:hover ul.sub1,

   nav ul li ul.sub1 li:hover ul,

   nav ul li:hover ul.sub2 {

   display: block;

}

   nav ul li ul.sub1,

   nav ul li ul.sub1 li ul {

   width: 645px;

}

nav ul li ul.sub2 li {

   display: inline-block;

   float: none;

   margin: 4px 0 0 0;

}

nav ul li ul.sub2 {

   padding-left: 0;

   width: 100%; 

}

/* --------- Media Test anpassung --------- */



@media only screen and (max-width: 645px) {

nav ul li ul.sub1,

nav ul li ul.sub1 li ul {

   width: auto;

}

} 

@media only screen and (max-width: 515px) {

nav ul li ul.sub2 {

   padding: 0 0 4px 4px;

   width: auto;  

}

nav ul li ul.sub2 li {

   float: left;

   margin: 4px 4px 0 0;

}

}           

</style>



</head>

<body>



<nav>

  <ul>

    <li><a href="#">Reisen</a>

      <ul class="sub1">

        <li><a href="#">Europa</a></li>

        <li><a href="#">Amerika</a></li>

        <li><a href="#">Asien</a>

         <ul>

            <li><a href="#">Thailand</a></li>

            <li><a href="#">Bhutan</a></li>

            <li><a href="#">China</a></li>

            <li><a href="#">Vietnam</a></li>

            <li><a href="#">Japan</a></li>

         </ul>

         </li>

             <li><a href="#">Afrika</a></li>

             <li><a href="#">Australien</a></li>

          </ul>

        </li>

          <li><a href="#">Magazin</a></li>

          <li><a href="#">Karriere</a>

            <ul class="sub2">

              <li><a href="#">Thema 1</a></li>

              <li><a href="#">Thema 2</a></li>

              <li><a href="#">Thema 3</a></li>

           </ul>

        </li>

      <li><a href="#">Kontakt</a></li>

    </ul>

</nav>



</body>

</html>

_______________
MfG Roland

Mit „funktioniert nicht“ kann ich nicht viel anfangen.
Hier auf die Schnelle ein Test-Case. Die Breite Deines Konstrukts kenne ich nicht, daher die provisorische 90% von View-Port:

Pinocchio :: xhtmlforum.de

.