Simple Responsive Navigation Using jQuery

Simple Responsive Navigation Using jQuery

by Ali Khaled

HTML

<div class="links">
<a href="#" class="showhide"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
</div>

CSS

body, ul{padding:0px; margin:0px;}
links {position:relative;}
nav ul {list-style: none;}
nav ul li a{color:#000; text-decoration: none; float:left; box-shadow: rgba(255,255,255,0.24) 0 1px 0 0 inset,#fff 0 0px 0 0;  line-height: 20px; font-weight: 100; font-size: 20px; padding: 5px 18px;}
nav ul li a:hover{  background-color: #8ac007; color:#FFFFFF;}
.showhide{display:none; background:url(https://htmlcssphptutorial.files.wordpress.com/2015/07/responsive-icon.jpg) no-repeat; width:25px; height:20px; position: absolute; right: 5px; top: 35px; opacity: 1; transition: 1s;}
.showhide:hover {opacity: .8;}
@media only screen and (max-width: 790px) {
.showhide{display:block;}
nav {display:none;}
nav ul li a{float: none; display: block;}
}

JavaScript

$(document).ready(function(){
    $(".showhide").click(function(){
        $("nav").slideToggle("slow");
    });
});