I am attempting to design a sliding navigation menu using JQuery. The concept involves having multiple main sections, each with several subsections.
When a user hovers over a section, the subsections will expand horizontally. If another section is currently open and displaying its subsections, it will collapse back to show only the main section.
I have written some basic code to increase the width of a section:
jQuery(document).ready(function($) {
// Section 1
$('#S1Hover').mouseover(function() {
$(this).css('cursor', 'pointer');
if ($('#S2wrapper').is(":visible")){
$('#S2wrapper').animate({width: 0})
}
$('#S1wrapper').animate({width: 400})
});
// Section 2
$('#S2Hover').mouseover(function() {
$(this).css('cursor', 'pointer');
if ($('#S1wrapper').is(":visible")){
$('#S1wrapper').animate({width: 0})
}
$('#s2wrapper').animate({width: '300'});
});
});
The HTML for this functionality is as follows:
<div id="main">
<div id="S1Hover" class="event">Section 1</div>
<div id="S1wrapper">
<ul id="S1">
<li id="SS1"><a href="#">SS1</a></li>
<li id="SS2"><a href="#">SS2</a></li>
<li id="SS3"><a href="#">SS3</a></li>
<li id="SS4"><a href="#">SS4</a></li>
</ul>
</div>
<div id="S2Hover" class="event">S2</div>
<div id="S2wrapper">
<ul id="projects-nav">
<li id="SS5"><a href="#">SS5</a</li>
<li id="SS6"><a href="#">SS6</a></li>
<li id="SS7"><a href="#">SS7</a></li>
</ul>
</div>
</div>
Currently, the functionality is not working as intended, so any assistance would be greatly appreciated. Additionally, are there any specific browser-related issues I should be aware of once this is functioning correctly?
EDIT: I forgot to mention that I would like a section to remain expanded until a different section is hovered over.
Thank you!