[HTML] Menu wie im Win-Explorer

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Straight-Edge, 3. September 2007 .

Schlagworte:
  1. 3. September 2007
    Menu wie im Win-Explorer

    Hey

    Hat jemand ein schönes tutorial oder ein Quellcode, mit dem man auf einer Webseite ein Menu erstellen kann, welches genauso aussieht wie beim Win-Explorer ohne, dass sich die Seite jedesmal neu laden muss!

    Würde mich um einen link oder Quellcode sehr freuen. Bitte nicht in das "Ich such Programmierer"-Thread kopieren, da ich mich damit auskenne und eigentlich nur ein Baugerüst brauche, welches aber schon sicherlich irgendwo vorhanden ist!
     
  2. 3. September 2007
    AW: Menu wie im Win-Explorer

    hä? sry mehr fällt mir grad ned ein....
    mach mal a foddo welches menu du meinst...
     
  3. 3. September 2007
    AW: Menu wie im Win-Explorer

    das menü an sich wirst du dann jawohl selber mit CSS und JS hinbekommen
    ist ja nich viel mehr als ein dropdown
    und um die website ohne neuladen zu machen > Iframe oder Ajax
     
  4. 3. September 2007
    AW: Menu wie im Win-Explorer

    ich hab erstens nicht das wissen das selber zu erstellen, sondern nur zu bearbeiten und zweitens auch nicht die lust das rad neu zu erfinden
     
  5. 3. September 2007
    AW: Menu wie im Win-Explorer

    klärt mich mal jemand auf welches menu er denn meint!?
     
  6. 3. September 2007
    AW: Menu wie im Win-Explorer

    ich denk mal er meint die taskleist.. jo kann man recht simpel per css machen.
    sliced dir von einem screenshot oder so die einzelnen buttons zurecht etc. ein klappmenü solltest du wenn dann mit JS machen.

    und denkst du wirklich es scriptet dir einer deine nav, wenn du es nicht mal versucht hast??
     
  7. 3. September 2007
    AW: Menu wie im Win-Explorer

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    GECKO = document.getElementById? 1:0 ;
    NS = document.layers? 1:0 ;
    IE = document.all? 1:0 ;
    
    function haupt(untermenue)
    {
    var hauptmenues = new Array('ferrari','Ferienwohnung','privat','beruflich','lernen','ppt','planung','unterricht','klassenarbeit','links','gast','email');
    
    for (var menue in hauptmenues)
    {
    var das_menue = hauptmenues[menue];
    if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
    else if (NS) {document.layers[das_menue].style.display = 'none';}
    else if (IE) {document.all[das_menue].style.display = 'none';}
    }
    
    aufklappen(untermenue);
    }
    
    function aufklappen(untermenue)
    {
    if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
    else if (NS) {document.layers[untermenue].style.display = 'block';}
    else if (IE) {document.all[untermenue].style.display = 'block';}
    }
    
    function zuklappen(untermenue)
    {
    if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
    else if (NS) {document.layers[untermenue].style.display = 'none';}
    else if (IE) {document.all[untermenue].style.display = 'none';}
    }
    </script>
    
    </head>
    <body>
    
    <ul>
    <li><a href="untermenue.php" onMouseOver="haupt('ferrari');" onClick="zuklappen('ferrari');return false;"Ferrari</a></li>
    <ul id="ferrari" type="circle" style="display:none;">
    <li>F355 Spider</li>
    <li><a href="untermenue.php" onMouseOver="aufklappen('pferdestaerke');" onClick="zuklappen('pferdestaerke');return false;">F40</a></li>
    <ul id="pferdestaerke" style="display:none;">
    <li>500 PS</li>
    <li>600 PS</li>
    <li>700 PS</li>
    </ul>
    <li>Maranello</li>
    <li>Testarossa</li>
    </ul>
    
    
    
    
    <li><a href="untermenue2.php" onMouseOver="haupt('Ferienwohnung');" onClick="zuklappen('Ferienwohnung');return false;">Ferienwohnung</a>
    </li>
     <ul id="Ferienwohnung" type="circle" style="display:none;">
     <li><a href="http://www.jadeblick.de" target="_blank">Ferienwohnung Jadeblick neu</a></li>
     <li><a href="http://www.jadeblick.de" target="rechts">Ferienwohnung Jadeblick rechts</a></li>
     </ul>
    
    
    <li><a href="untermenue2.php" onMouseOver="haupt('privat');" onClick="zuklappen('privat');return false;">privat</a>
    </li>
     <ul id="privat" type="circle" style="display:none;">
     <li><a href="Lebenslauf.htm" target="rechts">Lebenslauf</a>
     </li>
     </ul>
    
    <li><a href="untermenue2.php" onMouseOver="haupt('beruflich');" onClick="zuklappen('beruflich');return false;">beruflich</a>
    </li>
     <ul id="privat" type="circle" style="display:none;">
     <li><a href="Beruflich.htm" target="rechts">Sek I und Sek II</a>
     </li>
     </ul>
     
    
    <li><a href="untermenue2.php" onMouseOver="haupt('lernen');" onClick="zuklappen('lernen');return false;">Lernen Lernen</a>
    </li>
     <ul id="lernen" type="circle" style="display:none;">
     <li><a href="Lernenlernen.htm" target="rechts">Einf&uml;hrung in das Konzept</a></li>
     <li><a href="KonzeptEr.htm" target="rechts">Klassen 5 und 6 - Konzept in der Erprobungsstufe</a></li>
     <li><a href="Oberstufenkonzept.htm" target="rechts">Klasse 11 - Oberstufenkonzept</a></li>
     <li><a href="Curriculum1.htm" target="rechts">Curriculum Methodenkompetenz</a></li>
     <li><a href="quiz.htm" target="rechts">Quiz|</a></li>
     </ul>
    
    <li><a href="untermenue2.php" onMouseOver="haupt('ppt');" onClick="zuklappen('ppt');return false;">Fortbildung</a>
    </li>
     <ul id="privat" type="circle" style="display:none;">
     <li><a href="Homepagepraesentation.ppt" target="rechts">Gesprächsabend zum Lernen lernen</a></li>
     <li><a href="Handlungsorientiert.ppt" target="rechts">handlungsorientiertes Lernen im Sprachenunterricht</a></li>
     </ul> 
     
    
    <li><a href="untermenue2.php" onMouseOver="haupt('planung');" onClick="zuklappen('planung');return false;">Planung im Schuljahr</a>
    </li>
     <ul id="planung" type="circle" style="display:none;">
     <li><a href="Planung.htm" target="rechts">Terminplanung</a></li>
     </ul> 
     
    <li><a href="untermenue2.php" onMouseOver="haupt('unterricht');" onClick="zuklappen('unterricht');return false;">Unterricht</a>
    </li>
     <ul id="unterricht" type="circle" style="display:none;">
     <li><a href="interactivegame.htm" target="rechts">Klasse 6: Fun Day at Kepler School - an interactive game</a></li>
     <li><a href="Bankrobbery1.htm" target="rechts">Klasse 6: Bank robbery</a></li>
     <li><a href="worksheet.htm" target="rechts">Klasse 6: Bank robbery worksheet</a></li>
     <li><a href="Titanic2.htm" target="rechts">Klasse 7: The Titanic Desaster</a></li>
     <li><a href="Chicago.htm" target="rechts">Klasse 10: Chicago - The Great Lakes</a></li>
     <li><a href="Planspiel.htm" target="rechts">Klasse 12: Planspiel - To Kill A Mockingbird</a></li>
     <li><a href="Halbjahresplanung.htm" target="rechts">Klasse 12.1: Lk Deutsch Konfliktmuster von der Antike bis zur Gegenwart</a></li>
     </ul> 
     
    
    <li><a href="untermenue2.php" onMouseOver="haupt('klassenarbeit');" onClick="zuklappen('klassenarbeit');return false;">Klassenarbeit</a>
    </li>
     <ul id="klassenarbeit" type="circle" style="display:none;">
     <li><a href="Klassenarbeit.htm" target="rechts">Klasse 5</a></li>
     </ul> 
     
    
    <li><a href="untermenue2.php" onMouseOver="haupt('links');" onClick="zuklappen('links');return false;">Links</a>
    </li>
     <ul id="links" type="circle" style="display:none;">
     <li><a href="links.htm" target="rechts">zu anderen interessanten Seiten</a></li>
     </ul> 
     
    <li><a href="untermenue2.php" onMouseOver="haupt('gast');" onClick="zuklappen('gast');return false;">G&auml;stebuch</a>
    </li>
     <ul id="gast" type="circle" style="display:none;">
     <li><a href="http://cgi00.puretec.de/cgi-bin/gb?clsid=0515629f630382e31f284435448b6540" target="rechts">G&auml;stebuch</a></li>
     </ul> 
     
    
    <li><a href="untermenue2.php" onMouseOver="haupt('email');" onClick="zuklappen('email');return false;">e-mail und Kontaktaufnahme f&uuml;r Kontaktaufnahme</a>
    </li>
     <ul id="email" type="circle" style="display:none;">
     <li><a href="halle@hallo.de" target="rechts">G&auml;stebuch</a></li>
     </ul> 
    
    </ul>
    
    </body>
    </html>
    
    komisch irgendwie ist da bei mir der wurm drin, denn die menues werden nicht aufgeklappt

    bei dem beispiel was mir einer im anderen board gepostet hat funktioniert dieses aber

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    GECKO = document.getElementById? 1:0 ;
    NS = document.layers? 1:0 ;
    IE = document.all? 1:0 ;
    
    function haupt(untermenue)
    {
    var hauptmenues = new Array('ferrari','lamborghini','porsche');
    
    for (var menue in hauptmenues)
    {
    var das_menue = hauptmenues[menue];
    if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
    else if (NS) {document.layers[das_menue].style.display = 'none';}
    else if (IE) {document.all[das_menue].style.display = 'none';}
    }
    
    aufklappen(untermenue);
    }
    
    function aufklappen(untermenue)
    {
    if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
    else if (NS) {document.layers[untermenue].style.display = 'block';}
    else if (IE) {document.all[untermenue].style.display = 'block';}
    }
    
    function zuklappen(untermenue)
    {
    if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
    else if (NS) {document.layers[untermenue].style.display = 'none';}
    else if (IE) {document.all[untermenue].style.display = 'none';}
    }
    </script>
    
    </head>
    <body>
    
    <ul>
    <li><a href="untermenue.php" onMouseOver="haupt('ferrari');" onClick="zuklappen('ferrari');return false;"Ferrari</a></li>
    <ul id="ferrari" type="circle" style="display:none;">
    <li>F355 Spider</li>
    <li><a href="untermenue.php" onMouseOver="aufklappen('pferdestaerke');" onClick="zuklappen('pferdestaerke');return false;">F40</a></li>
    <ul id="pferdestaerke" style="display:none;">
    <li>500 PS</li>
    <li>600 PS</li>
    <li>700 PS</li>
    </ul>
    <li>Maranello</li>
    <li>Testarossa</li>
    </ul>
    <li><a href="untermenue2.php" onMouseOver="haupt('lamborghini');" onClick="zuklappen('lamborghini');return false;">lamborghini</a></li>
    <ul id="lamborghini" type="circle" style="display:none;">
    <li>Diablo</li>
    </ul>
    <li><a href="untermenue2.php" onMouseOver="haupt('porsche');" onClick="zuklappen('porsche');return false;">Porsche</a></li>
    <ul id="porsche" type="circle" style="display:none;">
    <li>Roadster</li>
    <li>911</li>
    </ul>
    </ul>
    
    </body>
    </html> 
    hat jemand ne ahnung wo der fehler steckt?!?



    Ich möchter gerne so ein menu haben

    {bild-down: http://www.akademie.de/img/assets/1010/7644_14638_explorerarbeiten.gif}


    mfg sxe
     
  8. 3. September 2007
    AW: Menu wie im Win-Explorer

    das menu ist nicht leicht gemacht. auch wenn javascript dafür reichen würde, bin ich der meinung das sowas entlohnt werden sollte.

    deswegen die anfrage bitte in den 'ich suche designer, coder....'-thread posten.
     
  9. 3. September 2007
    AW: Menu wie im Win-Explorer

    suche nur noch den kleinen fehler...das steht sonst soweit!
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.