Jump to content

Submenu Open On Parent Document.location.href


ud2008
 Share

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 comment
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 comment
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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...