Wie würde ich ein Dropdown-Menü nach links oder rechts eines vertikalen CSS-Menüs positionieren?

Ich habe ein grundlegendes CSS-Menü geschrieben - eine vertikale Navigationsleiste, die entworfen wurde, um zur Seite gelegt zu werden. Zusätzlich zu dem aktuellen Design wäre es mir aber auch möglich, das Drop-Down-Element von Element 2.0 entweder links oder rechts neben dem Elternelement platzieren zu können.Wie würde ich ein Dropdown-Menü nach links oder rechts eines vertikalen CSS-Menüs positionieren?

Was wäre der beste Weg, dies zu erreichen?

Ich schließe auch einen JSFiddle Link des aktuellen Code: https://jsfiddle.net/eagqxnaz/1/

<ul class="navbar"> 
    <li><a href="#">1.0</a></li> 
    <li><a href="#">2.0</a> 
    <ul> 
     <li><a href="/?">2.1</a></li> 
     <li><a href="/?">2.2</a></li> 
     <li><a href="/?">2.3</a></li> 
     <li><a href="/?">2.4</a></li> 
    </ul>   
    </li> 
</ul> 

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
} 

.navbar a {       
    color: #FFF; 
    display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

.navbar li ul { 
    display: none; 
}    

.navbar li:hover ul  { 
    position: absolute; 
    display: block; 
    left: 0; 
}

Quelle

2017-03-08 Merlin

[Fiddle] (https://jsfiddle.net/eagqxnaz/2/) –

Danke - ich konnte nicht ganz bekommen, dass richtig funktioniert. Bitte eine Antwort mit einer Erklärung für andere geben? – Merlin

Gern geschehen, Ihr Problem ist gelöst, das ist genug. Eine Sache, die ich erwähnen möchte, ist jedoch, dass Sie keine Stile auf "Hover" anwenden sollten. Fügen Sie sie zu den normalen Styles hinzu und bei Hover sollte nur 'display: none/block' angezeigt werden, es sei denn, einige Style-Änderungen sind beim Hover erforderlich. –

Versuchen mit oben und links auf die ".navbar li: hover ul", wird es die Werte etwas wie angezeigt unten Screenshot

Code:

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
    position: relative; 
} 

.navbar a {       
     color: #FFF; 
     display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

.navbar li ul { 
    position: absolute; 
    display: none; 
    left: 100%; 
    padding: 0; 
    top: 0; 
}    

.navbar li:hover > ul { 
    display: block; 
}

Hoffe es hilft.

Quelle

2017-03-08 11:37:13 ChiranjeeviIT

Wenn es funktioniert, bedeutet das nicht, dass es eine Lösung ist. Sie haben "linke" und "obere" Positionen, die falsch sind. Bei dieser Lösung ist die Platzierung der Dropdown-Liste falsch, sobald Sie die Fenstergröße ändern. –

@MuhammadUsman Ja, Sie sind richtig, aber es ist nur ein Beispielcode, damit es funktioniert. Wir müssen dynamische Logik erstellen, um links und oben in unserem Skript basierend auf Menüeinträgen und deren Tiefe zu setzen. Dies kann auf seiner Skriptsprache basieren. – ChiranjeeviIT

Wir brauchen hier überhaupt kein Scripting. Prüfe das [Fiddle] (https://jsfiddle.net/eagqxnaz/3/) –

I think this would be a better solution: 

Just update your css as given below : 

.navbar { 
    margin: 0; 
    padding: 0; 
} 

.navbar li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    background-color: #a1a0a5; 
    position: relative; 
} 

.navbar a { 
    color: #FFF; 
    display: block; 
    padding: 8px 4px; 
} 

.navbar a:hover { 
    background-color: #5a5775; 
} 

ul.navbar li ul { 
    margin: 0; 
    padding: 0; 
    top: 0; 
    left: 100%; 
    position: absolute; 
    display:none; 
} 

.navbar li:hover ul { 
    display:block; 
} 

Hope this is helpful.

Quelle

2017-03-08 13:03:26 Ram

Wie würde ich ein Dropdown-Menü nach links oder rechts eines vertikalen CSS-Menüs positionieren?

Antwort

Verwandte Themen