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

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!