Page 1 of 1

Help make Jquery Submenu Stay Visible After It Is Clicked?

Posted: Tue Mar 01, 2011 10:33 pm
by Jacob
Hello
We have a Jquery collapsing menu and we want the sublinks to stay visible when clicked and on the clicked page. There is a demo of it working here: http://thepixelforge.net/misc/wpc/Jacob/index.htm (only first two sub menus are functional). The same code added to template/common/header.tpl makes all the <dd> submenu links visible on our shop home page here: l o n d o n t s h i r t dot com? We need help stop them form being visible on the home page.

Also there is a problem with the jquery working in Firefox, I have tested in Chrome and Safari.

Code: Select all

 <div id="nav"><!--// START NAV //-->
      <h3 class="head">Tshirts & souvenirs</h3>
<dl id="nav">
	<dt class="nav"><b>London Tshirts</b></dt>
	<dd>
		<ul>
			<li><a href="/Unisex">Unisex</a></li>
			<li><a href="/Slimfit">Slimfit</a></li>
			<li><a href="/Kids">Kids</a></li>
	
		</ul>
	</dd>
	<dt class="nav"><b>Alternative Tshirts</b></dt>
	<dd>
		<ul class="nav">
            <li><a href="/England">England</a></li>
			<li><a href="/Humour">Humour</a></li>
             <li><a href="/Popular">Popular</a></li>
			</ul>
	</dd>
	<dt class="nav"><b>Magnets</b></dt>
	<dd>
		<ul class="nav">
			<li><a href="/magnets-ceramic">Ceramic</a></li>
            <li><a href="/magnets-metal">Metal</a></li>
			<li><a href="/magents-plastic">Plastic</a></li>
		</ul>
	</dd>
	<dt class="nav"><b>Keyrings</b></dt>
	<dd>
		<ul class="nav">
			<li><a href="/keyrings-ceramic">Ceramic</a></li>
            <li><a href="/keyrings-metal">Metal</a></li>
			<li><a href="/keyrings-plastic">Plastic</a></li>
		</ul>
	</dd>
    <dt class="nav"><b>Other gifts</b></dt>
	<dd>
		<ul class="nav">
			<li><a href="/Hats">Hats</a></li>
            <li><a href="/Models">Models</a></li>
			<li><a href="/Bags">Bags</a></li>
		</ul>
	</dd>
</dl>

	</div><!--// END NAV //-->

Code: Select all

// This gets the last part of the url by stripping off the beginning and the trailing slash;
// l o n d o n t s h i r t dot com/England/ therefore becomes England:

var curPage = ((/[^/]+\/?$/.exec(window.location.pathname))[0]).replace(/\/$/, '');

$(document).ready(function(){


// This searches for an anchor whose href ends with the previous variable and adds a class for future use:

	$('dd > ul li a[href$="'+curPage+'"]').addClass('current-page');


// This searches back up the hierarchy and searches for its ancestor dd and adds another class:

	$('.current-page').closest('dd').addClass("current-section");


//This shows the active section

	$('.current-section').show(function(){


		// This adds a class to the bold tag of the related dt. The intention is that it will help
		// integrate with the original script:

		$(this).prev().children().addClass("clicked");
	});
	
	
	if($("#nav")) {
		$("#nav dd").hide();
		$("#nav dt.nav b").click(function() {
			if(this.className.indexOf("clicked") != -1) {
				$(this).parent().next().slideUp(200, function() {
					// This is 'supposed' to hide the current section if another is clicked, but its not working and I'm stumped
					$('.current-section').slideDown(200);					
				});
				$(this).removeClass("clicked");
			}else{
				$("#nav dt.nav b").removeClass();
				$(this).addClass("clicked");
				$("#nav dd:visible").slideUp(200);
				$(this).parent().next().slideDown(200, function() {
					// This is 'supposed' to hide the current section if another is clicked, but its not working and I'm stumped
					$('.current-section').slideUp(200);					
				});
			}return false;
		});
	};
});
Thanks

v1.4.9.1

Edit: took out live url.

Re: Help make Jquery Submenu Stay Visible After It Is Clicke

Posted: Sat Mar 19, 2011 4:45 am
by Jacob
Bump :)

Is my post clear?

The jqeury accordion menu works on basic html pages we tested on. There seems to be something within the open cart directory files that is interfering /over riding our navigation menu, causing the child links to appear visible on the home page but not on the product pages?

Please help

Re: Help make Jquery Submenu Stay Visible After It Is Clicke

Posted: Thu Apr 07, 2011 11:03 pm
by zax
Hi Jacob

Did you solved this problem? I would like to do something similar at my OC shop but I dont have any idea how to do that...

Re: Help make Jquery Submenu Stay Visible After It Is Clicke

Posted: Fri Apr 08, 2011 6:28 am
by Jacob
Hi Zax,

We used a category accordion menu extension in the end which works just how we want it. We needed to do a few tweaks, which we were able to get help with from the creator.

http://www.opencart.com/index.php?route ... ion_id=421