zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Dropdown Menü mit CSS3

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.01.2017, 17:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2017
Beiträge: 4
interessierte befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.01.2017, 07:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Was funktioniert denn konkret nicht?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.01.2017, 17:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2017
Beiträge: 4
interessierte befindet sich auf einem aufstrebenden Ast
Standard

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:

Mit Zitat antworten
  #4 (permalink)  
Alt 27.01.2017, 11:29
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 629
etux wird schon bald berühmt werden
Standard

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>
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 27.01.2017, 11:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 479
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 27.01.2017, 21:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2017
Beiträge: 4
interessierte befindet sich auf einem aufstrebenden Ast
Standard

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

Zitat:
Zitat von interessierte Beitrag anzeigen
... 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>
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/

Geändert von etux (28.01.2017 um 10:38 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 28.01.2017, 14:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2017
Beiträge: 4
interessierte befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank, dass ist klasse. Ich hab jetzt einiges dazugelernt.
Schönes Wochenende
Mit Zitat antworten
  #9 (permalink)  
Alt 28.01.2017, 14:17
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 629
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von interessierte Beitrag anzeigen
Vielen Dank, dass ist klasse.
Bitte, gern.

Zitat:
Zitat von interessierte Beitrag anzeigen
Ich hab jetzt einiges dazugelernt.
Das freut mich sehr.

Zitat:
Zitat von interessierte Beitrag anzeigen
Schönes Wochenende
Danke, gleichfalls.
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.01.2017, 14:26
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 629
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von interessierte Beitrag anzeigen
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!
__________________
Grüße: Emil
--------------------------------------
http://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
Antwort

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


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