Coder Board Community | Druckvorschau: Klappmenü Teil 2^^

Geschrieben von -TheKilla- am 11.07.2006 um 10:31:

Klappmenü Teil 2^^

Hi also da bin ich wieder, und zwar etwas gescheider...
ich habe mal so das forum durchstöbert und bin da so auf nen interessanten link gestoßen der mir weiterhilft...

Das ist mal hier der index.

HTML code

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:

< HTML>
	<head>
		<title>T-T-T-Test</title>
		<link rel="Stylesheet" type="text/ CSS" href="stylesheet. CSS">
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

	</head>
<body>
	<div id="logo">
dede
	</div>	

	<div id="header">
haha
	</div>
	<div id="navi">
bebe
	</div>
	<div id="main">
<div id="menu">
	<dl>
		<dt onmouseover="javascript:show();"><a href="" title="Startseite">Home</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:show('smenu1');">Menu 1</dt>
			<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
				<ul>
					<li><a href="#">sub-menu 1.1</a></li>
					<li><a href="#">sub-menu 1.2</a></li>
					<li><a href="#">sub-menu 1.3</a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:show('smenu2');">Menu 2</dt>
			<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
				<ul>
					<li><a href="#">sub-menu 2.1</a></li>
					<li><a href="#">sub-menu 2.2</a></li>
					<li><a href="#">sub-menu 2.3</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
				<ul>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.2</a></li>
					<li><a href="#">sub-menu 3.3</a></li>
				</ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
				<ul>
					<li><a href="#">sub-menu 4.1</a></li>
					<li><a href="#">sub-menu 4.2</a></li>
					<li><a href="#">sub-menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	</div>

</body>
</ HTML>

und das hier der

CSS code

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:

#header {
	top:20px;
	left:200px;
	width:600px;
	height:120px;
	position:absolute;
	background-color:yellow;
	}

#main {
	top:140px;
	left:200px;
	width:600px;
	height:400px;
	position:absolute;
	background-color:blue;
	color:black;
	text-decoration:none;
	}

#navi {
	top:140px;
	left:20px;
	width:180px;
	height:400px;
	position:absolute;
	background-color:green;
	}

#logo {
	top:20px;
	left:20px;
	width:180px;
	height:120px;
	position:absolute;
	background-color:red;
	}
body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
	}

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}

#menu {
	position: absolute; /* Menu position that can be changed at will */
	top: 0;
	left: 0;
	z-index:100;
	width: 100%; /* precision for Opera */
	}

#menu dl {
	float: left;
	width: 110px;
	}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border: 1px solid gray;
	margin: 1px;
	}

#menu dd {
	display: none;
	border: 1px solid gray;
	}

#menu li {
	text-align: center;
	background: #fff;
	}

#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #eee;
	}

#site {
	position: absolute;
	z-index: 1;
	top : 70px;
	left : 10px;
	color: #000;
	background-color: #ddd;
	padding: 5px;
	border: 1px solid gray; 
	}

Wie einige daraus sehen können, ist das mit boxen gemacht...
Jetzt meine frage..
Ich habe jetzt die menüpunkte mit dem lappmenü, die sind aber geschrieben, zb Menü1 und ich will statt dem ein bild einfügen aber das klappmenü soll sich trotzdem öffnen!

kann mit da einer helfen..
thx im voraus

Geschrieben von lichtonkel am 29.09.2006 um 12:08:

moin,

verstehe ich das richtig, dass du die testlinks im sub-menu durch bilder ersetzen willst?...

code:
1: 2: 3: 4: 5:	<blablacode> <a href="#">< IMG src="../der/pfad/zum/bild.jpg"/></a> </blablacode>

das ganze ließe sich auch aufwändig über js/DOM coden, führt aber ziemlich weit...

createElement(), setAttribute(), Image(), innerHTML

wären dafür die stichpunkte, mit dem, was du schon hast, sicherlich auch ned schlecht Augenzwinkern

der Gruß,
lichtonkel

Geschrieben von dermaik am 01.04.2007 um 11:58:

Ich habe mal eine Frage, habe mir mal den Code eingebaut .....
Nun zu meiner Frage :
Wie kann man es einstellen, dass die Navi nicht ganz oben Links, sondern auch woanders angezeigt werden kann ???

Gruß
Maik

Geschrieben von ruepel1969 am 20.11.2007 um 03:54:

RE: Klappmenü Teil 2^^

schau mal hier - da hab ich schon tip gegeben Augenzwinkern

[url=http://www.

Coder-

Board.de/tp13948_Dropp-Down-Menue.html]Dropp-Down Menue[/url]