Hi, I am very new to jQuery, having previously only used CSS and XHTML. In a project I'm working on, I've been asked to add a sliding accordion menu to form the main basis of navigation in a website. An essential requirement is that the menu must support three levels of navigation. I have got it working fine using CSS, but I've hit problems converting it to jQuery.
The problem: the first and second levels open and close perfectly. But if a user clicks a second-level link to open the third-level, the menu closes. However the third-level links are open -- so the code is partly worked except for this closing issue.
I spent hours and hours trying to find some suitable code to work on. In the end, I settled for this: http://www.i-marco.nl/weblog/jquery-accordion-menu/ This script seems to come quite close to what I want.
My jQuery code is as follows:
function initMenu() {
$('#nav ul ul').hide();
$('#nav ul:first').show();
$('#nav li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#nav ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
The HTML code is as follows:
<div id="nav">
<ul>
<li><a href="../" rel="self" class="currentAncestor">Homepage</a>
<ul>
<li><a href="../page13/page13.php" rel="self">Page One</a></li>
<li><a href="../page47/page47.html" rel="self">Code</a></li>
<li><a href="page48.html" rel="self" id="current">Code 2</a></li>
<li><a href="../page49/page49.html" rel="self">Code 2 Copy</a></li>
<li><a href="../page14/page14.php" rel="self">Page Two</a></li>
<li><a href="../page16/page16.php" rel="self">Page Three</a></li>
<li><a href="../page17/page17.php" rel="self">Page Four</a></li>
<li><a href="../page18/page18.php" rel="self">Page Five</a></li>
<li><a href="../pagetwo.html" rel="self">News</a>
<ul>
<li><a href="../page4/page4.php" rel="self">Outdoor Activities</a></li>
<li><a href="../page9/page9.html" rel="self">Training Seminars</a></li>
<li><a href="../page10/page10.html" rel="self">Research & Development</a></li>
</ul>
</li>
<li><a href="../page19/page19.php" rel="self">Page Six</a></li>
<li><a href="../page20/page20.php" rel="self">Page Seven</a></li>
<li><a href="../page21/page21.php" rel="self">Page Eight</a></li>
<li><a href="../page22/page22.php" rel="self">Page Nine</a></li>
<li><a href="../page23/page23.php" rel="self">Page Ten</a></li>
<li><a href="../page24/page24.php" rel="self">Page Eleven</a></li>
<li><a href="../page25/page25.php" rel="self">Page Twelve</a></li>
</ul>
</li>
<li><a href="../page1.html" rel="self">Products</a>
<ul>
<li><a href="../page6/page6.html" rel="self">Sub Heading One</a>
<ul>
<li><a href="../page6/page3/page3.html" rel="self">One Amet</a></li>
<li><a href="../page6/page26/page26.html" rel="self">One Elit</a></li>
<li><a href="../page6/page27/page27.html" rel="self">One Fusce</a></li>
<li><a href="../page6/page28/page28.html" rel="self">One Eros Vel</a></li><li><a href="../page6/page29/page29.html" rel="self">One Elementum</a></li><li><a href="../page6/page30/page30.html" rel="self">One Faucibus</a></li><li><a href="../page6/page32/page32.html" rel="self">One Non</a></li><li><a href="../page6/page31/page31.html" rel="self">One Euismod</a></li></ul></li>
<li><a href="../page1/page1.html" rel="self">Sub Heading Two</a><ul><li><a href="../page1/page33/page33.html" rel="self">Two Amet</a></li><li><a href="../page1/page34/page34.html" rel="self">Two Elit</a></li><li><a href="../page1/page35/page35.html" rel="self">Two Eros</a></li><li><a href="../page1/page36/page36.html" rel="self">Two Faucibus</a></li><li><a href="../page1/page37/page37.html" rel="self">Two Convallis</a></li><li><a href="../page1/page38/page38.html" rel="self">Two Euismod</a></li></ul></li><li><a href="../page2/page2.html" rel="self">Sub Heading Three</a><ul><li><a href="../page2/page39/page39.html" rel="self">Three Sit</a></li><li><a href="../page2/page40/page40.html" rel="self">Three Elit</a></li><li><a href="../page2/page41/page41.html" rel="self">Title</a>
</li>
<li>
<a href="../page2/page46/page46.html" rel="self">Three Faucibus</a></li><li><a href="../page2/page42/page42.html" rel="self">Three Non</a></li><li><a href="../page2/page45/page45.html" rel="self">Three Non</a></li><li><a href="../page2/page43/page43.html" rel="self">Three Euismod</a></li><li><a href="../page2/page44/page44.html" rel="self">Three Euismod</a></li></ul></li></ul></li><li><a href="../pagethree.html" rel="self"></a><p>Contact</p><a></a><ul><li><a href="../page15/page15.html" rel="self">Tree View</a></li><li><a href="../page11/page11.html" rel="self">Alphabetical</a></li><li><a href="../page12/page12.html" rel="self">Categories</a></li>
</ul>
</li>
</ul>
</div>
And the CSS for my menu is this:
#nav {
margin-top: 35px;
border-top: 1px dotted #878787;
}
#nav ul {
padding: 0;
margin: 0;
}
#nav li {
padding: 0;
margin: 0;
list-style: none;
display: inline;
}
#nav a {
display: block;
padding: 5px 0 5px 10px;
border-bottom: 1px dotted #878787;
color: #262626;
background: url(images/editable_images/arrow_down.png) no-repeat right center;
margin: 0;
}
#nav a.current {
color: #cd3301;
background: url(images/editable_images/arrow_right.png) no-repeat right center;
}
#nav ul a.currentAncestor {
color: #282828;
background: url(images/editable_images/arrow_up.png) no-repeat right center;
font-weight: bold;
}
/* Second Level */
#nav ul ul {
border-bottom: 1px dotted #878787;
padding-top: 10px;
padding-bottom: 10px;
}
#nav ul ul a {
border-bottom: none;
padding: 3px 0 3px 20px;
background: none;
color: #a9a9a9;
line-height: 1.25em;
background: url(images/editable_images/arrow_down.png) no-repeat right center;
}
#nav ul ul a.current {
color: #cd3301;
background: url(images/editable_images/arrow_right.png) no-repeat right center;
}
#nav ul ul a.currentAncestor {
color: #cd3301;
background: url(images/editable_images/arrow_up.png) no-repeat right center;
font-weight: normal;
font-style: normal;
}
/* Third Level */
#nav ul ul ul {
border-bottom: none;
padding-top: 0px;
padding-bottom: 0px;
}
#nav ul ul ul a {
border-bottom: none;
padding: 3px 0 3px 40px;
background: none;
color: #a9a9a9;
line-height: 1.25em;
}
#nav ul ul ul a.current {
color: #cd3301;
background: url(images/editable_images/arrow_right.png) no-repeat right center;
}
#nav ul ul ul a.currentAncestor {
color: #cd3301;
background: url(images/editable_images/arrow_up.png) no-repeat right center;
font-weight: normal;
font-style: normal;
}
Although I did find some examples of multilevel accordions on the internet, most of them seemed quite outdated or used head tags or content containers as triggers. In my instance, I need to use list items because the site is being put together in RapidWeaver which generates the navigations links automatically.
If anybody can suggest anything or point me towards some more suitable code, it would be much appreciated. Ideally I just need something really basic which would follow on from the existing CSS code.