Jump to content

Submenu Open On Parent Document.location.href

Recommended Posts

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. 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. So, here is the code I have so far:

<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:

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');		 }	   });});

And the css:

#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;}

Link to post
Share on other sites

The submenu isn't showing when I load a parent page. I've been playing with a code, but this is still not working:

$('#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?

Link to post
Share on other sites

Ok, I solved it with the following jquery 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');}});});

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...