kostenloser Webspace werbefrei: lima-city


Vertikale Navigation mit untermenü zum einblendennen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    m******e

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. m**********n

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

    Mfg

    mator
  4. nie-genug-gewuerzt

    nie-genug-gewuerzt hat kostenlosen Webspace.

    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
  5. Autor dieses Themas

    m******e

    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
  6. 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)

  7. Autor dieses Themas

    m******e

    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!
  8. 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

Login zum Webhosting ohne Werbung!