"menu"
Bootstrap 3.0.0 Snippet by ferdirhyme

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <div class="container"> <ul id="gn-menu" class="gn-menu-main"> <li class="gn-trigger"> <a class="gn-icon gn-icon-menu"><span>Menu</span></a> <nav class="gn-menu-wrapper"> <div class="gn-scroller"> <ul class="gn-menu"> <li class="gn-search-item"> <input placeholder="Search" type="search" class="gn-search"> <a class="gn-icon gn-icon-search"><span>Search</span></a> </li> <li> <a class="gn-icon gn-icon-download">Downloads</a> <ul class="gn-submenu"> <li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a> </li> <li><a class="gn-icon gn-icon-photoshop">Photoshop files</a> </li> </ul> </li> <li><a class="gn-icon gn-icon-cog">Settings</a> </li> <li><a class="gn-icon gn-icon-help">Help</a> </li> <li> <a class="gn-icon gn-icon-archive">Archives</a> <ul class="gn-submenu"> <li><a class="gn-icon gn-icon-article">Articles</a> </li> <li><a class="gn-icon gn-icon-pictures">Images</a> </li> <li><a class="gn-icon gn-icon-videos">Videos</a> </li> </ul> </li> </ul> </div> <!-- /gn-scroller --> </nav> </li> <li><a href="https://tympanus.net/codrops">Codrops</a> </li> <li><a class="codrops-icon codrops-icon-prev" href="https://tympanus.net/Development/HeaderEffects/"><span>Previous Demo</span></a> </li> <li><a class="codrops-icon codrops-icon-drop" href="https://tympanus.net/codrops/?p=16030"><span>Back to the Codrops Article</span></a> </li> </ul> <header> <h1>Google Nexus Website Menu <span>A sidebar menu as seen on the <a href="https://www.google.com/nexus/index.html">Google Nexus 7</a> page</span></h1> </header> </div> <!-- /container --> <script> $('.gn-icon-menu').hover(function(){ $('.gn-menu-wrapper').toggleClass('gn-open-part'); }); $('.gn-menu-wrapper').hover(function(){ $(this).toggleClass('gn-open-all'); }) </script>
@charset "UTF-8"; *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .gn-menu-main { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 60px; font-size: 13px; } .gn-menu-main a { display: block; height: 100%; color: #5f6f81; text-decoration: none; cursor: pointer; } .gn-menu-main a:hover { background-color: #5f6f81; color: #fff; } .gn-menu-main > li { display: block; float: left; height: 100%; border-right: 1px solid #c6d0da; text-align: center; } .gn-menu-main > li > a { padding: 0 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; } .gn-menu-main > li :after { display: table; clear: both; content: ''; } .gn-menu-main li.gn-trigger { position: relative; width: 60px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .gn-menu-main > li:last-child { float: right; border-right: none; border-left: 1px solid #c6d0da; } .gn-menu-main, .gn-menu-main ul { margin: 0; padding: 0; background-color: #fff; color: #5f6f81; list-style: none; text-transform: none; font-weight: 300; font-family: Arial, sans-serif; line-height: 60px; } .gn-menu-wrapper { position: fixed; top: 60px; bottom: 0; left: 0; overflow: hidden; width: 60px; border-top: 1px solid #c6d0da; background-color: #fff; transform: translateX(-60px); transition: transform 0.3s, width 0.3s; } .gn-scroller { position: absolute; overflow-y: scroll; width: 370px; height: 100%; } .gn-menu { border-bottom: 1px solid #c6d0da; text-align: left; font-size: 18px; } .gn-menu li:not(:first-child), .gn-menu li li { box-shadow: inset 0 1px #c6d0da; } .gn-submenu li { overflow: hidden; height: 0; transition: height 0.3s; } .gn-submenu li a { color: #c1c9d1; } input.gn-search { position: relative; z-index: 10; padding-left: 60px; outline: none; border: none; background: transparent; color: #5f6f81; font-weight: 300; font-family: 'Lato', Arial, sans-serif; cursor: pointer; } input.gn-search::placeholder { color: #5f6f81; } .gn-menu-main a.gn-icon-search { position: absolute; top: 0; left: 0; height: 60px; } .gn-icon::before { display: inline-block; width: 60px; text-align: center; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'FontAwesome'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .gn-icon-help::before { content: ""; } .gn-icon-cog::before { content: ""; } .gn-icon-search::before { content: ""; } .gn-icon-download::before { content: ""; } .gn-icon-photoshop::before { content: ""; } .gn-icon-illustrator::before { content: ""; } .gn-icon-archive::before { content: ""; } .gn-icon-article::before { content: ""; } .gn-icon-pictures::before { content: ""; } .gn-icon-videos::before { content: ""; } .gn-icon span { width: 0; height: 0; display: block; overflow: hidden; } .gn-icon-menu::before { /*margin-left: -15px; vertical-align: -2px; width: 30px; height: 3px; background: #5f6f81; box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81; content: '';*/ margin-left: -30px; content: '\f03a'; } .gn-icon-menu:hover::before, .gn-icon-menu.gn-selected:hover::before { /*background: white; box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white;*/ margin-left: -30px; content: '\f03a'; } .gn-icon-menu.gn-selected::before { background: #5993cd; box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd; } .gn-menu-wrapper.gn-open-all, .gn-menu-wrapper.gn-open-part { transform: translateX(0px); } .gn-menu-wrapper.gn-open-all { width: 340px; } .gn-menu-wrapper.gn-open-all .gn-submenu li { height: 60px; } .container > header, .codrops-top { color: #fff; font-family: 'Lato', Arial, sans-serif; } .container > header { margin: 0 auto; padding: 12em 2em; padding-left: 370px; background: rgba(0, 0, 0, 0.05); } .container > header a { color: #566473; text-decoration: none; outline: none; } .container > header a:hover { color: #4f7bab; } .container > header h1 { font-size: 3.2em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 55%; color: #74818e; padding: 0 0 0.6em 0.1em; } body { background: #34495e; }

Related: See More


Questions / Comments: