|
|||
Dropdown Menü mit CSS3
Hallo Freunde,
Ich habe ein tollen Menücode im Internet gefunden und versuche verzweifelt daran umzubasteln wie ich ein Dropdown Menü da raus bekomme. Mit <ul><li> komme ich nicht weit. So siehts es aus A Pen by Mohit Manuja CSS Code:
body{margin: 150px;} .outer{ width: 150px; height: 50px; overflow-x:hidden; position: relative; float: left; margin-right: 10px; border-radius:50px; } .inner{ width: 300px; height: 50px; font:bold 16px/50px "arial"; position: absolute; right: 0; color:white; text-align: right; text-decoration: none; white-space: pre; transition: width .7s, color .7s;} .inner:before{ content:""; position: absolute; width: 139px; height: 39px; right: 5px; top: 5px; border-radius:50px; border:1px dashed #333; } .color1{background:linear-gradient(60deg, deepskyblue 150px,#333 180px, #333);} .color2{background:linear-gradient(60deg, papayawhip 150px,#333 180px, #333);} .color3{background:linear-gradient(60deg, orange 150px,#333 180px, #333);} .color4{background:linear-gradient(60deg, pink 150px,#333 180px, #333);} .inner:hover{ width: 150px; color: black;} HTML-Code:
<div class="outer"> <a href="#" class="inner color1">menu Item 1 </a> </div> <div class="outer"> <a href="#" class="inner color2">menu Item 2 </a> </div> <div class="outer"> <a href="#" class="inner color3">menu Item 3 </a> </div> <div class="outer"> <a href="#" class="inner color4">menu Item 4 </a> </div> |
Sponsored Links |
|
|||
Hi,
Ich weiß garnicht genau wo ich im Code was ändern muss um ein Dropdown Menü zu erstellen. Mein bestes Ergebnis ist das: CSS Code:
nav .outer{ width: 150px; height: 55px; margin: 0px; overflow-x:hidden; position: relative; float: left; margin-right: 10px; border-radius:50px; } .inner{ width: 300px; height: 55px; margin: 0px; font:bold 16px/50px "arial"; position: absolute; right: 0; color:white; text-align: right; text-decoration: none; white-space: pre; transition: width .7s, color .7s;} .inner2{ position: absolute; width: 300px; height: 55px; font:bold 16px/50px "arial"; margin: 00px; right: 0; color:white; text-align: right; text-decoration: none; white-space: pre; transition: width .7s, color .7s;float: none; display: block;} .inner ul ul li{ float: none; display: block;} .inner:before{ content:""; position: absolute; width: 178px; height: 45px; right: 5px; top: 5px; border-radius:50px; border:1px dashed #333; } .inner2:before{ content:""; position: absolute; width: 178px; height: 45px; right: 5px; top: 5px; border-radius:50px; border:1px dashed #333; } .color1{background:linear-gradient(60deg, deepskyblue 150px,#333 180px, #333);} .inner:hover{ width: 200px; color: black;} .inner2:hover{ width: 200px; color: black;} HTML-Code:
<nav> <ul> <ul class="outer"> <li><a href="#" class="inner color1">menu Item 1 </a></div> </li> <ul> <li><a href="#" class="inner2 color1">menu Item 1,1 </a> </li> </div> </ul> </nav> |
|
|||
Menü Item 1.1 soll das Dropdown sein, oder? Also die ul innerhalb der ul.
Am einfachsten wäre es für dich dir ein fertiges Script zu nehmen, das dir optisch gefällt und es noch bei Bedarf anzupassen. Ansonsten: Ich würde das Dropdown erstmal sichtbar lassen und anfangen das Dropdown zu stylen und zu positionieren (am besten mit position: absolute beim <ul> und mit position: relative beim umschließenden <li>). Wenn alles soweit passt, kannst du das Dropdown mit display: none; ausblenden. Das Prinzip ist dann, dass das man Dropdown beim hovern, also wenn man mit der Maus über den Menübutton fährt, per display: block; sichtbar macht. Also in etwa folgendes: Code:
ul ul { display: none; } ul li:hover ul { display: block; } |
|
|||
WOW genau den Denkanstoß hab ich gebraucht ich war so fixiert das ich outer und inter habe und hab versucht darum rum zubauen.
VIELEN DANK EUCH @etux ich habe display: block hier eingegeben li li a { text-decoration: none; color: white; } damit ich ein schönen button bekomme aber mir ist nicht klar wo (bzw. wie) ich ein Mouse over effekt bekomme. Also wo ich li:hover > background-color: black einfügen muss. |
|
||||
nav li li a:hover { background-color: black; }
oder nav li li:hover a { background-color: black; } Da ich noch paar Kleinigkeiten geändert habe, hier noch mal alles komplett: HTML-Code:
<!doctype html> <meta charset="utf-8"> <title>interessierte :: xhtmlforum.de</title> <style> * { margin: 0; padding: 0; } /* nur als Beispiel um das Menü mittig erscheinen zu lassen */ html { display: table; width: 100%; height: 100%; table-layout: fixed; } body { display: table-cell; vertical-align: middle; text-align: center; } /* Menu */ /* menu first level */ nav * { box-sizing: border-box; } nav { display: inline-block; text-align: left; } nav ul { list-style: none; } nav > ul { float: left; } nav > ul > li { position: relative; float: left; margin-right: 1em; border-radius: 3.2em; } nav > ul > li > a { display: block; width: 100%; padding: 0 2em; height: 3.2em; line-height: 3.2em; font-weight: 700; text-align: center; text-decoration: none; outline: none; color: white; background: linear-gradient(60deg, transparent 50%, #333 60%, #333); background-position: right center; background-size: 200% 100%; transition: background .7s ease-out; border-radius: 3.2em; } nav > ul > li > a:before { content: ''; position: absolute; left: 4%; top: 7%; width: 92%; height: 85%; border-radius: 3.6em; border: 1px dashed #333; } nav > ul > li:nth-child(1) { background: deepskyblue; } nav > ul > li:nth-child(2) { background: papayawhip; } nav > ul > li:nth-child(3) { background: orange; } nav > ul > li:nth-child(4) { background: pink; } nav > ul > li:hover > a, nav > ul > li > a:focus { color: black; background-position: left center; } /* menu second level */ nav li ul { position: absolute; top: 100%; left: 5%; width: 90%; max-height: 0; overflow: hidden; transition: max-height 1s ease-out; border-radius: 1em; background-color: rgba(0,0,0,.5); box-shadow: 0 .2em .4em rgba(0,0,0,.8); } nav li:hover ul, nav li a:focus + ul { max-height: 20em; } nav li li:first-child { margin-top: 1em; } nav li li:last-child { margin-bottom: 1em; } nav li li a { display: block; padding: .2em 1em; text-decoration: none; color: white; } nav li li a:hover { background-color: black; } </style> <nav> <ul> <li> <a href="#">menu Item 1</a> </li> <li> <a href="#">menu Item 2</a> <ul> <li> <a href="#">menu Item 2.1</a> </li> <li> <a href="#">menu Item 2.2</a> </li> </ul> </li> <li> <a href="#">menu Item 3</a> <ul> <li> <a href="#">menu Item 3.1</a> </li> <li> <a href="#">menu Item 3.2</a> </li> <li> <a href="#">menu Item 3.3</a> </li> <li> <a href="#">menu Item 3.4</a> </li> </ul> </li> <li> <a href="#">menu Item 4</a> </li> </ul> </nav> Geändert von etux (28.01.2017 um 10:38 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dropdown Menü selber Dropdownen | majutu | CSS | 7 | 16.10.2014 13:11 |
Dropdown Menü nicht gewollt Transparent | Kintrax | CSS | 2 | 13.10.2014 20:04 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
DropDown Menü verschwindet | andre-ne | CSS | 2 | 18.11.2009 10:44 |
dropdown menü einbauen | PatrickM | CSS | 6 | 07.01.2008 16:13 |