"Minimal Menu"
Bootstrap 3.1.0 Snippet by mouse0270

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation"> <div class="navbar-toggler animate"> <span class="menu-icon"></span> </div> <ul class="navbar-menu animate"> <li> <a href="#about-us" class="animate"> <span class="desc animate"> Who We Are </span> <span class="glyphicon glyphicon-user"></span> </a> </li> <li> <a href="#blog" class="animate"> <span class="desc animate"> What We Say </span> <span class="glyphicon glyphicon-info-sign"></span> </a> </li> <li> <a href="#contact-us" class="animate"> <span class="desc animate"> How To Reach Us </span> <span class="glyphicon glyphicon-comment"></span> </a> </li> </ul> </nav> <!-- START OF HTML FOR DEMO - NOT NEEDED --> <div class="container"> <div class="row"> <div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4"> <h1 class="title">Minimal Menu</h1> </div> </div> <div class="row"> <div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4 white-background"> <p>Please keep in mind that this menu uses no javascript and may not work properly in all browsers. I have only tested it on chrome.</p> <p><em><strong>ReliQ</strong></em> has confirmed this works for "Firefox". Thanks!</p> <p>This menu was made in about 45 minutes so it is bound to have some bugs. Test it out and let me know what you think in the comments below.</p> <p>To view this snippet in fullscreen click on the button in the top right hand corner or if you are in fullscreen click on the same button to return to Bootsnipp!</p> <p>Alright now back to playing Watch Dogs and Wolfenstein: The New Order</p> </div> </div> </div> <a href="http://bootsnipp.com/iframe/PbDb5" class="btn btn-primary" id="fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen"><span class="glyphicon glyphicon-fullscreen"></span></a> <!-- END OF HTML FOR DEMO - NOT NEEDED -->
/* START OF DEMO CSS - NOT NEEDED */ html, body { height: 100% } /* BODY BACKGROUND IMAGE DOESNT ALWAYS REACH THE BOTTOM OF THE BROWSER*/ body { background-color: rgb(100, 100, 100); background-image: url(http://s3.amazonaws.com/sitebuilderreport-assets/media/files/000/000/440/original/Old.jpg?1387493955); background-repeat: no-repeat; background-position: center center; background-size: cover; color: rgb(255, 255, 255); } .white-background { background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); padding-top: 10px; border-radius: 4px; } .title { font-size: 3em; font-weight: 700; text-shadow: 0px 0px 5px rgb(51, 51, 51); text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8); text-align: center; } #fullscreen { position: fixed; top: 10px; right: 10px; } /* END OF DEMO CSS */ .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar-fixed-left { position: fixed; top: 0px; left: 0px; border-radius: 0px; } .navbar-minimal { width: 60px; min-height: 60px; max-height: 100%; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); border-width: 0px; z-index: 1000; } .navbar-minimal > .navbar-toggler { position: relative; min-height: 60px; border-bottom: 1px solid rgb(81, 81, 81); z-index: 100; cursor: pointer; } .navbar-minimal.open > .navbar-toggler, .navbar-minimal > .navbar-toggler:hover { background-color: rgb(158, 202, 59); } .navbar-minimal > .navbar-toggler > span { position: absolute; top: 50%; right: 50%; margin: -8px -8px 0 0; width: 16px; height: 16px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAxNiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsN2gxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDksMCw4LjU1MiwwLDgKCVMwLjQ0OCw3LDEsN3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLDEyaDE0YzAuNTUyLDAsMSwwLjQ0OCwxLDFzLTAuNDQ4LDEtMSwxSDFjLTAuNTUyLDAtMS0wLjQ0OC0xLTEKCVMwLjQ0OCwxMiwxLDEyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsMmgxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDQsMCwzLjU1MiwwLDMKCVMwLjQ0OCwyLDEsMnoiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjMzLDI4Ljk3bDExLjY0LTExLjY0YzAuNDU5LTAuNDU5LDEuMjA0LTAuNDU5LDEuNjYzLDAKCWMwLjQ1OSwwLjQ1OSwwLjQ1OSwxLjIwNCwwLDEuNjYzTDIuOTkzLDMwLjYzM2MtMC40NTksMC40NTktMS4yMDQsMC40NTktMS42NjMsMEMwLjg3MSwzMC4xNzQsMC44NzEsMjkuNDMsMS4zMywyOC45N3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjk5MywxNy4zM2wxMS42NDEsMTEuNjRjMC40NTksMC40NTksMC40NTksMS4yMDQsMCwxLjY2MwoJcy0xLjIwNCwwLjQ1OS0xLjY2MywwTDEuMzMsMTguOTkzYy0wLjQ1OS0wLjQ1OS0wLjQ1OS0xLjIwNCwwLTEuNjYzQzEuNzg5LDE2Ljg3MSwyLjUzNCwxNi44NzEsMi45OTMsMTcuMzN6Ii8+Cjwvc3ZnPgo=); background-repeat: no-repeat; background-position: 0 0; -webkit-transition: -webkit-transform .3s ease-out 0s; -moz-transition: -moz-transform .3s ease-out 0s; -o-transition: -moz-transform .3s ease-out 0s; -ms-transition: -ms-transform .3s ease-out 0s; transition: transform .3s ease-out 0s; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .navbar-minimal > .navbar-menu { position: absolute; top: -1000px; left: 0px; margin: 0px; padding: 0px; list-style: none; z-index: 50; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); } .navbar-minimal > .navbar-menu > li { margin: 0px; padding: 0px; border-width: 0px; height: 54px; } .navbar-minimal > .navbar-menu > li > a { position: relative; display: inline-block; color: rgb(255, 255, 255); padding: 20px 23px; text-align: left; cursor: pointer; border-bottom: 1px solid rgb(81, 81, 81); width: 100%; text-decoration: none; margin: 0px; } .navbar-minimal > .navbar-menu > li > a:last-child { border-bottom-width: 0px; } .navbar-minimal > .navbar-menu > li > a:hover { background-color: rgb(158, 202, 59); } .navbar-minimal > .navbar-menu > li > a > .glyphicon { float: right; } .navbar-minimal.open { width: 320px; } .navbar-minimal.open > .navbar-toggler > span { background-position: 0 -16px; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .navbar-minimal.open > .navbar-menu { top: 60px; width: 100%; min-height: 100%; } @media (min-width: 768px) { .navbar-minimal.open { width: 60px; } .navbar-minimal.open > .navbar-menu { overflow: visible; } .navbar-minimal > .navbar-menu > li > a > .desc { position: absolute; display: inline-block; top: 50%; left: 130px; margin-top: -20px; margin-left: 20px; text-align: left; white-space: nowrap; padding: 10px 13px; border-width: 0px !important; background-color: rgb(51, 51, 51); background-color: rgba(51, 51, 51, 0.8); opacity: 0; } .navbar-minimal > .navbar-menu > li > a > .desc:after { z-index: -1; position: absolute; top: 50%; left: -10px; margin-top: -10px; content:''; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid rgb(51, 51, 51); border-right-color: rgba(51, 51, 51, 0.8); } .navbar-minimal > .navbar-menu > li > a:hover > .desc { left: 60px; opacity: 1; } }
$(function () { /* START OF DEMO JS - NOT NEEDED */ if (window.location == window.parent.location) { $('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>'); $('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/PbDb5'); $('#fullscreen').attr('title', 'Back To Bootsnipp'); } $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = $('#fullscreen').attr('href'); }); $('#fullscreen').tooltip(); /* END DEMO OF JS */ $('.navbar-toggler').on('click', function(event) { event.preventDefault(); $(this).closest('.navbar-minimal').toggleClass('open'); }) });

