SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Multilevel Drop Down Menu

    I have been building my first JQuery drop down menu. Using a script studied I have been able to build a simple drop down menu. But, now I want to add multilevel support to it.

    Honestly, I have no idea how to go about doing so. So, I'm looking to someone to help me out.

    Here is a link to the page: link

    And now here is the code:

    HTML

    Code:
    <div id="menubar">
    <ul id="jsddm">
    	<li><a href="#"><img src="images/fyhbtns.png" border="0" /></a></li>
        <li><a href="#"><img src="images/fyhbtns-02.png" border="0" /></a>
        	<ul class="opacity50">
            	<li><a href="#">Service One</a></li>
                <li><a href="#">Service Two</a></li>
                <li><a href="#">Service Three</a></li>
                <li><a href="#">Service Four</a></li>
                <li><a href="#">Service Five</a></li>
            </ul>
        </li>
        <li><a href="#"><img src="images/fyhbtns-03.png" border="0" /></a></li>
        <li><a href="#"><img src="images/fyhbtns-04.png" border="0" /></a></li>
    </ul>
    </div>
    CSS (Yes, I have been toying with CSS3 transparency as well)

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    #jsddm {
    	margin: auto;
    	padding: 0px;
    }
    	
    #jsddm li {	
    	float: left;
    	list-style: none;
    }
    
    #jsddm li a {	
    	display: block;
    }
    		
    #jsddm li ul {	
    	width: 230px;
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	visibility: hidden;
    }
    
    #jsddm li ul a {
    	padding: 5px;
    	color: #FFFFFF;
    	text-decoration: none;
    	font-size: 18px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    		
    #jsddm li ul li {
    	float: none;
    	display: inline;
    }
    		
    #jsddm li ul li a {	
    	background: #b6270f;
    }
    		
    #jsddm li ul li a:hover {	
    	background: #ffffff;
    }
    JAVASCRIPT

    Code:
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
    
    function jsddm_open()
    {  jsddm_canceltimer();
       jsddm_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
    
    function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    
    function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}
    
    function jsddm_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}
    
    $(document).ready(function()
    {  $('#jsddm > li').bind('mouseover', jsddm_open)
       $('#jsddm > li').bind('mouseout',  jsddm_timer)});
    
    document.onclick = jsddm_close;
    Thanks in advance for your help!

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Did you have any luck with this... I'm looking to do something similar.

    Thanks,
    Bradley


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
  •