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, 3227 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
PHP
gelöst Javascript Menü wird nicht angezeigt (5)

Frage von takvorian zum Thema PHP ...

Datenbanken
Reguläre Ausdrücke in MSSQL dynamisch zusammensetzen (2)

Frage von Androxin zum Thema Datenbanken ...

Multimedia & Zubehör
Digicam Menü display geht Vorschau nicgt (3)

Frage von tsunami zum Thema Multimedia & Zubehör ...

Batch & Shell
gelöst Windows 10 1607 Firewall Context Menü (4)

Frage von Bugger zum Thema Batch & Shell ...

Neue Wissensbeiträge
Tipps & Tricks

Wie Hackt man sich am besten in ein Computernetzwerk ein

(29)

Erfahrungsbericht von Herbrich19 zum Thema Tipps & Tricks ...

Humor (lol)

Bester Vorschlag eines Supporttechnikers ever: APC

(15)

Erfahrungsbericht von DerWoWusste zum Thema Humor (lol) ...

Windows Server

Exchange 2010 Active Directory und Windows Server 2016

(4)

Erfahrungsbericht von Herbrich19 zum Thema Windows Server ...

Heiß diskutierte Inhalte
Internet
gelöst Mitarbeiter surft auf unerwünschter Seite - Wie damit umgehen? (52)

Frage von sabines zum Thema Internet ...

Netzwerke
LAN2LAN Verbindung sehr langsam flaschenhals gesucht (27)

Frage von PixL86 zum Thema Netzwerke ...

Router & Routing
PFsense - Netzverbindung steht, aber kein Internet vorhanden (25)

Frage von aschmid zum Thema Router & Routing ...

Windows Server
gelöst Windows 2016 Hyper-V und VHDS (19)

Frage von emeriks zum Thema Windows Server ...