Related: See More

Questions / Comments:

Hi, I would like to ask you, how can I make the menu to be on the right of the page with the animation from left to right for the tools
Thank you.

Oussama GHOUAGH () - 7 years ago - Reply -1

This is very nice menu, but it shows me just menu icon and hover effect. but when I will try to open that no click event is fire? any idea?
Thanks in advance.

sidhdharthvora () - 7 years ago - Reply 0

excellent work.
As I can make the menu is aligned to the right and tool tips that are at the left of the menu.

Excuse my English is not very good

Andres () - 8 years ago - Reply 0

Hi Andres, I would like to ask you, how you made the menu to be on the right with the animation from left to right.
Thank you.

Oussama GHOUAGH () - 7 years ago - Reply 0

hello, great snippet! is there any way to keep the height of the menu list items to all the way down to 100% and to display same way no matter the screen size (no wide menu on small screen). Any idea?

Moise () - 8 years ago - Reply 0

HI, can someone please tell me how I can make the scroll effect. Right now there's no scrolling it just jumps to the section.

imran () - 9 years ago - Reply 0

I personally do not use jQuery as the @maxsurguy:disqus suggest. I like to use the class "animate"

This isn't to say that jQuery is not a better choice, to be honest it very well may be a better more supported choice. Using the class "animate" as I did in this example limits old browsers from seeing the animation and instead they get a jump in and out effect instead. If you were to use jQuery however you could prevent this and support more/older browsers.

