Currently, I am working on incorporating a menu in the center of a webpage (please note that this is not a top navigation menu).
Here is the initial setup:
Users are able to click on various menu items to access different content.
I have written code for one menu item which functions correctly... however, I am in search of a more elegant solution that can be applied to all menu items.
<script>
$(function() {
$("#menu3").click(function(){
$(this).css({
'text-decoration':'underline',
'font-family':'Gotham-Medium'
});
$("#content1").hide();
$("#content3").show();
});
});
</script>
<nav class="menu">
<ul>
<li><div id="menu1">menu1</div></li>
<li><div id="menu2">menu2</div></li>
<li><div id="menu3">menu3</div></li>
<li><div id="menu4">menu4</div></li>
</ul>
</nav>
In addition, I created code for the hover state of a menu item. Strangely, everything works using this code:
<script>
$(function() {
$("#menu3").mouseenter(function(){
$(this).css({
'text-decoration':'underline',
'font-family':'Gotham-Medium'
});
});
});
</script>
However, once I add the mouseleave code, the functionality ceases (including the hover effect on enter, so nothing happens when hovering over the menu). I'm unsure of what is causing this or how to resolve it. Thank you for your help in advance.
<script>
$(function() {
$("#menu3").mouseenter(function(){
$(this).css({
'text-decoration':'underline',
'font-family':'Gotham-Medium'
});
$("#menu3").mouseleave(function(){
$(this).css({
'text-decoration':'none',
'font-family':'Gotham-Medium'
});
});
});
</script>