Freebie: 4 Wonderful JavaScript Option Menus

Freebie: 4 Wonderful JavaScript Option Menus

In this iteration of your freebie giveaway, we’ve prepared for you 4 awesome option menus! They are made entirely our of vanilla HTML, CSS and JavaScript, and don’t require any libraries or frameworks (except for some jQuery).

The Menus

These menus are designed in such a way, that they can quickly show all the needed options for your app. They are hidden offscreen and only appear when a user requests them with the push of a button. Once open, the menus can easily be hidden away again via a close button.

All you have to do, to include any of these menus in your project, is to copy the HTML from the demo examples and place the code anywhere on your page. There are also a few lines of JavaScript, and a specific CSS file for each menu. Both the JavaScript and CSS are self contained and shouldn’t cause any side effects to your existing content.

We’ve also added event handlers that call alerts when a option in the menus is selected. You can use this to effortlessly add your own functionality to all the links and buttons.

Side Option Menu

Side Option Menu

Free for Commercial Use

The menus can be downloaded from the button on the top of the page. You have all rights to customize them and use them however you want, in both personal and commercial projects (our license page). Enjoy!

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

4 Comments

  1. Nico says:

    great work!

  2. Raimen says:

    cool stuff! Thanks Danny!

  3. daniel says:

    This is awesome. I wonder if you could include the SASS or SCSS files on the download?

    Thanks :)

  4. Tang Hoong says:

    Thanks Danny, I've been learning lots from your tutorials!

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