Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Menü dynamisch? Fehlerkorrektur?

Frage Entwicklung HTML

Mitglied: 53111

53111 (Level 1)

21.09.2007, aktualisiert 15:53 Uhr, 3235 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:
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
Mitglied: Dani
21.09.2007 um 15:53 Uhr
Hallo saibonaut,
2 Bitten an dich:
  1. Bitte oben den Quellcode so anpassen, dass er einfach per copy & paste übernommen werden kann
  2. Also im meinem IE 7.0 wird gar nichts angezeigt und im FF sieht es ganz komisch aus.


Grüße
Dani
Bitte warten ..
Ähnliche Inhalte
Visual Studio
gelöst Simples asp.net menu selbst erstellen (22)

Frage von Herbrich19 zum Thema Visual Studio ...

Exchange Server
gelöst Dynamische Verteilergruppe (9)

Frage von justdan zum Thema Exchange Server ...

Server
Webhosting mit NAS und dynamischer IP (2)

Frage von gugusus zum Thema Server ...

Exchange Server
gelöst Dynamische Verteilerliste nach Domain filtern (2)

Frage von blackhawk17 zum Thema Exchange Server ...

Neue Wissensbeiträge
Windows Update

Microsoft Update KB4034664 verursacht Probleme mit Multimonitor-Systemen

(2)

Tipp von beidermachtvongreyscull zum Thema Windows Update ...

Viren und Trojaner

CNC-Fräsen von MECANUMERIC werden (ggf.) mit Viren, Trojanern, Würmern ausgeliefert

(4)

Erfahrungsbericht von anteNope zum Thema Viren und Trojaner ...

Windows 10

Windows 10: Erste Anmeldung Animation deaktivieren

(3)

Anleitung von alemanne21 zum Thema Windows 10 ...

Heiß diskutierte Inhalte
Netzwerkprotokolle
gelöst Leiten "dumme" Switches VLAN-Tags mit durch? (26)

Frage von coltseavers zum Thema Netzwerkprotokolle ...

Netzwerkgrundlagen
Kann auf Freigabe nicht Zugreifen (16)

Frage von leon123 zum Thema Netzwerkgrundlagen ...

Windows Server
gelöst Neues KB für W10 1607 und W2K16 wieder mal nicht im WSUS 3.0, hat das noch jemand? (16)

Frage von departure69 zum Thema Windows Server ...

Router & Routing
FTTH bzw FTTB Router (13)

Frage von ukulele-7 zum Thema Router & Routing ...