asked on

Trying to get a simple accordion menu to work with my UL list

Hello

I'm trying to turn an ul list into a vertical accordion menu that includes dropdowns.

I've found a few on the web, but because of my hard coded structure I can't get them to work.

Here's the URL of the site: Vertical url list on the left

The overall div is stuckMenu. However there are two stuckMenu divs on the page and I only want the accordian menu to work on the stuckMenu that has the ul id of "rowby-vertical-menu".

Note that the dropdowns have a li class named "dropdown"

I don't want to change the name of the div or the classes. Some of this is generated by the CMS.

Any suggestions. I tried this one that I googled but could not figure out how to deal with my id's and classes.

It doesn't have to be one based on this url -- just a simple vertical dropdown would do. Here's the url (the "White" menu) White menu

Attached is the stylesheet related to the white version of the accordion menu from the above url. (Again it could be a different simple vertical accordion menu.

Thanks for any help!

Rowby
accordionmenu-rowby2.css

Randy Downs

You need to use the same id as the accordion (acdnmenu) or duplicate that under the existing css rowby-vertical-menu (i.e., rename ids). The problem with renaming the ids is that it may impact the site elsewhere,

What CMS are you using? Maybe they have an accordion for the CMS.

Rowby Goren

ASKER

Hi Randy

I'm using the Shopify CMS and unfortunately they don't have a third party accordion menu or a third party vertical menu.

I'll review the naming of the ids....

And will report bac here..

Rowby

Randy Downs

Maybe you can adapt this. They are creating a FAQ accordion.

An “accordion” is a great way to display the FAQ to your ecommerce store, since it allows the user to quickly and easily browse your FAQ without much scrolling. And luckily, it’s simple and easy to add one to your store!

I’ve made this video tutorial walking you through how to add this FAQ accordion to your Shopify store. The steps are also written below.

Marco Gasi

Hi Rowby.
Just attach this in the footer: in my tests works well.

<script type="text/javascript">
	$(document).ready(function ()
	{
		var els = $('nav.stuckMenu ul#rowby-vertical-menu');
		if (els.length > 0) {
			var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
			//providing with more friendly selectors
			$(mymenu.find('li.dropdown > ul')).addClass('mysubmenu');
			$(mymenu.find('li.dropdown a')).addClass('mainAnchor');
			//hide all submenus
			$('ul.mysubmenu').hide();
			//attaching event
			$('.mainAnchor').on('click', function(e){
				e.preventDefault();
				var items = $('ul.mysubmenu');
				items.each(function () {
					if ($(this).is(':visible')) {
						$(this).slideUp('slow');
					}
				});
				$(this).siblings('ul').slideDown('slow');
			});
		}
	});
</script>

Open in new window

Marco Gasi

Sorry, Rowby, my previous code was poor. This one works like a charm:

<script type="text/javascript">
	$(document).ready(function ()
	{
		var els = $('nav.stuckMenu ul#rowby-vertical-menu');
		if (els.length > 0) {
			var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
			//providing with more friendly selectors
			$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
			$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
			$(mymenu.find('li.nest > a')).addClass('secondAnchor');
			//hide all submenus
			$('ul.mysubmenu').hide();
			$('ul.nested').hide();
			//attaching event li.dropdown > a
			$('.mainAnchor').on('click', function(e){
				e.preventDefault();
				var items = $(this).parents().find('ul.mysubmenu');
				items.each(function () {
					if ($(this).is(':visible')) {
						$(this).slideUp('slow');
					}
				});
				//we don't use slideToggle because we need to make this compatible 
				//with the above code which collaps all other siblings ul
				if ($(this).siblings('ul.mysubmenu').is(':visible')){
					$(this).siblings('ul.mysubmenu').slideUp();
				}else{
					$(this).siblings('ul.mysubmenu').slideDown();
				}
			});
			$('.secondAnchor').on('click', function(e){
				e.preventDefault();
				var items = $(this).parents().find('ul li.nest ul.nested');
				items.each(function () {
					if ($(this).is(':visible')) {
						$(this).slideUp('slow');
					}
				});
				if ($(this).siblings('ul.nested').is(':visible')){
					$(this).siblings('ul.nested').slideUp();
				}else{
					$(this).siblings('ul.nested').slideDown();
				}
			});
		}
	});
</script>

Open in new window

When you click on an item with submenu the submenu slides down; if other submenu are open they are closed up; if the submenu is yet open it is closed. The same for nested submenus. Really nice :-)

Here the whole test code:

<?php
error_reporting( E_ALL );
?>
<!DOCTYPE html>
<html lang="en">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Gerber Engineering can help with you all your mechanical design needs">
    <meta name="author" content="Gerber-Engr.com">
    <title>Carousel test</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
		<!--    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="Styles/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="Styles/app.css" type="text/css">
		<style>
			ul.submenu li{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-12">
					<nav class="stuckMenu">
						<ul id="rowby-vertical-menu" role="navigation" class="row"> 
							<li><a href="/" title="">New</a></li>
							<li class="dropdown"><a href="/" title="">Shoes</a>  
								<ul class="submenu">
									<li><a href="/collections/all-shoes">All Shoes</a></li>    
									<li><a href="/">Men</a></li>    
									<li><a href="/">Boots</a></li>    
									<li><a href="/">Flats</a></li>    
									<li><a href="/collections/heels">Heels</a></li>    
									<li><a href="/">Oxfords and Loafers</a></li>    
									<li><a href="/">Sandals</a></li>    
									<li><a href="/">Sneakers</a></li>    
									<li><a href="/">Wedges</a></li>    
								</ul>
							</li>
							<li class="dropdown"><a href="/" title="">Bags</a>  
								<ul class="submenu">
									<li><a href="/">All Bags</a></li>    
									<li><a href="/">Clutches</a></li>    
									<li><a href="/">Crossbody</a></li>    
									<li><a href="/">Shoulder</a></li>    
									<li><a href="/">Totes</a></li>    
								</ul>
							</li>
							<li class="dropdown"><a href="/pages/designers" title="">Accessories</a>  
								<ul class="submenu">
									<li><a href="/">All Accessories</a></li>    
									<li><a href="/">Belts</a></li>    
									<li><a href="/">Hats</a></li>    
									<li><a href="/">Jewelry</a></li>    
									<li><a href="/">Scarves / Wraps</a></li>    
								</ul>
							</li>
							<li class="dropdown"><a href="/pages/designers" title="">Designers</a>  
								<ul class="megamenu row">
									<span class="desktop-12 tablet-6">
									</span>
								</ul>
							</li>
							<li class="dropdown"><a href="/" title="">Sale</a>  
								<ul class="submenu">
									<li><a href="/collections/all/sale">All</a></li>    
									<li><a href="/">Women's Shoes</a></li>    
									<li><a href="/">Men's Shoes</a></li>    
									<li class="nest"><a href="/"> Bags</a>                 
										<ul class="nested">
											<li><a href="/">All Bags</a></li>
											<li><a href="/">Clutches</a></li>
											<li><a href="/">Crossbody</a></li>
											<li><a href="/">Shoulder</a></li>
											<li><a href="/">Totes</a></li>
										</ul>
									</li>
									<li class="nest"><a href="/">Accessories</a>                 
										<ul class="nested">
											<li><a href="/">All Accessories</a></li>
											<li><a href="/">Belts</a></li>
											<li><a href="/">Hats</a></li>
											<li><a href="/">Jewelry</a></li>
											<li><a href="/">Scarves / Wraps</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="dropdown"><a href="/pages/about-us" title="">Press</a>  
								<ul class="submenu">
									<li><a href="/">About </a></li>    
									<li><a href="/">Editorial</a></li>    
								</ul>
							</li>
							<li class="dropdown"><a href="/" title="">Contact</a>  
								<ul class="submenu">
									<li><a href="/">Locations</a></li>    
									<li><a href="/">Customer Service</a></li>    
								</ul>
							</li>
						</ul> 
					</nav>				</div>
			</div>
		</div>
    <script src="JS/jquery-1.11.3.min.js"></script>
    <script src="JS/bootstrap.min.js"></script>
    <script src="JS/JSMain.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function ()
			{
				var els = $('nav.stuckMenu ul#rowby-vertical-menu');
				if (els.length > 0) {
					var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
					//providing with more friendly selectors
					$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
					$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
					$(mymenu.find('li.nest > a')).addClass('secondAnchor');
					//hide all submenus
					$('ul.mysubmenu').hide();
					$('ul.nested').hide();
					//attaching event li.dropdown > a
					$('.mainAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul.mysubmenu');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						//we don't use slideToggle because we need to make this compatible 
						//with the above code which collaps all other siblings ul
						if ($(this).siblings('ul.mysubmenu').is(':visible')){
							$(this).siblings('ul.mysubmenu').slideUp();
						}else{
							$(this).siblings('ul.mysubmenu').slideDown();
						}
					});
					$('.secondAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul li.nest ul.nested');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						if ($(this).siblings('ul.nested').is(':visible')){
							$(this).siblings('ul.nested').slideUp();
						}else{
							$(this).siblings('ul.nested').slideDown();
						}
					});
				}
			});
		</script>		
	</body>
</html>

Open in new window

Here the test code in action: http://www.webintenerife.com/testing_script/index.php

Cheers

Rowby Goren

ASKER

Hi Marco.

Thanks for jumping in. I put the code here and it is not affecting the menu. Here is is via source code.

<script type="text/javascript">
	$(document).ready(function ()
	{
		var els = $('nav.stuckMenu ul#rowby-vertical-menu');
		if (els.length > 0) {
			var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
			//providing with more friendly selectors
			$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
			$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
			$(mymenu.find('li.nest > a')).addClass('secondAnchor');
			//hide all submenus
			$('ul.mysubmenu').hide();
			$('ul.nested').hide();
			//attaching event li.dropdown > a
			$('.mainAnchor').on('click', function(e){
				e.preventDefault();
				var items = $(this).parents().find('ul.mysubmenu');
				items.each(function () {
					if ($(this).is(':visible')) {
						$(this).slideUp('slow');
					}
				});
				//we don't use slideToggle because we need to make this compatible 
				//with the above code which collaps all other siblings ul
				if ($(this).siblings('ul.mysubmenu').is(':visible')){
					$(this).siblings('ul.mysubmenu').slideUp();
				}else{
					$(this).siblings('ul.mysubmenu').slideDown();
				}
			});
			$('.secondAnchor').on('click', function(e){
				e.preventDefault();
				var items = $(this).parents().find('ul li.nest ul.nested');
				items.each(function () {
					if ($(this).is(':visible')) {
						$(this).slideUp('slow');
					}
				});
				if ($(this).siblings('ul.nested').is(':visible')){
					$(this).siblings('ul.nested').slideUp();
				}else{
					$(this).siblings('ul.nested').slideDown();
				}
			});
		}
	});
</script>		

</body>
</html>

Open in new window

Rowby Goren

ASKER

Hi Randy,

The Shopify accordion menu looks good but for this use I need to make the existing UL/li's work because Shopify automatically generates that HTLM and whenever we need to change the links Shopify does it automatically via the admin panel.

But thanks for taking the time to check it out.

Rowby

Randy Downs

You can still try renaming the CSS styles as I mentioned above but that may effect other parts of the site.

Marco Gasi

You have two errors which could prevent the code work as expected:

"NetworkError: 404 Not Found - http://cdn.shopify.com/s/files/1/0928/3584/t/11/assets/accordionmenu-rowby.cssXXXX?10975143427487338047"
accordi...7338047
ReferenceError: AdobeEdge is not defined


AdobeEdge.loadComposition('madision-style-static-html-1', 'EDGE-158447172', {

Open in new window

Please, since in my test page it works fine, delete the origin of the errors and try again my code.

Rowby Goren

ASKER

Hi I removed those two errors from the page (I think).

However the accordion menu is still not working.

(Should I try putting it in the head?)

Rowby

Marco Gasi

Usually, javascript has to be put in footer, so it be read when the rest of the page has yet been loaded.
Let me become crazy a bit :-)

Marco Gasi

Sorry for the delay. Please, try this so wen see if the first selector works:

		<script type="text/javascript">
			$(document).ready(function ()
			{
				var els = $('nav.stuckMenu ul#rowby-vertical-menu');
				if (els.length > 0) {
					console.log('els exists');
					var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
					//providing with more friendly selectors
					$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
					$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
					$(mymenu.find('li.nest > a')).addClass('secondAnchor');
					//hide all submenus
					$('ul.mysubmenu').hide();
					$('ul.nested').hide();
					//attaching event li.dropdown > a
					$('.mainAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul.mysubmenu');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						//we don't use slideToggle because we need to make this compatible 
						//with the above code which collaps all other siblings ul
						if ($(this).siblings('ul.mysubmenu').is(':visible')){
							$(this).siblings('ul.mysubmenu').slideUp();
						}else{
							$(this).siblings('ul.mysubmenu').slideDown();
						}
					});
					$('.secondAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul li.nest ul.nested');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						if ($(this).siblings('ul.nested').is(':visible')){
							$(this).siblings('ul.nested').slideUp();
						}else{
							$(this).siblings('ul.nested').slideDown();
						}
					});
				}
				else{
					console.log('els not found');
				}
			});
		</script>

Open in new window

Rowby Goren

ASKER

Hi

Here's the new source:

		<script type="text/javascript">
			$(document).ready(function ()
			{
				var els = $('nav.stuckMenu ul#rowby-vertical-menu');
				if (els.length > 0) {
					console.log('els exists');
					var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
					//providing with more friendly selectors
					$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
					$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
					$(mymenu.find('li.nest > a')).addClass('secondAnchor');
					//hide all submenus
					$('ul.mysubmenu').hide();
					$('ul.nested').hide();
					//attaching event li.dropdown > a
					$('.mainAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul.mysubmenu');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						//we don't use slideToggle because we need to make this compatible 
						//with the above code which collaps all other siblings ul
						if ($(this).siblings('ul.mysubmenu').is(':visible')){
							$(this).siblings('ul.mysubmenu').slideUp();
						}else{
							$(this).siblings('ul.mysubmenu').slideDown();
						}
					});
					$('.secondAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul li.nest ul.nested');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						if ($(this).siblings('ul.nested').is(':visible')){
							$(this).siblings('ul.nested').slideUp();
						}else{
							$(this).siblings('ul.nested').slideDown();
						}
					});
				}
				else{
					console.log('els not found');
				}
			});
		</script>	

	

</body>

Open in new window

I don't think it's affecting the first selector.

Rowby

Marco Gasi

Okay: for some reason the selector

$('nav.stuckMenu ul#rowby-vertical-menu');

doesn't work in your page. Let me see if there is some ambiguity...

Marco Gasi

No, Google Chrome developer tools returns Total 1, Visible 1...

Rowby Goren

ASKER

Marco could this be in some way related to the issue on my other new EE question, which is being commented on by Prasadh Baapaat.Content block

Maybe there's a content block issue?

Rowby

Marco Gasi

Bah, we can try this: 'nav.stuckMenu > ul#rowby-vertical-menu'

		<script type="text/javascript">
			$(document).ready(function ()
			{
				var els = $('nav.stuckMenu > ul#rowby-vertical-menu');
				if (els.length > 0) {
					console.log('els exists');
					var mymenu = $('nav.stuckMenu > ul#rowby-vertical-menu');
					//providing with more friendly selectors
					$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
					$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
					$(mymenu.find('li.nest > a')).addClass('secondAnchor');
					//hide all submenus
					$('ul.mysubmenu').hide();
					$('ul.nested').hide();
					//attaching event li.dropdown > a
					$('.mainAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul.mysubmenu');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						//we don't use slideToggle because we need to make this compatible 
						//with the above code which collaps all other siblings ul
						if ($(this).siblings('ul.mysubmenu').is(':visible')){
							$(this).siblings('ul.mysubmenu').slideUp();
						}else{
							$(this).siblings('ul.mysubmenu').slideDown();
						}
					});
					$('.secondAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul li.nest ul.nested');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						if ($(this).siblings('ul.nested').is(':visible')){
							$(this).siblings('ul.nested').slideUp();
						}else{
							$(this).siblings('ul.nested').slideDown();
						}
					});
				}
				else{
					console.log('els not found');
				}
			});
		</script>

Open in new window

Marco Gasi

No, I don't hink. Here you have just one nav with class stuckMenu... It looks like Shopify created the menu after my code is executed, so my code doesn't work because it refers to elements which still don't exist...

Rowby Goren

ASKER

Hmmmm!

Here's the new source:

	

		<script type="text/javascript">
			$(document).ready(function ()
			{
				var els = $('nav.stuckMenu > ul#rowby-vertical-menu');
				if (els.length > 0) {
					console.log('els exists');
					var mymenu = $('nav.stuckMenu > ul#rowby-vertical-menu');
					//providing with more friendly selectors
					$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
					$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
					$(mymenu.find('li.nest > a')).addClass('secondAnchor');
					//hide all submenus
					$('ul.mysubmenu').hide();
					$('ul.nested').hide();
					//attaching event li.dropdown > a
					$('.mainAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul.mysubmenu');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						//we don't use slideToggle because we need to make this compatible 
						//with the above code which collaps all other siblings ul
						if ($(this).siblings('ul.mysubmenu').is(':visible')){
							$(this).siblings('ul.mysubmenu').slideUp();
						}else{
							$(this).siblings('ul.mysubmenu').slideDown();
						}
					});
					$('.secondAnchor').on('click', function(e){
						e.preventDefault();
						var items = $(this).parents().find('ul li.nest ul.nested');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						if ($(this).siblings('ul.nested').is(':visible')){
							$(this).siblings('ul.nested').slideUp();
						}else{
							$(this).siblings('ul.nested').slideDown();
						}
					});
				}
				else{
					console.log('els not found');
				}
			});
		</script>	


	

