Hey there! I'm currently working on designing a horizontal menu bar for a website project. The goal is to have top level items with sub menus that appear when you hover over them, while maintaining proper justification.
So far, everything is coming along smoothly - the color changes and visibility of the sub menus are all working as intended. However, I've encountered an issue where once a top level item is clicked and the user is taken to the corresponding page, the sub menu for that specific item should remain visible until hovering over another top level item due to space constraints.
I've been experimenting with CSS alone to achieve this functionality but it seems quite challenging. This has led me to explore using jQuery to handle the dynamic hiding/showing of the active sub menu. Unfortunately, I've hit a roadblock with this approach as well. It seems like I may have made things more complicated than necessary!
If you'd like to take a look at what I mean, I've created a sample on JSFiddle:
This scenario mimics selecting the first top level item and being redirected to "parent1.html".
Any assistance or pointers in the right direction would be greatly appreciated.
Here's a snippet of my code:
<div class='menu'>
<ul>
<li class='active'><a href="#">Parent 1</a>
<ul>
<li><a href="#">Sub 1-1</a></li>
<li><a href="#">Sub 1-2</a></li>
<li><a href="#">Sub 1-3</a></li>
</ul>
</li>
<li><a href="what-we-do.php">Parent 2</a>
<ul>
<li><a href="#">Sub 2-1</a></li>
<li><a href="#">Sub 2-2</a></li>
<li><a href="#">Sub 2-3</a></li>
</ul>
</li>
<li><a href="#">Parent 3</a>
<ul>
<li><a href="#">Sub 3-1</a></li>
<li><a href="#">Sub 3-1</a></li>
</ul>
</li>
</ul>
</div>
CSS Styles:
.menu ul{
text-align:justify;
width:300px;
min-width:500px;
margin-top:60px;
}
.menu ul:after{
content:'';
display:inline-block;
width:100%;
}
/* Additional CSS rules go here */
<h4>Just a Simple jQuery Function:</h4>
<pre><code>$('.menu').hover(
function(){ $('.menu li.active ul li a').addClass('hide') },
function(){ $('.menu li.active ul li a').removeClass('hide') }
)