<klick>Nachrichten zu JavaScript und Programmierung</danke>
jswelt.de |  forum |  pixelboutique |  User Online (max. 20)  
javascript archiv jswelt javascript archiv jswelt  
 
 LogIn // Neu
 
     

menu
 Home
 JavaScripts
 Photoshop
 Internetrecht
 Gästebuch
 Kontakt
 Service
 Flashgames
 Hompage-Shop
 Statistiken
 IRC-Channel
 hier werben
 Literatur
 Mediadaten
 Impressum
interessantes
suche


Suchen
forum

Zum Forum

statistiken
481JavaScripts in
23Kategorien
36PS-Tuts
45187reg. User
68672  Mails versendet
Statistiken
7409Tage online

javascripts

Sie sind hier: jswelt.de // JavaScripts // Navigationen // Layermenu
Layermenu  (Quelltext anzeigen)
Browser  
ScriptDemo ScriptDemo in neuem Fenster anzeigen

Dieses Menü läuft mit Netscape (NS4 & NS6), IE und Opera. 
Letzte Bearbeitung am 16. Apr 2001  

Als registriertes Mitglied könnten Sie sich dieses Script an Ihre eMail-Adresse mailen lassen!
Melden Sie sich jetzt an, kostenlos!

Empfohlene Fachliteratur:
01  JavaScript Workshop. CD- ROM.
Die CD enthält über 60 Programmbeispiele zu JavaScript, die sofot in die HTML-Seiten übernommen werden k÷nnen, z. B. : Lauftexte, Dynamische Grafiken innerhalb einer HTML-Seite, ...   [weiterlesen]

JavaScript Workshop. CD- ROM.

 
02  JavaScript, m. CD-ROM
Erstellen Sie Web-Seiten, die von dynamischen Inhalten nur so strotzen. Erfreuen Sie die Besucher Ihrer Site mit Stylesheets, die sich den Aktionen des Anwenders anpassen. Übernehmen Sie die Ko ...   [weiterlesen]

JavaScript, m. CD-ROM


<< Bildgrösse (kb) ermitteln Bilder vorladen >>

 

 

Kommentare zu diesem Script
am 11. 10. 2003 um 17:46:10 schrieb toni:
    ich habe mir erlaubt das script zu optimieren und zu erweitern im komfort...wer fragen hat soll mir eine mail schicken
    ###########################################
    <html><head><title></title></head><body bgcolor="black">

    <style>
    .nav_sub{
    font-family:"Verdana";
    font-size:"10pt";
    color:"red";
    line-height:"1.2";
    text-align="center";
    }
    .nav_main{
    font-family:"Verdana";
    font-size:"10pt";
    color:"#123456";
    line-height:"1.2";
    text-align="center";
    }
    </style>

    <script language="JavaScript">

    function clean ()
    {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5'))
    {
    window.document.m1.visibility="hide";
    window.document.m2.visibility="hide";
    window.document.m3.visibility="hide";
    return;
    }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[1].style.visibility='hidden';
    layers[3].style.visibility='hidden';
    layers[5].style.visibility='hidden';
    return;
    }

    function menu (i)
    {
    switch(i)
    {
    //MENU 1
    case 1:{
    if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
    else var layers=document.getElementsByTagName("div");

    layers[1].style.visibility='visible';
    layers[3].style.visibility='hidden';
    layers[5].style.visibility='hidden';
    return;
    }
    //MENU 2
    case 2:{
    if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
    else var layers=document.getElementsByTagName("div");

    layers[1].style.visibility='hidden';
    layers[3].style.visibility='visible';
    layers[5].style.visibility='hidden';
    return;
    }
    //MENU 3
    case 3:{
    if (navigator.appVersion.charAt (0)<'5') var layers=document.all.tags ("div");
    else var layers=document.getElementsByTagName("div");

    layers[1].style.visibility='hidden';
    layers[3].style.visibility='hidden';
    layers[5].style.visibility='visible';
    return;
    }
    }
    }


    function setOn(){
    ref=setTimeout("clean()",1000);
    }

    function setOff(){
    clearTimeout(ref);
    }
    </script>
    <table>
    <!--1 men-->
    <tr><td>
    <!--MENU:: 1-->
    <table border="0" cellspacing="0" cellpadding="0">
    <tr><td>
    <div id="h1" style="visibility: visible">
    <table border=1 bgcolor=yellow width=100 cellspacing=0 cellpadding=0>
    <tr><td class="nav_main" onmouseover=menu(1),setOff() ; onmouseout=setOn(); style="cursor:pointer">Menu 1</td></tr>
    </table>
    </div>
    </td></tr>
    <tr><td>
    <div id="m1" style="visibility: hidden" >
    <table border=1 bgcolor="yellow" width=100 cellspacing=0 cellpadding=0>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 1</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 2</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 3</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 4</td></tr>
    </table>
    </div>
    </td></tr>
    </table>

    <!--2 men-->
    </td><td>
    <!--MENU:: 2-->
    <table border="0" cellspacing="0" cellpadding="0">
    <tr><td>
    <div id="h2" style="visibility: visible">
    <table border=1 bgcolor=yellow width=100 cellspacing=0 cellpadding=0>
    <tr><td class="nav_main" onmouseover=menu(2),setOff() ; onmouseout=setOn(); style="cursor:pointer">Menu 1</td></tr>
    </table>
    </div>
    </td></tr>
    <tr><td>
    <div id="m2" style="visibility: hidden" >
    <table border=1 bgcolor="yellow" width=100 cellspacing=0 cellpadding=0>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 1</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 2</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 3</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 4</td></tr>
    </table>
    </div>
    </td></tr>
    </table>

    <!--3 men-->
    </td><td>
    <!--MENU:: 3-->
    <table border="0" cellspacing="0" cellpadding="0">
    <tr><td>
    <div id="h3" style="visibility: visible">
    <table border=1 bgcolor=yellow width=100 cellspacing=0 cellpadding=0>
    <tr><td class="nav_main" onmouseover=menu(3),setOff() ; onmouseout=setOn(); style="cursor:pointer">Menu 1</td></tr>
    </table>
    </div>
    </td></tr>
    <tr><td>
    <div id="m3" style="visibility: hidden" >
    <table border=1 bgcolor="yellow" width=100 cellspacing=0 cellpadding=0>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 1</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 2</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 3</td></tr>
    <tr><td class="nav_sub" ; onmouseover=this.bgColor="green",setOff() ; onmouseout=this.bgColor="yellow",setOn(); style="cursor:pointer" ; onClick="self.location.href='#'">Punkt 4</td></tr>
    </table>
    </div>
    </td></tr>
    </table>
    </td></tr>
    </table>






    </body></html>