mouse0270 () - 9 years ago - Reply 0

maxsurguy () - 9 years ago - Reply 0

don't work for me ...

Benjamin () - 9 years ago - Reply 0

Nice job, Robert... :)

Maria del Carmen () - 9 years ago - Reply 0

Could someone explain where to include the javascript file? My menu icon can highlight on hover but when clicked, no menu pops out

bryan () - 9 years ago - Reply 0

this is awesome! Great job, bud.

DimaNYC () - 9 years ago - Reply 0


Bang () - 9 years ago - Reply 0

This looks great, I would like to use this in a theme I'm working on and would like to ask for your permission, could you contact me? (borden882@yahoo.com) Thanks :)

Thomas () - 9 years ago - Reply 0

I am pretty sure you can use it because all featured snippets on Bootsnipp are MIT license, the author will be happy to know that their work is helping other people.

maxsurguy () - 9 years ago - Reply 0

How many browser supported it?

Mukhlesur () - 9 years ago - Reply 0

It appears to work on the latest versions of all major browsers. I do not it has some issues with touch screens though. With a little javascripting this can probably be avoided.

mouse0270 () - 9 years ago - Reply 0

Hi great snippet and like to use this...however on a android device it does not work.....the menu square is there....but when i touch it it turns green without showing the menu items below....any ideas?

Great job so far !!

Sandor Schippers () - 9 years ago - Reply 0

oooh never mind...it works :))

Sandor Schippers () - 9 years ago - Reply 0

If we change the click event to mouseover, it works as hover effect.My question is how can I close the menu when left navigation area ? Any help would be appreciated.Thank you.This is what i got so far http://bootsnipp.com/user/s...

Amit Kolambikar () - 9 years ago - Reply 0

You could attach a mouseout handler on the menu and collapse it on mouseout.

maxsurguy () - 9 years ago - Reply 0

I really love this snippet! I've got a little question about the behavior of the mouse. what should I change to reach the following action: Someone is clicking the square, the menu comes, he clicks the desired navigation point and after that, the menu minimize automatically? (Hope you understand my poor english ;-) )

abi () - 9 years ago - Reply 0

$('.navbar-minimal a').on('click', function() { $('.navbar-toggler').trigger('click'); });

mouse0270 () - 9 years ago - Reply 0

Cool! Thanks!

abi () - 9 years ago - Reply 0

Good work! Works on Linux (debian) Firefox

tryt () - 9 years ago - Reply 0

Works in Safari

jopo () - 9 years ago - Reply 0

works great, except for when you have a really long list of menu items, it doesn't scroll. Any tips?

Naema Baskanderi () - 9 years ago - Reply 0

So I think the only way to accomplish this without maybe adding some JS is to add a media query and use max height as the selector. You would than have to reformat the css to make it look like it was on a mobile because if you try to add an overflow to the desktop version you will not be able to the menu items names. pr instead of adding a media query you could just remove the one that comes with this and and max-height and overflow.

mouse0270 () - 9 years ago - Reply 0

I can look into this today. It was build for a demo page for a friend who only needed three links. I'll see what I can do for you. Please keep a watchful eye out and I'll try to post a fix for this.

mouse0270 () - 9 years ago - Reply 0

Thanks, but I just decided not to make it a fixed nav, which quickly solved the problem :)

I'm still new to this, if I wanted the menu to slide out horizontally instead of down, how would I do that?

Naema Baskanderi () - 9 years ago - Reply 0

Some thing like this http://bootsnipp.com/snippe... ?

mouse0270 () - 9 years ago - Reply 0

Almost :) I had figured that out. But I wanted all the list items to show in the same row as the toggle button.

Thanks so much for looking into it for me!!

Naema Baskanderi () - 9 years ago - Reply 0

http://bootsnipp.com/snippe... < (Updated) Might not be perfect, but should be able to give you a starting place.

mouse0270 () - 9 years ago - Reply 0

If it works for IE 11, then logically it should work for the major browsers, can anyone test it on Opera, Opera Mini, Android default browser and Safari?

Oussama Romdhane () - 9 years ago - Reply 0

works nicely in IE11

marco () - 10 years ago - Reply 0


Zebra Darts () - 10 years ago - Reply 0

Very nice! Worked for me on firefox.

ReliQ () - 10 years ago - Reply 0