#switch image
var up = 'https://image.flaticon.com/icons/svg/149/149187.svg';
var down = 'https://image.flaticon.com/icons/svg/128/128397.svg';
$('#resNavToggle').click(function() {
if ($('.resNavIcon').attr('src') === up) {
$('.resNavIcon').attr('src', down);
} else {
$('.resNavIcon').attr('src', up)
}
})
//toggle sub-menu
$(document).ready(function(){
$("img.resNavIcon").click(function(){
$("ul.resNav").toggle();
});
$("li.serviceLink").click(function(){
$("ul.serviceNav").show();
$("ul.resNav").hide();
});
$("li.serviceNavClose").click(function(){
$("ul.serviceNav").hide();
$("ul.resNav").show();
});
});.resNav { display:none}
.serviceNav { display:none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://image.flaticon.com/icons/svg/149/149187.svg" width="40" height="25" class="resNavIcon" id="resNavToggle">
<ul class="resNav">
<li><a href="">Main-menu</a></li>
<li class="serviceLink">Sub-menu ></li>
<li><a href="">Main-menu</a></li>
<li><a href="">Main-menu</a></li>
<li><a href="">Main-menu</a></li>
</ul>
<ul class="serviceNav">
<li class="serviceNavClose">< Main-menu</li>
<li><a href="">Sub-menu</a></li>
<li><a href="">Sub-menu</a></li>
<li><a href="">Sub-menu</a></li>
</ul>If you're looking for a solution to a responsive menu issue, check out this simple two-tier responsive menu I've created: https://jsfiddle.net/wmxujcy4/2/
I managed to implement the image toggle functionality and the sub-menus as needed after following some tutorials. However, there seems to be an issue when attempting to collapse both menus by clicking the main 'close' icon while on a 'sub-menu'.
//switch image
var up = 'https://image.flaticon.com/icons/svg/149/149187.svg';
var down = 'https://image.flaticon.com/icons/svg/128/128397.svg';
$('#resNavToggle').click(function() {
if ($('.resNavIcon').attr('src') === up) {
$('.resNavIcon').attr('src', down);
} else {
$('.resNavIcon').attr('src', up)
}
})
//toggle sub-menu
$(document).ready(function(){
$("img.resNavIcon").click(function(){
$("ul.resNav").toggle();
});
$("li.serviceLink").click(function(){
$("ul.serviceNav").show();
$("ul.resNav").hide();
});
$("li.serviceNavClose").click(function(){
$("ul.serviceNav").hide();
$("ul.resNav").show();
});
});
Currently, both menus get stuck and the incorrect icon is displayed instead of collapsing both menus. Any assistance in resolving this issue would be greatly appreciated.