HTML and CSS has its own different world. As a developer we should not take both lightly. The best examples of HTML are marque tag, with this tag without using single line of javascript you can create scrolling effect. isn’t it amazing ? Same with CSS blink effect.
In this tutorial we are going to create a cool horizontal navigation menu using only HTML and CSS, NO javascript NO images.
and here’s CSS
In this tutorial we are going to create a cool horizontal navigation menu using only HTML and CSS, NO javascript NO images.
See how simple it is to turn simple LI in to beautiful navigation menu 🙂
Lets start with HTML wireframe
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="menu-holder"> <ul id="nav"> <li class="first"><a href="https://amitpatil.me">Home</a></li> <li><a href="https://amitpatil.me/category/ajax/">Ajax Tutorials</a></li> <li><a href="https://amitpatil.me/category/css-tricks/">CSS</a></li> <li><a href="https://amitpatil.me/category/greasemonkey/">Greasemonkey</a></li> <li><a href="https://amitpatil.me/category/html-scripts/">HTML</a></li> <li><a href="https://amitpatil.me/category/jquery-scripts/">Jquery</a></li> <li><a href="https://amitpatil.me/category/jquery-plugins/">Jquery Plugins</a></li> <li><a href="https://amitpatil.me/category/php-scripts/">PHP</a></li> </ul> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.menu-holder { border-bottom: 1px solid #FF7700; border-top: 1px solid #FFB87A; background: #FF7700; -moz-border-radius : 5px; } #nav { list-style: none; background: #FF7700; margin:auto; padding:0px; border-left: 1px solid #FF8F3E; height: 35px; width: 600px; } #nav li { float: left; height: 35px; border-right: 1px solid #C15200; text-align: center; } #nav li a{ color : white; display:block; border-right: 2px solid #FF8F3E; line-height: 35px; padding: 0 10px 0 10px; text-decoration : none; font-family:arial,sans-serif; font-size: 13px; outline: none; border-right: 1px solid #FF8F3E; } #nav li.first { border-left: 1px solid #C15200; } #nav li a:hover{ background : #FFBB80; } |