am 28. 07. 2003 um 16:27:51 schrieb djlocke:
    Tach mal ne frage weiß einer zufällig wie das menu bei frames einsetzt so das wenn die maus drüber fährt sich das untrer menu auch üner dem frame öffnet??
    über antworten würde ich mich freun
am 16. 06. 2003 um 22:46:29 schrieb Schmido:
    Hi

    Suche eine Menü, dass ich mit Bildern füllen kann. Also Bilder als Menüpunkte. Auch als Sub-Punkt.

    Kent einer eins?
am 1. 04. 2003 um 19:42:18 schrieb cyberstern:
    super script...allerdings bräuchte ich noch 3 zusätzliche menüpunkte dafür...probiere schon seit stunden,aber irgendwoe klappts nicht...wer kann helfen? danke im voraus!
am 16. 03. 2003 um 13:02:11 schrieb ralf:
    wer kann ir helfen, ich möchte das das menü nach mouseover wieder zurück fährt.
am 20. 11. 2002 um 18:40:34 schrieb User701:
    so und ich habe eine Lösung für das Problem gefunden, dass Menü weggeht wenn man nicht mehr drauf ist ... ich werde das mal fertig machen und wer dann interesse hat kann sich bei mir melden !!!
am 8. 11. 2002 um 18:48:43 schrieb Naiya:
    Jetzt hatte ich zum ersten mal zeit mich richtig damit zu beschäftigen.

    An alle die einen 4. Menüpunkt haben wollen:
    (Ist der ganze Code, sorry dass ich alles damit "vollmülle")

    <script language="JavaScript">

    function clean ()
    {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt (0)<'5'))
    {
    window.document.b.visibility="hide";
    window.document.m1.visibility="hide";
    window.document.m2.visibility="hide";
    window.document.m3.visibility="hide";
    window.document.m4.visibility="hide";
    return;
    }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='hidden';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='hidden';
    layers[8].style.visibility='hidden';
    return;
    }

    function menu (i)
    {

    switch(i)
    {
    case 1:
    {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
    {
    window.document.b.visibility="show";
    window.document.m1.visibility="show";
    window.document.m2.visibility="hide";
    window.document.m3.visibility="hide";
    window.document.m4.visibility="hide";
    return;
    }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='visible';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='hidden';
    layers[8].style.visibility='hidden';
    return;
    }
    case 2:
    {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
    {
    window.document.b.visibility="show";
    window.document.m1.visibility="hide";
    window.document.m2.visibility="show";
    window.document.m3.visibility="hide";
    window.document.m4.visibility="hide";
    return;
    }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='visible';
    layers[6].style.visibility='hidden';
    layers[8].style.visibility='hidden';
    return;
    }
    case 3:
    {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
    {
    window.document.b.visibility="show";
    window.document.m1.visibility="hide";
    window.document.m2.visibility="hide";
    window.document.m3.visibility="show";
    window.document.m4.visibility="hide";
    return;
    }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='visible';
    layers[8].style.visibility='hidden';
    return;
    }
    case 4:
    {
    if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
    {
    window.document.b.visibility="show";
    window.document.m1.visibility="hide";
    window.document.m2.visibility="hide";
    window.document.m3.visibility="hide";
    window.document.m4.visibility="show";
    return;
    }
    if (navigator.appVersion.charAt (0)<'5')
    {
    var layers=document.all.tags ("div");
    }
    else {
    var layers=document.getElementsByTagName("div");
    }
    layers[0].style.visibility='visible';
    layers[2].style.visibility='hidden';
    layers[4].style.visibility='hidden';
    layers[6].style.visibility='hidden';
    layers[8].style.visibility='visible';
    return;
    }
    }

    }
    </script>

    <div id="b" style="position:absolute; left:30; top:30; width:340; height:170; z-index:1; visibility: hidden">
    <a href="#" onmouseover="clean()" onmouseout="clean()"> </a>
    </div>

    <div id="h1" style="position:absolute; left:50; top:50; width:100; height:25;z-index:2; visibility: visible">
    <a href="#" onmouseover="menu(1)">Menu 1</a>
    </div>

    <div id="m1" style="position:absolute; left:50; top:75; width:100; height:100; z-index:3; visibility: hidden" >
    <a href="#">Punkt 1</a><br>
    <a href="#">Punkt 2</a><br>
    <a href="#">Punkt 3</a><br>
    <a href="#">Punkt 4</a>
    </div>

    <div id="h2" style="position:absolute; left:150; top:50; width:100; height:25; z-index:4; visibility: visible">
    <a href="#" onmouseover="menu(2)">Menu 2</a></div>

    <div id="m2" style="position:absolute; left:150; top:75; width:100; height:100; z-index:5; visibility: hidden">
    <a href="#">Punkt 1</a><br>
    <a href="#">Punkt 2</a><br>
    <a href="#">Punkt 3</a><br>
    <a href="#">Punkt 4</a>
    </div>

    <div id="h3" style="position:absolute; left:250; top:50; width:100; height:25; z-index:6; visibility:visible">
    <a href="#" onmouseover="menu(3)">Menu 3</a>
    </div>

    <div id="m3" style="position:absolute; left:250; top:75; width:100; height:100; z-index:7; visibility: hidden">
    <a href="#">Punkt 1</a><br>
    <a href="#">Punkt 2</a><br>
    <a href="#">Punkt 3</a><br>
    <a href="#">Punkt 4</a>
    </div>

    <div id="h4" style="position:absolute; left:350; top:50; width:100; height:25; z-index:8">
    <a href="#" onmouseover="menu(4)">Menu 4</a>
    </div>

    <div id="m4" style="position:absolute; left:350; top:75; width:100; height:100; z-index:9; visibility: hidden">
    <a href="#">Punkt 1</a><br>
    <a href="#">Punkt 2</a><br>
    <a href="#">Punkt 3</a><br>
    <a href="#">Punkt 4</a>
    </div>

