Vertikale Navigation mit untermenü zum einblendennen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angesehen url
beispiel
browser
code
dank
erscheinen
folgen
glauben
hinweis
http
index
korrigieren
liste
page
unterseite
url
webseite
wort
zusage
zuviel
-
Hallo,
ich habe mir eine Webseite mit contao gebaut. Nun habe ich auch das Menü formatiert und das sieht so erst mal ganz gut aus. Nun möchte ich aber dass sich die Unterseite erst dann einblenden wen ich auf den darüber liegenden Link klicke. Ich habe mir auch schon dieses Menü von Self html angesehen:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Aber ich möchte es untereinander haben und die Unterseiten sollen erst erscheinen wenn man auf die darüber liegende Seite klickt. Die Untermenüs sollen dann immer zwischen den ganzen anderen Seiten erscheinen und unter dem Obermenüs. Ich hoffe ihr könnt mir folgen...
hier ist momentan mein stand:
http://mag-page.de/index.php/start.html
Grüße
mag -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nein, ich kann dir nicht folgen. Vielleicht wäre es einfacher, wenn du uns ein Beispiel anhand deriner Website erklärst.
Mfg
mator -
Hallo mag-page,
ich habe mir mal das Beispiel bei SelfHTML und deine Seite angeschaut, und denke, dass du das Gleiche nur senkrecht haben willst.
Wenn ich das Bei SelfHTML mal etwas umbaue kommt das raus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Geteilte Navigationsleisten</title> </head> <body> <div id="Rahmen"> <!-- <li id="Navigation"> //--> <li><a href="#Beispiel">Seite 2</a> <ul> <li><a href="#Beispiel">Seite 2a</a></li> <li><a href="#Beispiel">Seite 2b</a></li> </ul> </li><br><br> <li><a href="#Beispiel">Seite 1</a></li> <li><a id="aktuell" href="#Beispiel">Seite 4</a> <ul> <li><a href="#Beispiel">Seite 4a</a></li> <li><span>aktuelle Seite</span></li> <li><a href="#Beispiel">Seite 4c</a></li> </ul> </li> <!-- </li> //--> <div> <style type="text/css"> body { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: #ffffe0; } #Rahmen { width: 10.1em; height: 30.1em; padding: 0.8em; border: 1px solid black; background-color: silver; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 48.7em; w\idth: 47.1em; } /* #Navigation { margin: 0; padding: 0; text-align: center; } */ #Rahmen li { list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; margin: 0.4em; padding: 0; } * html li#Rahmen li { /* Korrektur fuer den IE 5 und 6 */ margin-bottom: -0.4em; } *:first-child+html li#Rahmen li { /* Korrektur fuer den IE 7 */ margin-bottom: -0.1em; } #Rahmen li ul { margin: 0; padding: 0; position: relative; top: 0.1em; left: +1.4em; display: none; /* Unternavigation ausblenden */ background-color: red; } * html li#Rahmen li ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html li#Rahmen ul { /* Workaround fuer den IE 7 */ background-color:silver; padding-bottom:0.4em; } #Rahmen li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } li#Rahmen li ul li { float: right; display: block; margin-bottom: 0.2em; } #Rahmen li a, #Rahmen span { display: block; width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */ padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid black; border-left-color: white; border-top-color: white; color: maroon; background-color: #ccc; } * html li#Rahmen a, * html li#Rahmen span { width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */ w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */ } #Rahmen a:hover, #Rahmen span, li a#aktuell { border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } li a#aktuell { /* aktuelle Rubrik kennzeichnen */ color: maroon; background-color: silver; } li#Rahmen li ul span { /* aktuelle Unterseite kennzeichnen */ background-color: maroon; } </style> </body> </HTML>
Ich habe es nicht durch sämtliche Browser durch getestet, aber bei mir kommt glaube ich das raus was du willst.
Hoffe ich konnte helfen -
Ja danke genau das ist es schon mal.
Geht das auch so dass die untermenüs erst kommen wen ich draufklicke und nicht drüber fahre?
mag-page -
mag-page schrieb:
Ja danke genau das ist es schon mal.
Geht das auch so dass die untermenüs erst kommen wen ich draufklicke und nicht drüber fahre?
mag-page
Mit javascript.
Wie immer der Hinweis das nihct jeder javascript aktiviert hat.
Deswegen habe ich meine Lösung so konzipiert das Browser ohne js das Menue beim hovern sehen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Geteilte Navigationsleisten</title> <style type="text/css"> body { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: #ffffe0; } #Rahmen { width: 10.1em; height: 30.1em; padding: 0.8em; border: 1px solid black; background-color: silver; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 48.7em; w\idth: 47.1em; } /* #Navigation { margin: 0; padding: 0; text-align: center; } */ #Rahmen li { list-style: none; float: left; /* ohne width - nach CSS 2.1 erlaubt */ position: relative; margin: 0.4em; padding: 0; } * html li#Rahmen li { /* Korrektur fuer den IE 5 und 6 */ margin-bottom: -0.4em; } *:first-child+html li#Rahmen li { /* Korrektur fuer den IE 7 */ margin-bottom: -0.1em; } #Rahmen li ul { margin: 0; padding: 0; position: relative; top: 0.1em; left: +1.4em; display: none; /* Unternavigation ausblenden */ background-color: red; } * html li#Rahmen li ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html li#Rahmen ul { /* Workaround fuer den IE 7 */ background-color:silver; padding-bottom:0.4em; } li#Rahmen li ul li { float: right; display: block; margin-bottom: 0.2em; } #Rahmen li a, #Rahmen span { display: block; width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */ padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid black; border-left-color: white; border-top-color: white; color: maroon; background-color: #ccc; } * html li#Rahmen a, * html li#Rahmen span { width: 8.6em; /* Breite nach altem MS-Boxmodell für IE 5.x */ w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkonformen Modus */ } li a#aktuell { /* aktuelle Rubrik kennzeichnen */ color: maroon; background-color: silver; } li#Rahmen li ul span { /* aktuelle Unterseite kennzeichnen */ background-color: maroon; } #Rahmen ul a:hover, #Rahmen span, li a#aktuell { border-color: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } .Menue ul li:hover ul { display: block; /* Unternavigation in modernen Browsern einblenden */ } </style> <script type="text/javascript"> //Für alle Browser die Js beherschen, Menue ul li:hover ul {display: block} deaktivieren //durch simples ändern des Klassen-Namens function initMenuClick() { var listID="Rahmen" var M_node=document.getElementById(listID); M_node.class="JsMenue"; //alle Kindknoten var M_node_Childs=M_node.getElementsByTagName('UL')[0].childNodes; for (var a=0;a<M_node_Childs.length;a++) { if (M_node_Childs[a].nodeName=='LI') { //alert(M_node_Childs[a].nodeName); M_node_Childs[a].firstChild.href="javascript:showChild("+a+",'"+listID+"'); void(false)"; //M_node_Childs[a].id='menueItem_'+a; //M_node_Childs[a].onclick= "showChild("+a+",'"+listID+"')"; } } } function showChild(listNumber,listID) { var M_node_Childs=document.getElementById(listID).getElementsByTagName('UL')[0].childNodes; M_node_Childs[listNumber].getElementsByTagName('UL')[0].style.display="block"; return false; } </script> </head> <body onload="initMenuClick()"> <div id="Rahmen" class="Menue"> <ul> <li><a href="#blup;" >Seite 2</a> <ul> <li><a href="#Beispiel">Seite 2a</a></li> <li><a href="#Beispiel">Seite 2b</a></li> </ul> </li> <li><a id="aktuell" href="#" >Seite 4</a> <ul> <li><a href="#Beispiel">Seite 4a</a></li> <li><span>aktuelle Seite</span></li> <li><a href="#Beispiel">Seite 4c</a></li> </ul> </li> </ul> <div> </body> </HTML>
@nie-genug-gewuerzt
Ich habe mir erlaubt den html-code ein bisschen zu "korrigieren" die Liste war so nicht richtig (umschliessende <ul> und listenelemente der untermenues waren falsch)
@mag-page
Optimal wäre wenn Du Dir die grundzüge von php anlernst und es ganz anders löst.
Siehe dazu hier:
http://www.lima-city.de/board/action:jump/942987
Aber vielleicht ist das für den Anfang etwas zuviel und Du so versuchst DIch erst einmal an css+html (und später javascript)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage