Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

automatix · 25-11-2010, 20:26

Hallo zusammen!

Ich poste hier ein einfaches mit reinem CSS erstelltes DropDown-Menü.

Hier zunäcchst einmal die von (fast) allem Überflüssigen bereinigte Struktur -- zum Verstehen und Weiterentwickeln:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
		div#navi {
			background: #ececec;
			position: absolute;
		}
		div.navi-block {
			display: block;
			position: absolute;
			top: 100px;
			width: 100px;
			height: 48px;
			float: left;
			border: 0px solid #000;
			line-height: 48px;
			text-align: center;
			text-decoration: none;
			color: #fff;
		}
		div.navi-block#navi-block-1 {
			background: #444;
			left: 300px;
		}
		div.navi-block#navi-block-2 {
			background: #777;
			left: 400px;
		}
		div.navi-block#navi-block-3 {
			background: #aaa;
			left: 500px;
		}
		
		div.navi-block div.navi-block-head {
		}
		div.navi-block div.navi-block-head:hover {
			background: #ffd610;
		}
		div.navi-block div.navi-block-body {
			display: none;
		}
		
		div.navi-block:hover div.navi-block-body {
			background: #cc0000;
			border: 0px solid #000;
			position: relative;
			top: 0;
			width: 300px;
			min-height: 50px;
			display: block;
		}
		div.navi-block:hover#navi-block-1 div.navi-block-body {
			left: 0;
		}
		div.navi-block:hover#navi-block-2 div.navi-block-body {
			left: -100px;
		}
		div.navi-block:hover#navi-block-3 div.navi-block-body {
			left: -200px;
		}
	</style>
</head>
<body>
	<div id="navi">
		<div class="navi-block" id="navi-block-1">
			<div class="navi-block-head">
				A
			</div>
			<div class="navi-block-body">
				<span>a a a a a a a a a a<span>
			</div>
		</div>
		<div class="navi-block" id="navi-block-2">
			<div class="navi-block-head">
				B
			</div>
			<div class="navi-block-body">
				<span>b b b b b b b b b b<span>
			</div>
		</div>
		<div class="navi-block" id="navi-block-3">
			<div class="navi-block-head">
				C
			</div>
			<div class="navi-block-body">
				<span>c c c c c c c c c c<span>
			</div>
		</div>
	</div>
</body>
</html>

Und so könnte ein fertiges Menü aussehen:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
		div#navi {
			background: #ececec;
			position: absolute;
		}
		div.navi-block {
			display: block;
			position: absolute;
			top: 100px;
			width: 100px;
			height: 48px;
			float: left;
			border: 0px solid #000;
			line-height: 48px;
			text-align: center;
			text-decoration: none;
			color: #fff;
		}
		div.navi-block#navi-block-1 {
			background: #444;
			left: 300px;
		}
		div.navi-block#navi-block-2 {
			background: #777;
			left: 400px;
		}
		div.navi-block#navi-block-3 {
			background: #aaa;
			left: 500px;
		}
		
		div.navi-block div.navi-block-head {
		}
		div.navi-block div.navi-block-head:hover {
			background: #ffd610;
		}
		div.navi-block div.navi-block-body {
			display: none;
		}
		
		div.navi-block:hover div.navi-block-body {
			background: #cc0000;
			border: 0px solid #000;
			position: relative;
			top: 0;
			width: 300px;
			min-height: 50px;
			display: block;
		}
		div.navi-block:hover#navi-block-1 div.navi-block-body {
			left: 0;
		}
		div.navi-block:hover#navi-block-2 div.navi-block-body {
			left: -100px;
		}
		div.navi-block:hover#navi-block-3 div.navi-block-body {
			left: -200px;
		}
		
		ul {
			margin: 0;
			padding: 0;
			float: left;
			width: 25%;
		}
		li {
			margin: 0;
			padding: 0;
		}
		li:hover {
			background: #ffd610;
		}
		
		.clearer {
			clear: both;
		}
	</style>
</head>
<body>
	<div id="navi">
		<div class="navi-block" id="navi-block-1">
			<div class="navi-block-head">
				A
			</div>
			<div class="navi-block-body">
				<ul><li>a-1-1</li><li>a-1-2</li><li>a-1-3</li></ul>
				<ul><li>a-2-1</li><li>a-2-2</li><li>a-2-3</li></ul>
				<ul><li>a-3-1</li><li>a-3-2</li><li>a-3-3</li></ul>
				<ul><li>a-4-1</li><li>a-4-2</li><li>a-4-3</li></ul>
				<div class="clearer"></div>
			</div>
		</div>
		<div class="navi-block" id="navi-block-2">
			<div class="navi-block-head">
				B
			</div>
			<div class="navi-block-body">
				<ul><li>b-1-1</li><li>b-1-2</li><li>b-1-3</li></ul>
				<ul><li>b-2-1</li><li>b-2-2</li><li>b-2-3</li></ul>
				<ul><li>b-3-1</li><li>b-3-2</li><li>b-3-3</li></ul>
				<ul><li>b-4-1</li><li>b-4-2</li><li>b-4-3</li></ul>
				<div class="clearer"></div>
			</div>
		</div>
		<div class="navi-block" id="navi-block-3">
			<div class="navi-block-head">
				C
			</div>
			<div class="navi-block-body">
				<ul><li>c-1-1</li><li>c-1-2</li><li>c-2-3</li></ul>
				<ul><li>c-2-1</li><li>c-2-2</li><li>c-2-3</li></ul>
				<ul><li>c-3-1</li><li>c-3-2</li><li>c-3-3</li></ul>
				<ul><li>c-4-1</li><li>c-4-2</li><li>c-4-3</li></ul>
				<div class="clearer"></div>
			</div>
		</div>
	</div>
</body>
</html>

Getestet in:
- Firefox 3.6.12
- Crome 7.0.517.44
- IE 8.0.7600.16385

Im Anhang nochmal beide Varianten.

Viel Spaß!

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ü	toohardforme	Flash 8	2	12-09-2006 10:42
dropdown menü	hk2005	Flash MX	2	20-12-2005 20:34
Dropdown Menü	Steelman	Flash MX 2004	1	03-12-2005 16:19
dropdown menü	Don$tendle	Flash MX	3	07-06-2004 14:49
dropdown-menü	lonestar_zack	Flash MX	5	22-10-2003 11:19