You are not logged in.

Klappmenü Teil 2^^

wcf.regNote.message

-TheKilla-

Beginner

  • "-TheKilla-" started this thread

Posts: 9

  • Send private message

1

Tuesday, July 11th 2006, 10:31am

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

Source 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

Source 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

lichtonkel

Beginner

Posts: 39

Occupation: staat. gepr. Informatiker Multimedia/Studierender

  • Send private message

2

Friday, September 29th 2006, 12:08pm

moin,

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


Source code

 
1
2
3

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

der Gruß,
lichtonkel

dermaik

Beginner

Posts: 1

  • Send private message

3

Sunday, April 1st 2007, 11:58am

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

ruepel1969

Beginner

Posts: 5

Location: Berlin

Occupation: Dachdecker, Verkäufer, Computerservice (Selbständig)

  • Send private message

4

Tuesday, November 20th 2007, 3:54am

RE: Klappmenü Teil 2^^

schau mal hier - da hab ich schon tip gegeben ;)

Dropp-Down Menue

wcf.user.socialbookmarks.titel