Frage Entwicklung HTML
gelöst Menü dynamisch? Fehlerkorrektur?

21.09.2007, aktualisiert 15:53 Uhr, 3322 Aufrufe, 1 Kommentar

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:

/* Navigation Links (TOP-Level)*/

a.navi {
 border:1px solid #666;
 border-left:0;
 width:400px;
 z-index:4;
}

a.navi:link, a.navi:visited {
 display:block;
 padding:3px;
 width:200px;
 height:77px;
 color:#CDCDCD;
}

 a.navi:active, a.navi:hover {
 text-decoration:none;
 color:#000000;
 background-color:#ffffff;
 width:200px;
}

/* Menü Links (SUB-Level)*/

a.menu:link, a.menu:visited {
 color:#340065;
 text-decoration:none;
 left:210px;

}

a.menu:active, a.menu:hover {
 background-color: #eeeeee;
 color:#737994;
 left:210px;

}

a.menu {

 padding:1px 1px 1px 15px;

 background-repeat:no-repeat;
 left:210px;
 z-index:1;
}

/*Aufklappbare Menüboxen, relative Positionierung,
 Sichtbarkeit: zuerst versteckt... */


#navi tr div {
 visibility:hidden;
 width:400px;

 background-color:#fff;
 border:1px solid #000;
 border-top-color:#000;
 z-index:5;
}

/* ...nur für gute Browser - Submenüs sichtbar machen per CSS: */
#navi tr:hover div {
 visibility:visible;
  left:200px;
 }
<code>
html:
<code>
<table class="navigation" id="navi" cellpadding="0" cellspacing="0" border="0" summary="Navigationsleiste">


 <tr >
 	<a class="navi" href="#" style="position:absolute; height:77px; top:100px; background-color:bdd2dc;">MENÜ 1</a>
	 <div>
	   <a class="menu" href="#">Hyperlink 1</a>
	   <a class="menu" href="#">Hyperlink 2</a>
	   <a class="menu" href="#">Hyperlink 3</a>
	   <a class="menu" href="#">Hyperlink 4</a>
	   <a class="menu" href="#">Hyperlink 5</a>
	</div>

 </tr>

 <tr>
 	<a class="navi" href="#" style="position:absolute;height:77px; top:180px; background-color:dcbdbd;">MENÜ 2</a>
	 <div>
	   <a class="menu" href="#">Hyperlink 1</a>
	   <a class="menu" href="#">Hyperlink 2</a>
	   <a class="menu" href="#">Hyperlink 3</a>
	   <a class="menu" href="#">Hyperlink 4</a>
	   <a class="menu" href="#">Hyperlink 5</a>
	</div>

 </tr>

 <tr>
        <a class="navi" href="#"  style="position:absolute;height:77px; top:260px; background-color:dcd9bd ;">MENÜ 3</a>
        <div>
	   <a class="menu" href="#">Hyperlink 1</a>
	   <a class="menu" href="#">Hyperlink 2</a>
	   <a class="menu" href="#">Hyperlink 3</a>
	   <a class="menu" href="#">Hyperlink 4</a>
	   <a class="menu" href="#">Hyperlink 5</a>
        </div>
 </tr>


 <tr>
        <a class="navi" href="#" style="position:absolute;   height:77px; top:340px; background-color:c4bddc ;">MENÜ 4</a>
	 <div>
	   <a class="menu" href="#">Hyperlink 1</a>
	   <a class="menu" href="#">Hyperlink 2</a>
	   <a class="menu" href="#">Hyperlink 3</a>
	   <a class="menu" href="#">Hyperlink 4</a>
	   <a class="menu" href="#">Hyperlink 5</a></div>
 </tr>

 <tr>
        <a class="navi" href="#" style="position:absolute; height:77px; top:420px; background-color:bddcc4 ;">MENÜ 5</a>
	 <div>
	   <a class="menu" href="#">Hyperlink 1</a>
	   <a class="menu" href="#">Hyperlink 2</a>
	   <a class="menu" href="#">Hyperlink 3</a>
	   <a class="menu" href="#">Hyperlink 4</a>
	   <a class="menu" href="#">Hyperlink 5</a></div>
 </tr>



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

gruß saibonaut

1 Antwort

LÖSUNG Dani schreibt am 21.09.2007 um 15:53:37 Uhr

Dani (Level 5) - Jetzt verbinden

LÖSUNG 21.09.2007 um 15:53 Uhr

Hallo saibonaut,
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

Frage Entwicklung HTML

Ähnliche Inhalte

Vom MD Array zum Menu

gelöst Frage von pcguyPHP7 Kommentare

Hallo zusammen, ich versuche aus einem MD Array ein Menu zu generieren. Dazu habe ich folgende Ausgabe: Ich kriege ...

RAM Speicher Dynamisch

gelöst Frage von zeroblue2005Vmware5 Kommentare

Hallo Zusammen, ich habe einen ESXI-5.1 am laufen mit 32 GB. Auf dem Hyper-Visor laufen derzeit 9 VM. Die ...

Zeilen dynamisch ausblenden

gelöst Frage von TollgemachtVB for Applications10 Kommentare

Hallo Admins! Ich habe hier eine Liste, und komme nicht weiter, vielleicht kann mir ja jemand von euch helfen? ...

Dialogfenster dynamisch erstellen

Frage von miichiii9JavaScript

Hallo Miteinander Ich versuche ein dynamisches Fenster zu erstellen. Das Fenster ist kein Problem das habe ich mithilfe von ...

Neue Wissensbeiträge

WatchChat für Whatsapp

Tipp von Criemo vor 1 TagiOS

Ziemlich coole App für WhatsApp User in Verbindung mit der Apple Watch. Gibts für iOS sowohl als auch für ...

IOS hat nen Cursor !!!

Tipp von Criemo vor 1 TagiOS5 Kommentare

Nette Funktion im iOS. iPhone-Mauszeiger aktivieren „Nichts ist nerviger, als bei einem Tippfehler zu versuchen, den iOS-Cursor an die ...

Avengers 4: Endgame - Erster Trailer

Information von Frank vor 3 TagenOff Topic2 Kommentare

Ich weiß es ist Off Topic, aber ich freue mich auf diesen Film und vielleicht geht es anderen hier ...

Microsoft bestätigt Edge mit Chromium-Kern

Information von Frank vor 3 TagenWebbrowser5 Kommentare

Microsoft hat nun in seinem Blog bestätigt, dass die nächste Edge Version kein EdgeHTML mehr für die Darstellung benutzen ...

Heiß diskutierte Inhalte

Exchange Server 2010: Keine Eingehenden E-MAils

gelöst Frage von gabeBUExchange Server17 Kommentare

Hallo Zusammen Ich habe das kurzen auf dem Exchange 2010 Server das Problem, dass ich keine externen E-Mails mehr ...

Kerio. Kann keine Mails empfangen aber senden. Wer ist schuld. Kerio oder Windows domäne?

gelöst Frage von frosch2Windows Netzwerk17 Kommentare

Hallo, es existiert ein Problem bei uns mit dem mailen. Alle bestehenden Nutzer können mailen. Raus wie rein. Neuen ...

VMware VM mit über 1TB RAM für S4HANA

Frage von Leo-leHosting & Housing15 Kommentare

Hallo zusammen, wer hat Erfahrng und kann mir einen Tipp zum sizing von S4HANA Systemen geben? Wir möchten, zunächst ...

Eingehängte Partition ändern

Frage von Florian961988Ubuntu14 Kommentare

Hallo wir nutzen hier GITLAB(liegt in einer VMWARE ESXI mit UBUNTU 18.04), dort hat man eine Partition für Root ...

Frage Entwicklung HTML gelöst Menü dynamisch? Fehlerkorrektur?

21.09.2007, aktualisiert 15:53 Uhr, 3322 Aufrufe, 1 Kommentar

Frage Entwicklung HTML
gelöst Menü dynamisch? Fehlerkorrektur?