Cool Animated Vertical Navigation Menu - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div id="nav"> <ul> <li><a href="#">Navigation element 1</a></li> <li><a href="#">Navigation element 2</a></li> <li><a href="#">Navigation element 3</a></li> <li><a href="#">Navigation element 4</a></li> <li><a href="#">Navigation element 5</a></li> </ul> </div>

#nav { margin: 50px auto; width: 250px; } #nav ul { list-style: none; display: inline-block; } #nav ul li{ font-family: "Lucida Sans"; font-size: 13px; margin-bottom: 1px; background: #003e55; background: -webkit-linear-gradient(top, #004660, #003e55); background: -moz-linear-gradient(top, #004660, #003e55); background: -ms-linear-gradient(top, #004660, #003e55); background: -o-linear-gradient(top, #004660, #003e55); background: linear-gradient(top, #004660, #003e55); padding: 10px 0 10px 0; } #nav ul li a{ padding: 10px 50px 10px 10px; text-decoration: none; color: white; text-shadow: 0px 1px 0px rgba(0,0,0,0.5); border-top: 1px solid #005879; border-bottom: 1px solid #001e2a; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #nav ul li a:hover { padding: 10px 42px 10px 18px; }

Tutorials Palace 17 December, 2018 No Comments

174 Views