Results 1 to 4 of 4

Thread: Drop Down OnClick & Sub-Tree Menu

  1. #1
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop Down OnClick & Sub-Tree Menu

    Is there any Script for the drop down menu itself work OnClick then have submenus OnMouseover as well?

    Thanks

  2. #2
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Please have a look.....
    ----------------------------------------
    <html>
    <head>
    <title>Folder Menu</title>

    <style type="text/css">
    .clsMainHide{
    display:none;
    }
    .clsMainShow{
    display:block;
    }
    .clsHeading{
    cursor:hand;
    margin-bottom: 0px;
    background-color:#ECFFEC;
    color:#000000;
    width:140px;
    padding:0px;
    text-align:center;
    font-weight:bold;
    }
    .menutitle{
    cursor:hand;
    margin-bottom: 0px;
    background-color:#ECECFF;
    color:#000000;
    width:140px;
    padding:0px;
    text-align:center;
    font-weight:bold;
    border:1px solid #000000;
    }

    .submenu{
    margin-bottom: 0em;
    width:70px;
    text-align:center;
    }
    .submenutext{
    margin-left: 2.5em;
    background-color:#FF99FF;
    border-bottom-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-bottom-color: #000000;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-color: #000000;
    border-left-color: #000000;
    color:#000000;
    width:100px;
    padding:0px;
    text-align:center;
    }
    a:link {color: #000000}
    a:visited {color: #FFFF00}
    a:hover {color: #00FFA6}
    a:active {color: #FFFF00}
    </style>

    <script type="text/javascript">


    function fShowmenu(){
    if(document.getElementById('masterdiv').className=="clsMainShow"){
    document.getElementById('masterdiv').className="clsMainHide"
    }
    else{
    document.getElementById('masterdiv').className="clsMainShow"
    }
    }
    if (document.getElementById){ //
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }
    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //
    if(el.style.display != "block"){ //
    for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu") //
    ar[i].style.display = "none";
    }
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }
    }
    }

    </script>
    </head>
    <body>
    <div id="menu" class="clsHeading" onclick="fShowmenu()">Main Menu</div>
    <!-- Keep all menus within masterdiv-->
    <div id="masterdiv" class="clsMainHide">
    <div class="menutitle" onmouseover="SwitchMenu('sub1')">Module1</div>
    <span class="submenu" id="sub1">
    <a class="submenutext" href="new.htm">Ch1P1</a><br>
    <a class="submenutext" href="hot.htm">Ch1P2</a><br>
    <a class="submenutext" href="three.htm">Ch1P3</a><br>
    <a class="submenutext" href="four.htm">Ch1P4</a>
    </span>
    <div class="menutitle" onmouseover="SwitchMenu('sub2')">Module2</div>
    <span class="submenu" id="sub2">
    <a class="submenutext" href="ch2p1.htm">Ch3P1</a><br>
    <a class="submenutext" href="ch2p2.htm">Ch3P2</a><br>
    <a class="submenutext" href="ch2p3.htm">Ch3P3</a>
    </span>

    <div class="menutitle" onmouseover="SwitchMenu('sub3')">Module3</div>
    <span class="submenu" id="sub3">
    <a class="submenutext" href="ch3p1.htm">Ch3P1</a><br>
    </span>
    <div class="menutitle" onmouseover="SwitchMenu('sub4')">Module4</div>
    <span class="submenu" id="sub4">
    <a class="submenutext" href="ch4p1.htm">Ch4P1</a><br>
    <a class="submenutext" href="ch4p2.htm">Ch4P2</a><br>
    <a class="submenutext" href="ch4p3.htm">Ch4P2</a><br>
    <a class="submenutext" href="ch4p3.htm">Ch4P3</a>
    </span>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop Down OnClick & Sub-Tree Menu

    Thanks for your help.

    But this is not what I want. Once I OnClick on main menu then 2nd level menu will come out. After that I still need to Onclick again at 2nd level menu. then 3rd come out. And if possible, don't want to use switch menu.

  4. #4
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Please visit http://www.destroydrop.com/javascripts/tree/
    Hope this will fulfill your wish

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •