Struggling to create an expanding navigation bar using CSS. Managed to implement it, but ran into issues when it kept resetting after navigating to a new page. Resorted to using jQuery to resolve the problem by utilizing mouse enter and mouse leave events. While alerts worked fine, applying CSS via jQuery failed to produce the desired outcome.
Here is the jQuery code:
$(function(){
$("nav").mouseenter(function(){
.css({"width": "200px", "overflow": "visible"});
});
$("nav").mouseleave(function(){
.css({"width": "60px", "overflow": "hidden"});
});
});
And here is the HTML code:
<body>
<div class="container">
<header>
<h1>Chemistry Home</h1>
</header>
<nav>
<div id="logo">
<img src="Images/Logo.png">
</div>
<ul>
<li>
<a href="Index.HTML">
<i class="fa fa-HOME fa-2x" id="on"></i>
<span class="nav-text" id="on">HOME</span>
</a>
</li>
<li>
<a href="standards_&_info.HTML">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">STANDARDS & INFORMATION</span>
</a>
</li>
<li>
<a href="interesting_info.HTML">
<i class="fa fa-magic fa-2x"></i>
<span class="nav-text">INTERESTING INFORMATION</span>
</a>
</li>
<li>
<a href="JOBS.HTML">
<i class="fa fa-briefcase fa-2x"></i>
<span class="nav-text">JOBS</span>
</a>
</li>
<li>
<a href="photo_&_video.HTML">
<i class="fa fa-picture-o fa-2x"></i>
<span class="nav-text">PHOTOS & VIDEOS</span>
</a>
</li>
</ul>
</nav>
<div id="cover"></div>
<div class="content">
<div class="two-box">
<div class="title">
<h2>Why</h2>
</div>
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p>
</div>
</div>
<div class="two-box">
<div class="title">
<h2>Quotes</h2>
</div>
<div class="info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p>
</div>
</div>
</div>
<footer>
rueregrewghe
</footer>
</div>
</body>
Being new to jQuery, it's possible I made a rookie mistake. Any help or guidance on resolving this issue would be greatly appreciated. Thank you!