gelöst Menü dynamisch? Fehlerkorrektur?
Hallo ich habe folgendes Problem: ich möchte eine Menüvorlage die ich über google (http://webdaum.de/html/portfolio/musterseiten/dynamisch/dyn_navi.htm) gefunden haben etwas verändern.
das menü soll senkrecht aufgebaut sein und die untermenüs seitlich/rechts davon ausklappen. ich habe nun folgende veränderungen vorgenommen. das hauptmenü ist soweit in ordnung. nur leider bekomme ich das untermenü nicht weiter nach rechts.
außerdem schein das untermenü auch auszuklappen wenn nicht auf das hauptmenü sonder an die stelle des untermenüs klickt. das war aber auch in der volage so.
css:
gruß saibonaut
das menü soll senkrecht aufgebaut sein und die untermenüs seitlich/rechts davon ausklappen. ich habe nun folgende veränderungen vorgenommen. das hauptmenü ist soweit in ordnung. nur leider bekomme ich das untermenü nicht weiter nach rechts.
außerdem schein das untermenü auch auszuklappen wenn nicht auf das hauptmenü sonder an die stelle des untermenüs klickt. das war aber auch in der volage so.
css:
01.
02.
/* Navigation Links (TOP-Level)*/
03.
04.
a.navi {
05.
border:1px solid #666;
06.
border-left:0;
07.
width:400px;
08.
z-index:4;
09.
}
10.
11.
a.navi:link, a.navi:visited {
12.
display:block;
13.
padding:3px;
14.
width:200px;
15.
height:77px;
16.
color:#CDCDCD;
17.
}
18.
19.
a.navi:active, a.navi:hover {
20.
text-decoration:none;
21.
color:#000000;
22.
background-color:#ffffff;
23.
width:200px;
24.
}
25.
26.
/* Menü Links (SUB-Level)*/
27.
28.
a.menu:link, a.menu:visited {
29.
color:#340065;
30.
text-decoration:none;
31.
left:210px;
32.
33.
}
34.
35.
a.menu:active, a.menu:hover {
36.
background-color: #eeeeee;
37.
color:#737994;
38.
left:210px;
39.
40.
}
41.
42.
a.menu {
43.
44.
padding:1px 1px 1px 15px;
45.
46.
background-repeat:no-repeat;
47.
left:210px;
48.
z-index:1;
49.
}
50.
51.
/*Aufklappbare Menüboxen, relative Positionierung,
52.
Sichtbarkeit: zuerst versteckt... */
53.
54.
55.
#navi tr div {
56.
visibility:hidden;
57.
width:400px;
58.
59.
background-color:#fff;
60.
border:1px solid #000;
61.
border-top-color:#000;
62.
z-index:5;
63.
}
64.
65.
/* ...nur für gute Browser - Submenüs sichtbar machen per CSS: */
66.
#navi tr:hover div {
67.
visibility:visible;
68.
left:200px;
69.
}
70.
<code>
71.
html:
72.
<code>
73.
<table class="navigation" id="navi" cellpadding="0" cellspacing="0" border="0" summary="Navigationsleiste">
74.
75.
76.
<tr >
77.
<a class="navi" href="#" style="position:absolute; height:77px; top:100px; background-color:bdd2dc;">MENÜ 1</a>
78.
<div>
79.
<a class="menu" href="#">Hyperlink 1</a>
80.
<a class="menu" href="#">Hyperlink 2</a>
81.
<a class="menu" href="#">Hyperlink 3</a>
82.
<a class="menu" href="#">Hyperlink 4</a>
83.
<a class="menu" href="#">Hyperlink 5</a>
84.
</div>
85.
86.
</tr>
87.
88.
<tr>
89.
<a class="navi" href="#" style="position:absolute;height:77px; top:180px; background-color:dcbdbd;">MENÜ 2</a>
90.
<div>
91.
<a class="menu" href="#">Hyperlink 1</a>
92.
<a class="menu" href="#">Hyperlink 2</a>
93.
<a class="menu" href="#">Hyperlink 3</a>
94.
<a class="menu" href="#">Hyperlink 4</a>
95.
<a class="menu" href="#">Hyperlink 5</a>
96.
</div>
97.
98.
</tr>
99.
100.
<tr>
101.
<a class="navi" href="#" style="position:absolute;height:77px; top:260px; background-color:dcd9bd ;">MENÜ 3</a>
102.
<div>
103.
<a class="menu" href="#">Hyperlink 1</a>
104.
<a class="menu" href="#">Hyperlink 2</a>
105.
<a class="menu" href="#">Hyperlink 3</a>
106.
<a class="menu" href="#">Hyperlink 4</a>
107.
<a class="menu" href="#">Hyperlink 5</a>
108.
</div>
109.
</tr>
110.
111.
112.
<tr>
113.
<a class="navi" href="#" style="position:absolute; height:77px; top:340px; background-color:c4bddc ;">MENÜ 4</a>
114.
<div>
115.
<a class="menu" href="#">Hyperlink 1</a>
116.
<a class="menu" href="#">Hyperlink 2</a>
117.
<a class="menu" href="#">Hyperlink 3</a>
118.
<a class="menu" href="#">Hyperlink 4</a>
119.
<a class="menu" href="#">Hyperlink 5</a></div>
120.
</tr>
121.
122.
<tr>
123.
<a class="navi" href="#" style="position:absolute; height:77px; top:420px; background-color:bddcc4 ;">MENÜ 5</a>
124.
<div>
125.
<a class="menu" href="#">Hyperlink 1</a>
126.
<a class="menu" href="#">Hyperlink 2</a>
127.
<a class="menu" href="#">Hyperlink 3</a>
128.
<a class="menu" href="#">Hyperlink 4</a>
129.
<a class="menu" href="#">Hyperlink 5</a></div>
130.
</tr>
131.
132.
133.
134.
</table>1 Antwort
- LÖSUNG Dani schreibt am 21.09.2007 um 15:53:37 Uhr
LÖSUNG 21.09.2007 um 15:53 Uhr
Hallo saibonaut,
2 Bitten an dich:
Grüße
Dani
2 Bitten an dich:
- Bitte oben den Quellcode so anpassen, dass er einfach per copy & paste übernommen werden kann
- Also im meinem IE 7.0 wird gar nichts angezeigt und im FF sieht es ganz komisch aus.
Grüße
Dani
Ähnliche Inhalte
Neue Wissensbeiträge
Heiß diskutierte Inhalte
