Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    215
    Thanks
    6
    Thanked 0 Times in 0 Posts

    submenu stay open on menu click

    Ok, first let me explain what I try to do.

    I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.

    When I click on a parent (at the moment the hrefs contain no links just #), the submenu opens. But when I click another main item, the submenu of the previous parent remain visible, and the submenu of the parent just clicked is also visible, while I only want the submenu of the parent clicked to be visible or when parent with no submenu the submenu should be invisible.

    So, here is the code I have so far:
    Code:
    <div id="topnav">
            <ul>
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="#">Over Meves</a>
                    <ul class="submenu">
                        <li><a href="#" class="suba">Historie</a></li>
                        <li><a href="#" class="suba">Onze mensen</a></li>
                        <li><a href="#" class="suba">Werkzijze</a></li>
                    </ul>
                </li>
                <li>
                    <a href="vervolg3.html">Disciplines</a>
                    <ul class="submenu">
                        <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li>
                        <li><a href="#" class="suba">Elektrotechniek</a></li>
                        <li><a href="#" class="suba">Sanitaire techniek</a></li>
                        <li><a href="#" class="suba">Energiebesparingstechniek</a></li>
                        <li><a href="#" class="suba">Bouwfysica en geluid</a></li>
                        <li><a href="#" class="suba">Diensten energiebesparing</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Expertise</a>
                    <ul class="submenu">
                        <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> 
                        <li><a href="#" class="suba">Zorg & Welzijn</a></li> 
                        <li><a href="#" class="suba">Milieu & Energie</a></li> 
                        <li><a href="#" class="suba">Beheer & Onderhoud</a></li> 
                        <li><a href="#" class="suba">EPA & EPC</a></li> 
                        <li><a href="#" class="suba">Legionella beheersing</a></li>
                    </ul>          	
                </li>
                <li>
                    <a href="#">Contact</a>
                    <ul class="submenu">
                        <li><a href="#" class="suba">Adres & route</a></li> 
                        <li><a href="#" class="suba">Werken bij</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    The javascript:
    Code:
    <script type="text/javascript">
    var ddmenuitem = 0;
    function jsddm_open()
    {  jsddm_close();
       ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
    }
    function jsddm_close()
    {  
    	if(ddmenuitem) ddmenuitem.css('display', 'none');
    }
    $(document).ready(function()
    {  
       $('#topnav > ul > li').bind('click', jsddm_open)
       $('#topnav ul li a.suba').click(function(e){
         if ($(this).attr('class') != 'active'){
           $('#topnav ul li a.suba').removeClass('active');
           $(this).addClass('active');
         }
       });
    	   $("ul.submenu > li > a").each(function () {
             var currentURL = document.location.href;
             var thisURL = $(this).attr("href");
             if (currentURL.indexOf(thisURL) != -1) {
    	         $(this).parents("ul.submenu").css('display', 'block');
             }
           });
    	   $('a').each(function () {
    		var currentURL = document.location.href;
    		var thisURL = $(this).attr('href');
    		if (currentURL = thisURL) {
    			$(this).parents('ul.submenu').css('display', 'block');	
    		}
    	//	else {
    		//	$(this).parents('ul.submenu').css('display', 'none');	
    	//	}
    	   }); 
    });
    </script>
    And the css:
    Code:
    #topnav ul
    {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    #topnav ul li 
    {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    #topnav ul li a
    {
    	padding: 5px 15px;
    	color: #00537F;
    	text-decoration: none;
    	display: block;
    	font-weight: bold;
    }
    #topnav ul li a:link
    {
    	color: #FFF;
    	text-decoration: none;
    }
    #topnav ul li a:visited
    {
    	color: #FFF;
    	text-decoration: none;
    }
    #topnav ul li a:hover
    {
    	color: #FFF;
    	text-decoration: underline;
    }
    #topnav ul li a.active
    {
    	text-decoration: underline;
    	color: #FFF;
    }
    /*#topnav ul li:hover .submenu
    {
    	display:block;
    }*/
    #topnav ul li ul.submenu
    {
    	float: left;
    	padding: 4px 0;
    	position: absolute;
    	left: 0;
    	top: 24px;
    	display: none;
    	background: #e0e0e0;
    	color: #00537F;
    }
    #topnav ul li ul.submenu a
    {
    	display: inline;
    	color: #00537F;
    	padding: 4px 8px;
    }
    #topnav ul li ul.submenu li
    {
    	border-right-width: 1px; 
    	border-right-style: solid;
    	border-right-color: #00537F;
    }
    #topnav ul li ul.submenu li:last-child
    {
    	border-right-style: none;
    }
    #topnav ul li ul.submenu a:link
    {
    	color: #00537F;
    }
    #topnav ul li ul.submenu a:visited
    {
    	color: #00537F;
    }
    #topnav ul li ul.submenu a:hover
    {
    	text-decoration: underline;
    	color: #00537F;
    }
    #topnav ul li ul.submenu li.active
    {
    	text-decoration: underline;
    	color: #00537F;
    }
    #topnav ul li ul.submenu a.active
    {
    	text-decoration: underline;
    	color: #00537F;
    }
    Hope I explained it clear.

    Thanks for any help.

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    215
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I've made some changes to the jquery code:
    Code:
    var ddmenuitem = 0;
    function jsddm_open()
    {  jsddm_close();
       ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
    }
    function jsddm_close()
    {  
    	if(ddmenuitem) ddmenuitem.css('display', 'none');
    }
    $(document).ready(function()
    {  
       $('#topnav > ul > li').bind('click', jsddm_open)
       $('#topnav ul li a.suba').click(function(e){
         if ($(this).attr('class') != 'active'){
           $('#topnav ul li a.suba').removeClass('active');
           $(this).addClass('active');
         }
       });
    	   $('a').filter(function(){
    			return this.href === document.location.href;
    	   }).addClass('active')
    	   $("ul.submenu > li > a").each(function () {
             var currentURL = document.location.href;
             var thisURL = $(this).attr("href");
             if (currentURL.indexOf(thisURL) != -1) {
    	         $(this).parent("ul.submenu").css('display', 'block');
             }
           });
    });
    Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate.

    Please help.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    215
    Thanks
    6
    Thanked 0 Times in 0 Posts
    is there no one who can help me with this problem?

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    215
    Thanks
    6
    Thanked 0 Times in 0 Posts
    The submenu isn't showing when I load a parent page.

    I've been playing with a code, but this is still not working:
    Code:
    $('#topnav a').each(function(){
      var myHref= $(this).attr('href');
      if( url.match( myHref)) {
    	$(this).addClass('active');
    	$(this).closest('ul').css('display', 'block');
      }
    });
    Can anyone take a look at it?

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    Velsen Noord, Netherlands
    Posts
    215
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, I solved it with the following jquery code:
    Code:
    $(document).ready(function()
    {  
       $('#topnav ul li ul.submenu li a').click(function(e){
         if ($(this).attr('class') != 'active'){
           $('#topnav ul li a').removeClass('active');
           $(this).addClass('active');
         }
       });
    	   $('a').filter(function(){
    			return this.href === document.location.href;
    	   }).addClass('active')
    	   $("ul.submenu > li > a").each(function () {
             var currentURL = document.location.href;
             var thisURL = $(this).attr("href");
             if (currentURL.indexOf(thisURL) != -1) {
    	         $(this).parents("ul.submenu").css('display', 'block');
             }
           });
           $('#topnav > ul > li > a').each(function(){
          var currURL = document.location.href;
    	  var myHref= $(this).attr('href');
          if (currURL.match(myHref)) {
    			$(this).addClass('active');
    			$(this).parent().find("ul.submenu").css('display', 'block');
    	  }
    	});
    });


  •  

    Posting Permissions

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