"Svbtle Inspired Menu"
Bootstrap 3.1.0 Snippet by mouse0270

Post to Facebook Tweet this

<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 ----------> <div class="container"> <div class="row"> <div class="[ col-xs-12 col-sm-6 col-md-4 ]"> <h2>SVBTL MENU</h2> <span class="console"></span> <p>So When I came across this site called <a href="https://svbtle.com">Svbtle</a> today (June 25th, 2014) and before even reading the article that brought me to the site I feel in love with the design. It was so simple it was beautiful. I wanted to recreate the menu so here is my attempt.</p> </div> </div> </div> <nav class="animate"> <p>Mouse0270 created this snippet on <strong>Bootsnipp</strong> network.</p> <ul> <li> <a href="https://twitter.com/mouse0270">@mouse0270 on twitter</a> </li> <li> <a href="https://facebook.com/rem.mcintosh">Learn More about me on Facebook</a> </li> <li> <a href="http://bootsnipp.com/mouse0270">Snippets</a> </li> <li> <a href="https://github.com/mouse0270">Projects</a> </li> <li> <a href="http://bootsnipp.com/user/snippets/www.linkedin.com/in/remcintosh/">Résumé</a> </li> </ul> <div class="divider"></div> <h4>Thanks To</h4> <ul> <li> <a href="https://twitter.com/BootSnipp">@BootSnipp on twitter</a> <a href="https://twitter.com/Svbtle">@Svbtle on twitter</a> </li> </ul> </nav> <div class="nav-controller"> <span class="[ glyphicon glyphicon-chevron-down ] controller-open"></span> <span class="[ glyphicon glyphicon-remove ] controller-close"></span> </div>
@import url(http://fonts.googleapis.com/css?family=Anton|Maven+Pro:500,700); body { font-family: 'Maven Pro', sans-serif; } h2 { font-family: 'Anton', sans-serif; text-transform: uppercase; } .animate { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .nav-controller { position: fixed; top: 15px; right: 15px; padding: 5px 6px 1px; border: 5px solid rgb(51, 51, 51); color: rgb(51, 51, 51); border-radius: 25px; font-size: 12pt; cursor: pointer; z-index: 300; } nav ~ .nav-controller > .controller-open { display: inline-block; } nav ~ .nav-controller > .controller-close { display: none; } nav.focus ~ .nav-controller > .controller-open { display: none; } nav.focus ~ .nav-controller > .controller-close { display: inline-block; } nav { position: fixed; top: 0px; right: -100%; padding-top: 65px; padding-bottom: 15px; height: 100%; max-width: 200px; text-align: right; background-color: rgb(255, 255, 255); box-shadow: -3px 0px 3px 0px rgba(160, 160, 160, 0.30); z-index: 100; overflow: auto; } nav.focus { right: 0px; } nav > .divider { content: ''; border-bottom: 1px solid rgb(230, 230, 230); max-height: 1px; overflow: hidden; margin: 15px 0px; } nav > h4, nav > p, nav > ul { padding: 0px 10px; } nav > h4 { font-family: 'Anton', sans-serif; } nav > ul { list-style: none; } nav > ul > li { margin: 5px 0px; } nav > ul > li > a { color: rgb(190, 190, 190); } nav > ul > li > a:hover { font-size: 1.1em; font-weight: 700; color: rgb(51, 51, 51); text-decoration: none; }
$(function() { $('nav, .nav-controller').on('click', function(event) { $('nav').toggleClass('focus'); }); $('nav, .nav-controller').on('mouseover', function(event) { $('nav').addClass('focus'); }).on('mouseout', function(event) { $('nav').removeClass('focus'); }) })

Related: See More

BLK• Design System
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments:

I have a problem when adding Select2 https://select2.github.io, Select2 not perform well, There is a solution?

Jogja () - 9 years ago - Reply 0

Bravo

Bang () - 10 years ago - Reply 0

Seems slow to respond for me.

astralislux () - 10 years ago - Reply 0

Great!! I got to use on my project. =)

Roberto Vieira () - 10 years ago - Reply 0

Better use " nav.animate { " instead of just " nav { " in the css file on line 49. This way you can use other standard navbars, too ;)

Mattias Brennecke () - 10 years ago - Reply 0

Nice, but mystery menus are not really a good idea in the long-run.

astralislux () - 10 years ago - Reply 0

Absolutely agree. Svbtle is not a very good site in terms of user design.

astralislux () - 10 years ago - Reply 0

I just noticed that I think I agreed with myself. =D

astralislux () - 10 years ago - Reply 0

Great ! Too Bad It's not working on my mobile Browser (HTC One M8)

Alex () - 10 years ago - Reply 0

I think this snippet hates me. Does the menu open when you click on the link but not close or does it not even open?

mouse0270 () - 10 years ago - Reply 0

It works on my galaxy note 3. But I do have to hold down the icon for about 1.5 seconds first. It hides correctly when tapping outside the vmenu

Matthew Hailwood () - 10 years ago - Reply 0

So I need to buy a mac and an android... Website development is far from cheap. haha. Thank you everyone who has been letting me know what is wrong with this. I am happy to fix the issues to the best of my ability.

mouse0270 () - 10 years ago - Reply 0

It doesn't even show up

Alex () - 10 years ago - Reply 0

I am wondering if this has anything to do with me using a fixed div within a fixed div? Maybe it is the same issue I am getting from safari on a mac. Does it work now?

mouse0270 () - 10 years ago - Reply 0

The menu does not appear at all (no icon either) in Safari Version 8.0 (10538.43.40). I had to load Chrome 37 to see it.

tjedison () - 10 years ago - Reply 0

Are you using a mac?

mouse0270 () - 10 years ago - Reply 0

Safari is only on the Mac. 8.0 is the new beta version in Yosemite.

tjedison () - 10 years ago - Reply 0

Safari is also available for windows (http://support.apple.com/do.... I keep getting reports of this issue, but it seems to work on the safari I have access to. I do not own a mac so I am not sure how to debug and fix the issue. Sorry.

mouse0270 () - 10 years ago - Reply 0

saucelabs.com is your friend - or one of their competitors

abean () - 9 years ago - Reply 0

I have a hard time to justify paying for app that allows me to test freely shared code snippets. I would love to offer support for browsers and systems I don't own. I have used apps like when I use professionally designed apps, but my primary job is not website design and mostly do this out of interest. I wish I found someone who offered a similar service for free, but I understand why they dont.

mouse0270 () - 9 years ago - Reply 0

In a lot of ways I think this menu is actually better than the one you tried to mimick, I find this a lot more smooth and natural to work with.

Matthew Hailwood () - 10 years ago - Reply 0

Thank you! That is amazing to hear.

mouse0270 () - 10 years ago - Reply 0

Cool snippeted thanks =)

Bruno Seixas () - 10 years ago - Reply 0