ud2008 Posted November 24, 2011 Share Posted November 24, 2011 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 More sharing options...
ud2008 Posted November 25, 2011 Author Share Posted November 25, 2011 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 More sharing options...
ud2008 Posted November 25, 2011 Author Share Posted November 25, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.