"css nav"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <body> <div class="main"> <h1>CSS SlideMenu</h1> <p>100% CSS Menu</p> <section class="grey"> <p class="section-title">Menu with icon</p> <div class="slidemenu"> <!--Item 1--> <input type="radio" name="menu" id="one" class="menu-one" checked> <label for="one"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/home.gif" alt=""/></i><span>Home</span></label> <!--Item 2--> <input type="radio" name="menu" id="two" class="menu-two"> <label for="two"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/about.gif" alt=""/></i><span>About</span></label> <!--Item 3--> <input type="radio" name="menu" id="three" class="menu-three"> <label for="three"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/folio.gif" alt=""/></i><span>Folio</span></label> <!--Item 4--> <input type="radio" name="menu" id="four" class="menu-four"> <label for="four"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/blog.gif" alt=""/></i><span>Blog</span></label> <!--Item 5--> <input type="radio" name="menu" id="five" class="menu-five"> <label for="five"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/contact.gif" alt=""/></i><span>Contact</span></label> <!--Slider Bar--> <div class="slider"> <div class="bar"></div> </div> <!--Slider Bar End--> </div> </section> <section class="grey"> <p class="section-title">Menu without icon</p> <div class="slidemenu"> <!--Item 1--> <input type="radio" name="menu1" id="one1" class="menu-one" checked> <label for="one1"><span>Home</span></label> <!--Item 2--> <input type="radio" name="menu1" id="two1" class="menu-two"> <label for="two1"><span>About</span></label> <!--Item 3--> <input type="radio" name="menu1" id="three1" class="menu-three"> <label for="three1"><span>Folio</span></label> <!--Item 4--> <input type="radio" name="menu1" id="four1" class="menu-four"> <label for="four1"><span>Blog</span></label> <!--Item 5--> <input type="radio" name="menu1" id="five1" class="menu-five"> <label for="five1"><span>Contact</span></label> <!--Slider Bar--> <div class="slider"> <div class="bar"></div> </div> <!--Slider Bar End--> </div> </section> <section class="grey"> <p class="section-title">Menu without icon in color</p> <div class="slidemenu blue"> <!--Item 1--> <input type="radio" name="menu2" id="one2" class="menu-one" checked> <label for="one2"><span>Home</span></label> <!--Item 2--> <input type="radio" name="menu2" id="two2" class="menu-two"> <label for="two2"><span>About</span></label> <!--Item 3--> <input type="radio" name="menu2" id="three2" class="menu-three"> <label for="three2"><span>Folio</span></label> <!--Item 4--> <input type="radio" name="menu2" id="four2" class="menu-four"> <label for="four2"><span>Blog</span></label> <!--Item 5--> <input type="radio" name="menu2" id="five2" class="menu-five"> <label for="five2"><span>Contact</span></label> <!--Slider Bar--> <div class="slider"> <div class="bar"></div> </div> <!--Slider Bar End--> </div> </section> </div> </body>
/*slidemenu */ .slidemenu { width:50%; margin:0 auto } .slidemenu:after { content:""; display:table; clear:both } .slidemenu label { width:20%; float:left; box-sizing:border-box; text-align:center; padding:15px; opacity:.5; -webkit-transition:all .15s ease-out; -moz-transition:all .15s ease-out; transition:all .15s ease-out; font-size:12px; font-weight:600 } .slidemenu label i { height:35px; width:35px; display:block; margin:0 auto 10px } .slidemenu label:hover { cursor:pointer; opacity:.7 } .slidemenu .slider { background:#ccc; height:5px; border-radius:5px; clear:both } .slidemenu .slider .bar { background:#333; height:5px; width:20%; border-radius:5px; margin-left:0; -webkit-transition:all .15s ease-in-out; -moz-transition:all .15s ease-in-out; transition:all .15s ease-in-out } .slidemenu input[type="radio"] { display:none } .slidemenu .menu-one:checked ~ .slider .bar { margin-left:0 } .slidemenu .menu-two:checked ~ .slider .bar { margin-left:20% } .slidemenu .menu-three:checked ~ .slider .bar { margin-left:40% } .slidemenu .menu-four:checked ~ .slider .bar { margin-left:60% } .slidemenu .menu-five:checked ~ .slider .bar { margin-left:80% } .slidemenu .menu-one:checked + label { opacity:1 } .slidemenu .menu-two:checked + label { opacity:1 } .slidemenu .menu-three:checked + label { opacity:1 } .slidemenu .menu-four:checked + label { opacity:1 } .slidemenu .menu-five:checked + label { opacity:1 } @media screen and (max-width: 780px) { .slidemenu { width:90% } } @media screen and (max-width: 780px) and (max-width: 500px) { .slidemenu label span { display:none } } @media screen and (max-width: 780px) and (max-width: 500px) { .slidemenu label { padding-bottom:0 } } /*Colors*/ .blue label span{ color: #0090da; } .blue .slider .bar{ background: #0090da; } /*Colors*/ .blue label span{ color: #5fae42; } .blue .slider .bar{ background: #5fae42; } /*Page*/ body{ font-family: helvetica, arial, sans-serif; margin: 0; padding: 0; } .main{ text-align: center; } .section-title{ text-transform: uppercase; color: #999; font-size: 12px; margin-bottom: 50px; } .grey{ background: #f4f4f4; border-top:1px dotted #ccc; padding: 50px 0; }

Related: See More

Navbar With Icons

Questions / Comments: