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 { } |
HTML
|
1 |
Comments are closed.