www.webdeveloper.com
+ Reply to Thread
Results 1 to 5 of 5
  1. 02-21-2006 08:22 PM #1
    tisptn
    tisptn is offline Web Lover
    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
    Yes it's true, i am awesome no more photos!
    Reply With Quote Reply With Quote
  2. 02-21-2006 09:58 PM #2
    ray326's Avatar
    ray326
    ray326 is offline Got Link?
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
    Reply With Quote Reply With Quote
  3. 02-21-2006 10:14 PM #3
    tisptn
    tisptn is offline Web Lover
    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.
    Yes it's true, i am awesome no more photos!
    Reply With Quote Reply With Quote
  4. 02-22-2006 09:09 AM #4
    ray326's Avatar
    ray326
    ray326 is offline Got Link?
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
    Reply With Quote Reply With Quote
  5. 02-23-2006 01:43 AM #5
    tisptn
    tisptn is offline Web Lover
    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 04:24 AM.
    Yes it's true, i am awesome no more photos!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

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

     

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

Forum Rules

 HTML5 Development Center



Recent Articles