As I work on creating a menu that displays images upon hovering, I've managed to achieve the show/hide functionality. However, there are a few additional features that I'm struggling to implement:
- When hovering over a submenu item, the main menu image should be hidden.
- If hovering over a submenu item without an image, the main menu image for that section should appear.
You can find the code below along with a CodePen link for reference: https://codepen.io/cr8tivly/pen/LYpXVGx
Thank you
HTML
<div class="container mx-auto position-relative">
<ul class="main-menu col-6">
<li class="nav-item parent-menu border">
<a class="" href="">menu-1</a>
<div class="parent-image">
<img class="main-image" src="http://placehold.it/150/f91?text=Parent-1" alt="" />
</div>
<ul class="child-menu">
<li class="nav-item">
<a href="">smenu-1</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/ggd" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-2</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/cdd" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-3</a>
<div class="child-image"></div>
</li>
</ul>
</li>
<li class="nav-item parent-menu">
<a href="">menu-2</a>
<div class="parent-image">
<img class="main-image" src="http://placehold.it/150/green?text=Parent-2" alt="" />
</div>
<ul class="child-menu">
<li class="nav-item">
<a href="">smenu-1</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/e00" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-2</a>
<div class="child-image">
<img class="" src="http://placehold.it/100/dbb" alt="" />
</div>
</li>
<li class="nav-item">
<a href="">smenu-3</a>
<div class="child-image"></div>
</li>
</ul>
</li>
</ul>
</div>
JS/JQuery
$('.parent-image').hide();
$('.parent-menu').hover(
function(){
$(this).find('.parent-image').show();
},
function() {
$(this).find('.parent-image').last().hide();
}
);
$('.child-image').hide();
$('.child-menu .nav-item').hover(
function(){
$(this).find('.child-image').show();
$(this).find('.child-image:empty', function(){
$('.parent-image').show();
})
},
function() {
$(this).find('.child-image').last().hide();
}
);
CSS
.parent-image,
.child-image {
position: absolute;
right: 0;
top: 0;
}`