simon: Menüleiste mit Ausklappmenü

SELF-Forum

Menüleiste mit Ausklappmenü

simon
– Informationen zu den Bewertungsregeln

Hallo Leute,

ich habe mich schon ein wenig länger mit Websites befasst (Grundkenntnisse in HTML, CSS, PHP vorhanden) und wollte mich nun an etwas schwierigere Layouts wagen, die optisch mehr hergeben.

Ich hätte mir ein Topmenü vorgestellt wie bei
http://www.apple.com

allerdings noch mit nach unten ausklappbaren Untermenüs, dafür aber ohne Suchfunktion, versehen.

Wenn es dann alles funktioniert, würde ich es gerne auf ein Joomla template anwenden und flexibel sein mit der Anzahl der Menüpunkte(wenn das möglich ist, sollten sie trotzdem gleichmäßig auf die ganze Breite verteilt sein)

Ich erwarte mir nicht (und möchte auch nicht) dass mir hier jemand Code schreibt, allerdings wäre es schön wenn ihr mir ein paar Tipps geben könntet, wie ich das ganze angehen soll(mit Bildern, oder div-Containern usw.)

Vielen Dank im Voraus und lg

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Menüleiste mit Ausklappmenü

    Performer
    – Informationen zu den Bewertungsregeln

    Hi,

    Wenn es dann alles funktioniert, würde ich es gerne auf ein Joomla template anwenden

    ich gehe ja eher den umgekehrten Weg: das CMS eine Navigation ausspucken lassen und diese dann formatieren.

    Ich erwarte mir nicht (und möchte auch nicht) dass mir hier jemand Code schreibt, allerdings wäre es schön wenn ihr mir ein paar Tipps geben könntet …

    Auf dieser Seite findest du die technischen Grundlagen, wie man eine solche Navigation aufbaut und hier ein/dein „Meisterstück“. ;-)

    Ciao, Performer

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Menüleiste mit Ausklappmenü

    alex
    – Informationen zu den Bewertungsregeln

    hallo ich persönlich hab schon ein paar mal so en ausklapbares menü geschrieben. Dazu hab ich immer javascript verwendet. Bei javascript musst du einfach ein programm schreibe das bei onmouseover die untermeü anzeigt
    :D

    hier ein bsp fürn pulldownmenue mt jAVASCRIPT:

    <!DOCTYPE>
    <html>
    <head>
    <script language="Javascript" type="text/javascript">
     <!--
     z=0;

    function zeigemenus1() {z++;
     document.getElementById("spalte2").style.visibility = "hidden";
     document.getElementById("spalte1").style.visibility = "visible";
      document.getElementById("spalte3").style.visibility = "hidden";
     document.getElementById("spalte4").style.visibility = "hidden";
     }

    function zeigemenus2() {z++;
     document.getElementById("spalte1").style.visibility = "hidden";
     document.getElementById("spalte2").style.visibility = "visible";
      document.getElementById("spalte3").style.visibility = "hidden";
     document.getElementById("spalte4").style.visibility = "hidden";
     }

    function zeigemenus3() {z++;
     document.getElementById("spalte1").style.visibility = "hidden";
     document.getElementById("spalte3").style.visibility = "visible";
      document.getElementById("spalte2").style.visibility = "hidden";
     document.getElementById("spalte4").style.visibility = "hidden";
     }

    function zeigemenus4() {z++;
     document.getElementById("spalte1").style.visibility = "hidden";
     document.getElementById("spalte4").style.visibility = "visible";
      document.getElementById("spalte3").style.visibility = "hidden";
     document.getElementById("spalte2").style.visibility = "hidden";
     }

    function loeschen() {
     document.getElementById("spalte1").style.visibility = "hidden";
     document.getElementById("spalte2").style.visibility = "hidden";
     }

    function z1(){z--;}
     function z4(){z++;}

    function test() {
     if (z==0)
     {
     document.getElementById("spalte1").style.visibility = "hidden";
     document.getElementById("spalte2").style.visibility = "hidden";
     document.getElementById("spalte3").style.visibility = "hidden";
     document.getElementById("spalte4").style.visibility = "hidden";
     }
     setTimeout("test()", 100);
     }
     window.setTimeout('test()',100);

    //-->
    </script>
    <style type="text/css">
     <!--
     #menubar {position:absolute;top:40px;left:20;z-index:2;    background:black;                     }
      td:hover {   background:#585858;                     }
      table {font-style:Impact;}
     #spalte1 {position:absolute;top:72px;left:20;z-index:2;    background:black;                                 }
     #spalte2 {position:absolute;top:72px;left:182;z-index:2;   background:black;                                 }
     #spalte3 {position:absolute;top:72px;left:344;z-index:2;   background:black;                                 }
     #spalte4 {position:absolute;top:72px;left:506;z-index:2;   background:black;                                 }
    a:link { text-decoration:none; color:#33FF33; }
    a:visited {text-decoration:none; color:#33FF33;  }
    a:hover { text-decoration:underline; letter-spacing:0.4; font-weight:bold;     }
    a:active { text-decoration:underline; }
    a:focus { text-decoration:none; color:#33FF33; }

    //-->
     </style>

    </head>
    <body onload="test()" >

    <div id="menubar" width="100%">
     <table border="0" cellspacing="0"><tr> <td OnMouseOver="zeigemenus1()" onmouseout="z1()" > <tr>
     <td OnMouseOver="zeigemenus1()"  onmouseout="z1()" width="160" height="30">
    <center> <a href="#" >text</a> </center>
     </td><td OnMouseOver="zeigemenus2()"  onmouseout="z1()" width="160" height="30">
     <center> <a href="#" >text</a> </center>
     </td>
      </td><td OnMouseOver="zeigemenus3()"  onmouseout="z1()" width="160" height="30">
     <center> <a href="#" >text</a> </center>
     </td>
      </td><td OnMouseOver="zeigemenus4()"  onmouseout="z1()" width="160" height="30" class="test">
     <center> <a href="#" >text</a> </center>
     </td>
     </tr></table>
     </div>

    <div id="spalte1" style="visibility:hidden" >
     <table border="0" cellspacing="0" onmouseout="z1()" onmouseover="z4()" ><tr><td height="30" width="162">
     <center><a href="#" target="_blank"  >text</a></center>
     </td></tr></table>
     </div>

    <div id="spalte2" style="visibility:hidden" >
     <table border="0" cellspacing="0" onmouseout="z1()" onmouseover="z4()" ><tr><td height="30" width="162">
     <center><a href="#" target="_blank" onmouseout="z1()" onmouseover="z4()">text</a> </center> </td></tr>
     <tr><td height="30" width="162"><center><a href="#" target="_blank" onmouseout="z1()" onmouseover="z4()">text</a> </center> </td></tr>
      <tr><td height="30" width="162"><center><a href="#" target="_blank" onmouseout="z1()" onmouseover="z4()">text</a> </center> </td></tr>
       <tr><td height="30" width="162"><center><a href="#" target="_blank" onmouseout="z1()" onmouseover="z4()">text</a> </center> </td></tr>
     </table>
     </div>

    <div id="spalte3" style="visibility:hidden" >
     <table border="0" cellspacing="0" onmouseout="z1()" onmouseover="z4()" ><tr><td height="30" width="162">
     <center><a href="#" target="_blank" onmouseout="z1()" onmouseover="z4()">text</a></center>
     </td></tr></table>
     </div>

    <div id="spalte4" style="visibility:hidden" >
     <table border="0" cellspacing="0" onmouseout="z1()" onmouseover="z4()" ><tr><td height="30" width="162">
     <center><a href="#" target="_blank" onmouseout="z1()" onmouseover="z4()">text</a></center>
     </td></tr></table>
     </div>

    </body>
    </html>

    ENDE :D hoffe ich hab dir gehollfen lg alex

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln