Rowby Goren
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
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
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
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
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.
Hi Rowby.
Just attach this in the footer: in my tests works well.
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>
Sorry, Rowby, my previous code was poor. This one works like a charm:
Here the whole test code:
Here the test code in action: http://www.webintenerife.com/testing_script/index.php
Cheers
<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>
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>
Here the test code in action: http://www.webintenerife.com/testing_script/index.php
Cheers
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.
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>
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
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
You can still try renaming the CSS styles as I mentioned above but that may effect other parts of the site.
You have two errors which could prevent the code work as expected:
Please, since in my test page it works fine, delete the origin of the errors and try again my code.
"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', {
Please, since in my test page it works fine, delete the origin of the errors and try again my code.
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
However the accordion menu is still not working.
(Should I try putting it in the head?)
Rowby
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 :-)
Let me become crazy a bit :-)
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>
ASKER
Hi
Here's the new source:
I don't think it's affecting the first selector.
Rowby
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>
I don't think it's affecting the first selector.
Rowby
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...
$('nav.stuckMenu ul#rowby-vertical-menu');
doesn't work in your page. Let me see if there is some ambiguity...
No, Google Chrome developer tools returns Total 1, Visible 1...
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
Maybe there's a content block issue?
Rowby
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>
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...
ASKER
Hmmmm!
Here's the new source:
Not affecting the menu...
:)
Rowby
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>
Not affecting the menu...
:)
Rowby
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Great! You have just to play with css, now... and a lot of thing for the rest of the site!
Good luck!
Good luck!
ASKER
Thanks for sticking with this "simple" accordion menu!
Rowby
Rowby
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.
Thanks
Rowby
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>
Thanks
Rowby
Hi Rowby. Just add this to your stylesheet:
and then you can delete these two rows from the javascript code:
li.dropdown:not(.nested) > ul, .nested{
display: none;
}
and then you can delete these two rows from the javascript code:
$('ul.mysubmenu').hide();
$('ul.nested').hide();
ASKER
Perfecto!!!
Thanks again, Marco!
Rowby
Thanks again, Marco!
Rowby
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
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
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
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
What CMS are you using? Maybe they have an accordion for the CMS.