Vertikale Navigation mit untermenü zum einblendennen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
~~m******e~~

8:50, 25.8.2011
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
~~m**********n~~

19:38, 26.8.2011
Nein, ich kann dir nicht folgen. Vielleicht wäre es einfacher, wenn du uns ein Beispiel anhand deriner Website erklärst.

Mfg

mator

nie-genug-gewuerzt hat kostenlosen Webspace.

22:27, 26.8.2011

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

Autor dieses Themas
~~m******e~~

6:50, 30.8.2011
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

simuliertes

simuliertes hat kostenlosen Webspace.

12:21, 30.8.2011

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)

Autor dieses Themas
~~m******e~~

19:53, 30.8.2011
wunderbar ich danke dir simuliertes,

zu dem Menü ist noch zusagen, dass ich es mit contao erstellt habe. Mit anderen worten es ist nicht meine schuld. Ich hätte es auch anders gemacht, wenn ich es erstellt hätte...

Aber trotzdem danke!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city