Freebie: 4 Sweet and Responsive Navigation Menus

Freebie: 4 Sweet and Responsive Navigation Menus

Bringing you more freebies, here are 4 navigation menu templates that you can use in your projects for free. We made these without using any frameworks and in such a way that they won’t cause conflicts with the rest of your content.

The Menus

All of the templates consist of an HTML file and a stylesheet. To integrate them with your projects just copy & paste the HTML where you want it. Then you’ll have to link to the CSS file or copy its contents over to your main stylesheet. Our CSS is self-contained and won’t interfere with the rest of your styling.

There is only so much you can do with pure CSS alone, so to make the navigation menus fully responsive we’ve used a small jQuery plugin called SlickNav, which collapses the menu entries on small screens. For two of the demos, we’ve used font-awesome to add retina-friendly icons, so you will need to include the font-awesome source files in your page (we recommend using a CDN version for better performance).

Colorful Navigation With Icons

Colorful Navigation With Icons

Free for Commercial Use

These templates are free to use in you personal or commercial projects. You can check our license page for more info. We hope that you enjoy them!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

2 Comments

  1. David Millar says:

    It's kind of disappointing that the charm of each menu design is lost when mobile. This would've been a great opportunity to highlight customization of the plugin's menu.

    1. menecio says:

      Yep, I though the same, what a bummer

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links