</body>

Open in new window

Not affecting the menu...

:)
Rowby

ASKER CERTIFIED SOLUTION

Marco Gasi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rowby Goren

ASKER

Your Instincts worked!!!!

WORKS!

Marco Gasi

Great! You have just to play with css, now... and a lot of thing for the rest of the site!
Good luck!

Rowby Goren

ASKER

Thanks for sticking with this "simple" accordion menu!

Rowby

Rowby Goren

ASKER

Hi Marco,

A follow up on the question (and we can make this a new question, if needed.)

Please go to Accordion menu

For a split second the full menu shows when you land on the page.

Is it possible to tweak the settings so that you don't see the full menu on page load? I tried moving the script to the head, but that didn't make a difference. So I put it back in the footer.

	
<script type="text/javascript">
	$(window).load(function ()
	{
		var i = setInterval(function ()
		{
			if ($('nav.stuckMenu ul#rowby-vertical-menu').length)
			{
				clearInterval(i);
				// safe to execute your code here
				var els = $('nav.stuckMenu ul#rowby-vertical-menu');
				if (els.length > 0) {
					console.log('els exists');
					var mymenu = $('nav.stuckMenu ul#rowby-vertical-menu');
					//providing with more friendly selectors
					$(mymenu.find('li.dropdown:not(.nested) > ul')).addClass('mysubmenu');
					$(mymenu.find('li.dropdown > a')).addClass('mainAnchor');
					$(mymenu.find('li.nest > a')).addClass('secondAnchor');
					//hide all submenus
					$('ul.mysubmenu').hide();
					$('ul.nested').hide();
					//attaching event li.dropdown > a
					$('.mainAnchor').on('click', function (e) {
						e.preventDefault();
						var items = $(this).parents().find('ul.mysubmenu');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						//we don't use slideToggle because we need to make this compatible 
						//with the above code which collaps all other siblings ul
						if ($(this).siblings('ul.mysubmenu').is(':visible')) {
							$(this).siblings('ul.mysubmenu').slideUp();
						} else {
							$(this).siblings('ul.mysubmenu').slideDown();
						}
					});
					$('.secondAnchor').on('click', function (e) {
						e.preventDefault();
						var items = $(this).parents().find('ul li.nest ul.nested');
						items.each(function () {
							if ($(this).is(':visible')) {
								$(this).slideUp('slow');
							}
						});
						if ($(this).siblings('ul.nested').is(':visible')) {
							$(this).siblings('ul.nested').slideUp();
						} else {
							$(this).siblings('ul.nested').slideDown();
						}
					});
				}
				else {
					console.log('els not found');
				}
			}
		}, 100);
	});
</script>

Open in new window

Thanks

Rowby

Marco Gasi

Hi Rowby. Just add this to your stylesheet:

li.dropdown:not(.nested) > ul, .nested{
	display: none;
}

Open in new window

and then you can delete these two rows from the javascript code:

$('ul.mysubmenu').hide();
$('ul.nested').hide();

Open in new window

Rowby Goren

ASKER

Perfecto!!!

Thanks again, Marco!

Rowby

Rowby Goren

ASKER

Hi Marco

Yesterday I added some animation to the logo. However during the process I accidentally disabled the navigation "accordon menu feature.)

When you have some time can you look at the page and see what I need to re-fix?

I have the script at the bottom of the body and the css looks the same. But something is interfering with the menu from "opening up".)
Accordian not working

I'm also noticing that -- whatever I did -- the vertical menu is not staying in its precise position -- and moves up and down when the browser is scrolled up and down.

If this fix requires a new question let me know.

UGH! :)

Thanks

Rowby

Rowby Goren

ASKER

Hi Marco,

I opened a new question to deal with the accordion menu. If you have time here's the new EE link.New EE question about accordion menu

Thanks

Rowby