zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdownmenü zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.10.2014, 19:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2013
Beiträge: 7
Pinocchio befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.10.2014, 14:23
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Pinocchio Beitrag anzeigen
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 anzeigen
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 anzeigen
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.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.10.2014, 23:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2013
Beiträge: 7
Pinocchio befindet sich auf einem aufstrebenden Ast
Standard Linie und Punkt

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.10.2014, 10:28
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von Pinocchio Beitrag anzeigen
... 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 anzeigen
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).
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 20.10.2014, 18:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2013
Beiträge: 7
Pinocchio befindet sich auf einem aufstrebenden Ast
Standard Linie und Punkt

Habs mittlerweile auch mit ner Hintergrundgrafik gemacht und die Navi darüber gesetzt. Vielen Dank für deine Hilfe !
Mit Zitat antworten
  #6 (permalink)  
Alt 02.11.2014, 19:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2013
Beiträge: 7
Pinocchio befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.11.2014, 00:29
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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 ) weiter.
Wenn Du fertig bist, kannst Du anschließend den Quellcode reduzieren - identische Regel können zusammengefasst werden.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (03.11.2014 um 00:33 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 03.11.2014, 20:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2013
Beiträge: 7
Pinocchio befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
  #9 (permalink)  
Alt 03.11.2014, 20:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von Pinocchio Beitrag anzeigen
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 Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.11.2014, 20:53
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
dropdown, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
margin:0 auto; weiterer div-bereich zentrieren seeadler CSS 7 14.07.2008 21:00
Zentrieren bei position:fixed Alessia CSS 3 26.02.2008 14:33
dropdownmenü mittels css erstellt - wie zentrieren? sonnenkind CSS 8 31.03.2007 13:38
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE AndreasB CSS 11 13.03.2006 17:05
Container horiz. + vert. zentrieren, 2 eingeschlossene ab... Jessix CSS 4 10.07.2004 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:46 Uhr.