Dropdownmenu

Dieses Thema im Forum "Webentwicklung" wurde erstellt von mynoname, 16. April 2006 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 16. April 2006
    Hi,

    ich komm gerade an meiner Seite iwie nicht weiter.

    Und zwar habe ich grafiken die in etwa so aussehen wie die Buttons oben in der Navi vom Board.
    Ich möchte jetzt das wenn man mit der Maus über so einen Button fährt sich darunter weitere Buttons ausklappen. Könnte mir mal jemand nen Code dafür schreiben oder ne Seite wo das genau erklärt ist. Hab zwar schon paar gefunden allerdings klappen die nur im IE... 10ner für jede Antwort die weiterhilft

    sol halt so aussehen MCI


    mFG
     
  2. 17. April 2006
    ja hab da was gefunden auf www.javarea.de

    Code:
     
    <style>
    <!--
     #iewrap{position:relative;height:30px}
     #iewrap2{position:absolute;left:0;top:20;}
     #dropmenu03{filter:revealTrans(Duration=1.5,Transition=12)visibility:hide}
    -->
    </style>
    
    
    
    <ilayer id="dropmenu01" height=35px>
    <layer id="dropmenu02" visibility=show>
    <span id="iewrap">
    <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
    <font face="Verdana"><b><a href="alternate.htm">hier das Menu</a></b></font>
    </span>
    </span>
    </layer>
    </ilayer>
    
    
    
    <script language="JavaScript1.2">
    <!--
    var enableeffect=true
    var selection=new Array()
    selection[0]='<font face="Verdana"><a href="ihre.htm">Link 1</a><br>'
    selection[1]='<a href="ihre.htm">Link 2</a><br>'
    selection[2]='<a href="ihre.htm">Link 3</a><br>'
    selection[3]='<a href="ihre.htm">Link 4</a><br>'
    selection[4]='<a href="ihre.htm">Link 5</a><br></font>'
    
    if (document.layers)
    document.dropmenu01.document.dropmenu02.visibility='show'
    
    function dropit2(){
    if (document.all){
    dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
    dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
    if (dropmenu03.style.visibility=="hidden"){
    if (enableeffect)
    dropmenu03.filters.revealTrans.apply()
    dropmenu03.style.visibility="visible"
    if (enableeffect)
    dropmenu03.filters.revealTrans.play()
    }
    else{
    hidemenu()
    }
    }
    }
    function dropit(e){
    if (document.dropmenu03.visibility=="hide")
    document.dropmenu03.visibility="show"
    else
    document.dropmenu03.visibility="hide"
    document.dropmenu03.left=e.pageX-e.layerX
    document.dropmenu03.top=e.pageY-e.layerY+19
    return false
    }
    function hidemenu(){
    if (enableeffect)
    dropmenu03.filters.revealTrans.stop()
    dropmenu03.style.visibility="hidden"
    }
    function hidemenu2(){
    document.dropmenu03.visibility="hide"
    }
    if (document.layers){
    document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
    document.dropmenu01.document.dropmenu02.onclick=dropit
    }
    else if (document.all)
    document.body.onclick=hidemenu
    // -->
    </script>
    
    <div id="dropmenu03" style="position:absolute;left:0;top:100;layer-background-color:lighyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px solid darkgray;padding:0px">
    
    <script language="JavaScript1.2">
    if (document.all)
    dropmenu03.style.padding='4px'
    for (i=0;i<selection.length;i++)
    document.write(selection[i])
    </script>
    </div>
    
    <script language="JavaScript1.2">
    if (document.layers){
    document.dropmenu03.captureEvents(Event.CLICK)
    document.dropmenu03.onclick=hidemenu2
    }
    </script>
    </div></div>
    
    oder noch das etwas einfachere...

    Code:
     <SCRIPT LANGUAGE="JavaScript">
    <!--
    /*
     Titel: Drop-Down-Menüs
     Autor: Christoph Bergmann
     WWW: http://acc.de
     EMail: cb@acc.de
    
     Copyright (c) 1998 Milch & Zucker - C.Bergmann und J.Gamperl.
     All rights reserved. Alle Rechte vorbehalten. URL: http://dhtml.seite.net
    
     Dieser Code darf für nicht-kommerzielle, sowie kommerzielle Zwecke frei
     genutzt und angepaßt werden, solange dies unentgeltlich erfolgt und
     dieser Vermerk bestehen bleibt.
    */
    
    function test(x) {
     if (navigator.appName == 'Microsoft Internet Explorer')
     x.blur();
    }
    function show_layer(x)
    {
    if(document.layers)
    document.layers[x].visibility="show";
    else
    document.all[x].style.visibility="visible";
    }
    function hide_layer(x)
    {
    if(document.layers)
    document.layers[x].visibility="hide";
    else
    document.all[x].style.visibility="hidden";
    }
    var old;
    var memold;
    var subold;
    
    if(document.layers)
    {
    window.captureEvents(Event.MOUSEDOWN);
    window.onmousedown=do_out;
    }
    else
    {
    document.onmouseup=do_out;
    }
    function do_menu(x)
    {
    if(!old)
    old=memold;
    if(old!=x)
    {
    show_layer(x);
    old=x;
    } else
    old="";
    }
    function do_check(x)
    {
    if(old && old!=x)
    {
    hide_layer(old);
    show_layer(x);
    old=x;
    }
    do_submenu();
    }
    function do_out()
    {
    if(old)
    hide_layer(old);
    memold=old; old="";
    do_submenu();
    }
    function do_submenu(x)
    {
    if(subold)
    {
    hide_layer(subold);
    subold="";
    }
    if(x)
    {
    show_layer(x);
    subold=x;
    }
    }
    function lade(seite) {
    parent.pageFrame.location.href = seite;
    }
    // -->
    </script>
    <style>
    
    .menu {position: absolute;top:0;z-index: 2;}
    .submenu {position: absolute;top: 22;z-index: 1; visibility: hide;visibility: hidden;}
    
    </style>
    
    
    <!--------------------erstes menü--------------->
    <div id="m1" class="menu" style="left:200;top:300;">
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <font face=verdana,arial size=2>
    <a href="javascript:do_menu('m1x')" onmouseover="do_check('m1x')" onclick="test(this);"><b>1.Link</b></a></font>
    </tr>
    </td>
    </table>
    </div>
    
    <div id="m1x" class="submenu" style="left:200;top:320;">
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <font face=verdana,arial size=2>
    <a href="#" onmouseover="do_submenu('m11x')"><font color="#FF0000">&gt;&gt;</font></a><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()">A</a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()">B</a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()">C</a><font color="black"> ] </font><br>
    </tr>
    </td>
    </table>
    </div>
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <div id="m11x" class="submenu" style="left:280;top:320;z-index: 1;visibility: hide;visibility: hidden;">
    <font face=verdana,arial size=2><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> D</a><font color="black"> ] </font>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> E</a><font color="black"> ] </font>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> F</a><font color="black"> ] </font>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> G</a><font color="black"> ] </font>
    </tr>
    </td>
    </table>
    </div>
    
    <!---------------------zweites Menü----------------------->
    <div id="m2" class="menu" style="left: 340;top:300;">
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <font face=verdana,arial size=2>
    <a href="javascript:do_menu('m2x')" onmouseover="do_check('m2x')" onclick="test(this);"><b>2.Link</b></a></font>
    </tr>
    </td>
    </table>
    </div>
    
    <div id="m2x" class="submenu" style="left:340;top:320;">
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <font face=verdana,arial size=2>
    <a href="#" onmouseover="do_submenu('m21x')"><font color="#FF0000">&gt;&gt;</font></a><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()"> H </a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()"> I </a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame" onmouseover="do_submenu()"> J </a><font color="black"> ] </font>
    </tr>
    </td>
    </table>
    </div>
    
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <div id="m21x" class="submenu" style="left:420;top:320;z-index: 1;visibility: hide;visibility: hidden;">
    <font face=verdana,arial size=2><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> K </a><font color="black"> ] </font>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> L </a><font color="black"> ] </font>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> M </a><font color="black"> ] </font>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame"> N </a><font color="black"> ] </font>
    </tr>
    </td>
    </table>
    </div>
    <!-----------------drittes Menü---------------------->
    <div id="m3" class="menu" style="left:480;top:300;">
    <table cellspacing=0 cellpadding=2 border=0 width=125>
    <tr>
    <font face=verdana,arial size=2>
    <a href="javascript:do_menu('m3x')" onmouseover="do_check('m3x')" onclick="test(this);"><b>3.Link</b></a></font>
    </tr>
    </td>
    </table>
    </div>
    
    <div id="m3x" class="submenu" style="left:480;top:320;">
    <table cellspacing=0 cellpadding=2 border=0 width=165>
    <tr>
    <font face=verdana,arial size=2>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame">E</a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame">F</a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame">G</a><font color="black"> ] </font><br>
    <font color="black"> [ </font><a href="ihre.htm" TARGET="frame">H</a><font color="black"> ] </font>
    </tr>
    </td>
    </table>
    </div>
    

    sonst hier: Link
     
  3. 17. April 2006
    jo thx... 10 hast du bekommen.

    Aber hab selber eben was gefunden
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.