jQuery Tutorial: Create jQuery and CSS based Awesome navigation.
[ad#co-4]
If you have less space on site home page and you need a simple but awesome jquery based navigation then you came in right place. I got this idea from learning jquery and stylized my navigation using CSS.
CSS
|
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 41 42 43 44 45 46 47 48 |
.button, .button:visited { background: #222 url(overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer } /* TAB MENUE */ .tab-nav { width: 1000px; margin-top:0px; overflow: hidden; float:right; } .tab-nav ul { width: 2900px; margin-left: 960px; padding-left: 0; margin-top:0px; list-style-type: none; } .tab-nav li { float: left; margin-top:3px; clear: left; } .tab-nav a.Arrow { display: block; width: 40px; height: 33px; float: left; background:url(dash_img.gif) top left no-repeat; text-align: center; text-decoration: none; } .tab-nav a.expanded { } |
[ad#co-2]
HTML
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<div id="tab-nav-3" class="tab-nav"> <ul> <li> <a href="#" class="Arrow"> </a> <ul> <li> <div align="right" style="float:right; margin-right:7px;"> <span> <a href="http://www.99points.info/" class="small button TabAddNew"> 99 Points </a> </span> </div> </li> <li> <div align="right" style="float:right; margin-right:7px;"> <span> <a href="http://www.99points.info/" class="small button TabAddNew"> PHP </a> </span> </div> </li> <li> <div align="right" style="float:right; margin-right:7px;"> <span> <a href="http://www.99points.info/" class="small button TabAddNew"> jQuery </a> </span> </div> </li> <li> <div align="right" style="float:right; margin-right:7px;"> <span> <a href="http://www.99points.info/" class="small button TabAddNew"> Codeigniter </a> </span> </div> </li> <li> <div align="right" style="float:right; margin-right:7px;"> <span> <a href="http://www.99points.info/" class="small button TabAddNew"> Tutorials </a> </span> </div> </li> </ul> </li> </ul> </div> |
Recommended WordPress Themes Store
