XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Dropdown Menü mit CSS3 (http://xhtmlforum.de/showthread.php?t=73127)

interessierte 25.01.2017 18:07

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>


cloned 26.01.2017 08:45

Was funktioniert denn konkret nicht?

interessierte 26.01.2017 18:33

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;}

und
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>

dann sieht es so aus: http://i68.tinypic.com/2nuc1d.jpg

:?

etux 27.01.2017 12:29

Mal so als Denkanstoß:
HTML-Code:

<!doctype html>
<meta charset="utf-8">
<title>interessierte :: xhtmlforum.de</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html { display: table; width: 100%; height: 100%; table-layout: fixed; }
body { display: table-cell; vertical-align: middle; text-align: center; }
/* menu first level */
nav { display: inline-block; text-align: left; }
nav ul { list-style: none; }
nav > ul { float: left; text-align: left; }
nav > ul > li {
        height: 3.2em;
        position: relative;
        float: left;
        margin-right: 1em;
        border-radius: 4em;
}
nav > ul > li > a {
        width: 100%;
        padding: 0 2em;
        height: 3.2em;
        line-height: 3.2em;
        display: block;
        font-weight: 700;
        color: white;
        text-align: center;
        text-decoration: none;
        outline: none;
        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;
        width: 92%;
        height: 85%;
        left: 4%;
        top: 7%;
        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 */
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);
}
li:hover ul,
li a:focus + ul { max-height: 20em; }
li li { padding: .2em 1em; }
li li:first-child { margin-top: 1em; }
li li:last-child { margin-bottom: 1em; }
li li a { text-decoration: none; color: white; }
</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>


dazzle89 27.01.2017 12:30

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;
}

Noch schöner (für Screenreader) wäre es, wenn du nicht mit display arbeitest sondern das Dropdown verschiebst bis es nicht mehr sichtbar ist. Zum Beispiel mit einer Angabe wie "left: -9999px" und beim hovern setzt du diesen Wert auf 0 oder ähnliches.

interessierte 27.01.2017 22:06

WOW genau den Denkanstoß hab ich gebraucht :lol: 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.

etux 28.01.2017 11:33

Zitat:

Zitat von interessierte (Beitrag 550382)
... 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>


interessierte 28.01.2017 15:03

Vielen Dank, dass ist klasse. Ich hab jetzt einiges dazugelernt. :D
Schönes Wochenende

etux 28.01.2017 15:17

Zitat:

Zitat von interessierte (Beitrag 550384)
Vielen Dank, dass ist klasse.

Bitte, gern. :)

Zitat:

Zitat von interessierte (Beitrag 550384)
Ich hab jetzt einiges dazugelernt. :D

Das freut mich sehr. :D

Zitat:

Zitat von interessierte (Beitrag 550384)
Schönes Wochenende

Danke, gleichfalls. :)

etux 28.01.2017 15:26

Zitat:

Zitat von interessierte (Beitrag 550384)
Ich hab jetzt einiges dazugelernt. :D

Und das obwohl ich keinerlei Erklärungen zum Code geschrieben habe.
Auch Keine über die Praxisuntauglichkeit der ursprüngliche CSS-Formatierungen.

Sehr gut! :D


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023