Dropdown Menü mit CSS3

interessierte · #1 (**permalink**) 25.01.2017, 17:07

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 · #2 (**permalink**) 26.01.2017, 07:45

Was funktioniert denn konkret nicht?

interessierte · #3 (**permalink**) 26.01.2017, 17: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:

etux · #4 (**permalink**) 27.01.2017, 11: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 · #5 (**permalink**) 27.01.2017, 11: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 · #6 (**permalink**) 27.01.2017, 21:06

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.

etux · #7 (**permalink**) 28.01.2017, 10:33

Zitat:

Zitat von interessierte

... 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 · #8 (**permalink**) 28.01.2017, 14:03

Vielen Dank, dass ist klasse. Ich hab jetzt einiges dazugelernt.

Schönes Wochenende

etux · #9 (**permalink**) 28.01.2017, 14:17

Zitat:

Zitat von interessierte

Vielen Dank, dass ist klasse.

Bitte, gern.

Zitat:

Zitat von interessierte

Ich hab jetzt einiges dazugelernt.

Das freut mich sehr.

Zitat:

Zitat von interessierte

Schönes Wochenende

Danke, gleichfalls.

etux · #10 (**permalink**) 28.01.2017, 14:26

Zitat:

Zitat von interessierte

Ich hab jetzt einiges dazugelernt.

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

Sehr gut!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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