am 19. 10. 2002 um 20:57:12 schrieb Naiya:
    Ich finde das script echt super und obwohl das schon viele gefragt haben, wie kann ich einen weiteren menüpunkt hinzufügen?
    Ich habe folgendes gemacht, es muss aber ein fehler drin sein, bitte um hilfe:


    <div id="h4" style="position:absolute; left:350; top:50; width:100; height:25; z-index:8">
    <a href="#" onmouseover="menu(4)">Menu 4</a>
    </div>

    <div id="m4" style="position:absolute; left:350; top:75; width:100; height:100; z-index:9; visibility: hidden">
    <a href="#">Punkt 1</a><br>
    <a href="#">Punkt 2</a><br>
    <a href="#">Punkt 3</a>
    </div>


    Habe bei vorangegangenen menüpunkt (3) noch ;visibility: visible hinzugefügt, da das bei den anderen auch so ist, jetzt komme ich nich weiter, ich kann meinen fehler nicht finden....
    Bitte um baldige antwortm danke im voraus, Ciao, Naiya
am 8. 09. 2002 um 16:46:30 schrieb wilhelm:
    hätte auch ganz gern, dass es wieder einfährt, wenn mans verlässt.
    urban42s (18.06.01) onmouseout funktioniert so bei mir nicht. hab ins vorangehende element ein onclick="clean()" geschrieben. ist zar nicht hübsch, aber als notnagel besser wie nix....

    @misdemeanor: kuhl bleiben. jeder übt irgendwie und irgendwo....
am 12. 06. 2002 um 16:06:50 schrieb Sträter:
    Schönes Menü, aber ich möchte gerne, wenn man die Maus von dem Menü nimmt, dass sich dass wieder automatisch einfährt.
Zeige Kommentare 11 - 20 von 61 insgesamt
><< | 1 2 3 4 5 6 7 >| >>
Kommentar-Seite 2 von 7

Hier können Sie Probleme oder Kommentare zu diesem Script hinterlassen.

Name:
eMail:
Kommentar zum Script:
Was ergibt 3 + 5:
 
 


Bewerten Sie dieses Script
1 = sehr gut, 6 = durchgefallen
| 1| 2| 3| 4| 5| 6|
Bisheriger Schnitt von 64 Bewertungen: 1.8281

submenu
Start
TopSeiten
Neuigkeiten
allgemeine Info
Animationen
Bilder
Browser
Cookies
CSS
Datum
DHTML
Effekte
Fenster
Formulare
Frames
Fun
HTML-Tricks
Info
Navigationen
Nützliches
Rechner
Scroller
Spiele
System
Texteffekte
Ticker
web-vorlage
BMW Z8
online
5 User online