"Svbtle Inspired Menu"
Bootstrap 3.1.0 Snippet by HyacintheHamon

<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="animate"> <ul> <li> <a href="#">English</a> </li> <li> <a href="#">한국의</a> </li> <li> <a href="#">日本人</a> </li> </ul> <div class="divider"></div> </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


Questions / Comments: