How to Add a Slide Down Menu to your Nav


A slide down menu provides more in-depth navigation than offered by traditional nav bars.

How to Add a Slide Down Menu to your Nav

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 design 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


Step 2 - slide-menu.css

Download the CSS below and include it in your web page

 slide-menu.css

Step 3 - slide-menu.js

Copy and paste the code below into a file called slide-menu.js


Step 4 - Add the following includes to your web page

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 navigation, 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!

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.