dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Dropdown menu using csshover.htc

  1. #1
    Join Date
    Feb 2006
    Location
    My place
    Posts
    4

    resolved [RESOLVED] Dropdown menu using csshover.htc

    Hi there, i am trying to get my menu here to display it's submenu's when i click on the parent link. I'm also trying to make it hide the open submenu when i click on another parent. Hope that makes sense =.=. At the moment it shows the submenu's only while i hover on the parents. I want to change this so it's click activated.

    I have tried making it use the "onclick" event to activate the submenu by editing the csshover.htc file, that worked fine. It's the part where i tell it to hide any open submenus when i click on a new parent that has me stumped.

    Any help would be much appreciated.

    csshover2.htc <--the one i'm using for this
    testmenu.css <--this triggers the onhover event and defines the look

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I can't see the actions but it sounds like you'll need to have your onclick handler close all menus before opening the one you want.

  3. #3
    Join Date
    Feb 2006
    Location
    My place
    Posts
    4
    var currentSheet, doc = window.document, activators = {
    onhover:{on:'onmouseover', off:'onmouseout'},
    onactive:{on:'onmousedown', off:'onmouseup'}
    }
    This is the code that activates the submenu. The on is currently set to onmouseover which i want to change to onclick. I can leave the off set to nothing, which just means i need to include the "close all submenus code" in the onclick event. The problem is i'm not entirely sure what that code should be.

    I've changed the code to this now

    var currentSheet, doc = window.document, activators = {
    onhover:{on:'onclick', off:''},
    onactive:{on:'onmousedown', off:'onmouseup'}
    }
    now i just need some help making the code which will close the other submenus. and i don't know where to begin.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Hopefully an IE guru will come in here since I'm totally ignorant of the syntax of the IE behaviors.

  5. #5
    Join Date
    Feb 2006
    Location
    My place
    Posts
    4

    Fixed

    Well i managed to get it working, but i used completely different code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
    <title></title><style type="text/css">

    #nav li {
    margin-left: 7px;
    list-style-type : none;
    text-align : left;
    padding-top:1px;
    }


    #nav li ul {
    list-style-type : none;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0px;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    }


    #nav li ul li {
    padding:0;
    text-align:center;
    }

    </style>
    <script type="text/javascript">
    function mmtopnav()
    {
    var n=document.getElementById('nav');
    if(!n){return;}
    var uls=n.getElementsByTagName('ul');
    for(var i=0;i<uls.length;i++)
    {
    uls[i].style.position='relative';
    uls[i].style.display='none';
    uls[i].parentNode.onclick=function()
    {
    document.getElementsByTagName('ul')[0].style.display='none';
    document.getElementsByTagName('ul')[1].style.display='none';
    document.getElementsByTagName('ul')[2].style.display='none';
    document.getElementsByTagName('ul')[3].style.display='none';
    this.getElementsByTagName('ul')[0].style.display='block';
    }
    }

    }
    window.onload=function()
    {
    if(!document.createElement){return;}
    mmtopnav();
    }
    </script>
    </head>
    <body style="margin:0px;">
    <div id="nav" style="position:relative; left:0px; top:0px; margin-top:7px;">
    <li class="secondmenuitem">Section1
    <ul class="secondmenuitem">
    <li>Subsection1_1</li>
    <li>Subsection1_2</li>
    <li>Subsection1_3</li>
    <li>Subsection1_4</li>
    <li>Subsection1_5</li>
    </ul>

    </li>
    <li class="secondmenuitem">Section2
    <ul class="secondmenuitem">
    <li>Subsection2_1</li>
    <li>Subsection2_2</li>
    <li>Subsection2_3</li>
    <li>Subsection2_4</li>
    <li>Subsection2_5</li>
    </ul>
    </li>
    <li class="secondmenuitem">Section3
    <ul class="secondmenuitem">
    <li>Subsection3_1</li>
    <li>Subsection3_2</li>
    <li>Subsection3_3</li>

    <li>Subsection3_4</li>
    <li>Subsection3_5</li>
    </ul>
    </li>
    <li class="secondmenuitem">Section4<ul class="secondmenuitem">
    <li>Subsection4_1</li>
    <li>Subsection4_2</li>

    <li>Subsection4_3</li>
    <li>Subsection4_4</li>
    <li>Subsection4_5</li>
    </ul>
    </li>
    </div>
    </body>
    </html>
    Thanks anyway Ray. I hope this helps anyone who wants this sort of thing as well. It works fine in both Firefox and IE6.
    Last edited by tisptn; 02-28-2006 at 05:24 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles