How to Add a Slide Down Menu to your Navigation
Contemporary website design affords only so much space to your website navigation. Many navigational areas, while capable of supporting child dropdowns, can only fit so many items before a space becomes crowded. For large or enterprise websites, the challenge can become how to fit all of the necessary top-level links to support a clear navigation experience.
A slide down menu may be an appropriate solution in such situations. A slide down menu allows you to provide the option for more in-depth navigation options. By simply clicking a button, your top nav gives way to a more granular view of your website’s navigation. Otherwise, your navigation is hidden which gives users a clear and unencumbered path to page content.
Further, a slide down menu gives you additional opportunities to make bold desgin choices. Include bootstrap columns (as we have done), graphics, search/login forms, and other design elements which support your site’s branding.
Below is the HTML, CSS, and JavaScript required a slide down menu. Customize it to fit your needs!
Step 1 — slide-menu.html
Copy and paste the code below into your web page
<div class="header">
<div class="container">
<!-- Navigation Menu Start -->
<div class="navigation">
<div class="row">
<!-- Navigation Menu Link Lists -->
<div class="col-sm-4 col-xs-12">
<div class="menu">
<span class="br-lblue"><i class="fa fa-desktop"></i> Menu Column</span>
<div class="menu-list">
<ul>
<li>
<a href="#"><i class="fa fa-gear red"></i> Service</a>
</li>
<li>
<a href="#"><i class="fa fa-check-square-o lblue"></i> Features</a>
</li>
<li>
<a href="#"><i class="fa fa-user pink"></i> About Us</a>
</li>
<li>
<a href="#"><i class="fa fa-picture-o orange"></i> Gallery</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="menu">
<span class="br-green"><i class="fa fa-desktop"></i> Menu Column</span>
<div class="menu-list">
<ul>
<li>
<a href="#"><i class="fa fa-camera green"></i> Portfolio</a>
</li>
<li>
<a href="#"><i class="fa fa-comments-o blue"></i> Blog Page</a>
</li>
<li>
<a href="#"><i class="fa fa-table red"></i> Pricing Table</a>
</li>
<li>
<a href="#"><i class="fa fa-times lblue"></i> Coming Soon</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="menu">
<span class="br-red"><i class="fa fa-desktop"></i> Menu Column</span>
<div class="menu-list">
<ul>
<li>
<a href="#"><i class="fa fa-puzzle-piece pink"></i> Products</a>
</li>
<li>
<a href="#"><i class="fa fa-phone orange"></i> Contact Us</a>
</li>
<li>
<a href="#"><i class="fa fa-sign-in green"></i> Login / Register</a>
</li>
<li>
<a href="#"><i class="fa fa-question blue"></i> 404 Error Page</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation menu end -->
<div class="menu-btn">
<a onclick="documentTrack('#');" href="#">Menu <i class="fa fa-chevron-down"></i></a>
</div>
<div class="head">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4">
<!-- Logo and Head Text -->
<div class="logo">
<!-- Logo Icon and Heading --><img alt="" class="img-responsive" src="https://www.solodev.com/assets/logo.png"><span><a onclick="documentTrack('index.html');" href="index.html">Rocket</a></span>
</div>
</div>
<div class="col-md-3 hidden-sm">
</div>
</div>
</div>
</div>Step 3 — slide-menu.js
Copy and paste the code below into a file called slide-menu.js
$(document).ready(function(){
$(".menu-btn").on('click',function(e){
e.preventDefault();
//Check this block is open or not..
if(!$(this).prev().hasClass("open")) {
$(".header").slideDown(400);
$(".header").addClass("open");
$(this).find("i").removeClass().addClass("fa fa-chevron-up");
}
else if($(this).prev().hasClass("open")) {
$(".header").removeClass("open");
$(".header").slideUp(400);
$(this).find("i").removeClass().addClass("fa fa-chevron-down");
}
});
});Step 4 — Add the following includes to your web page
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="slide-menu.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="slide-menu.js"></script>If you followed the above steps correctly, you should now have a fully-working slide down menu. Change the links to fit your site’s navigaiton, modify the css to use the colors in your branding, and swap out the logo for your site’s.
In this article, Solodev showed how to add a slide down menu to your website navigation. Customize and style the slide down menu and make it your own!
Originally Posted on the Solodev Web Design Blog
Subscribe to the Solodev Web Design Blog for daily code tutorials delivered straight to your inbox!
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
