css navigation

679 views
638 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
679
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

css navigation

  1. 1. CSS Navigationa couple of tricks
  2. 2. the basic ideahttp://css.maxdesign.com.au/listamatic/horizontal04.htm
  3. 3. <div id="navcontainer"> <ul id="navlist"> <li id="active”> <a href="#" id="current">Item one</a> </li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul></div>html
  4. 4. <style>#navlist{padding: 0 1px 1px;margin-left: 0;font: bold 12px Verdana, sans-serif;}#navlist li{list-style: none;margin: 0;border-top: 1px solid gray;display:inline;}#navlist li a{padding: 0.25em 0.5em 0.25em 0.75em;border-left: 1em solid#AAB; background: #CCD; text-decoration: none;}#navlist li a:link { color: #448; }#navlist li a:visited { color: #667; }#navlist li a:hover{border-color: #FE3;color: #FFF;background: #332;}</style>css
  5. 5. CSS SPRITESFASTER, CLEANER, SUPERSEXYCSS Sprites means using only one http image request to theserver to pull one image. This image is then moved aroundto render the desired result
  6. 6. sprites
  7. 7. sprites
  8. 8. sprites
  9. 9. stepping it up withbackground images
  10. 10. make an image sprite
  11. 11. <div id="nav"> <ul> <li class="home”><a href="#">Home</a></li> <li class="about”><a href="#">About Us</a></li> <li class="services”><a href="#">Services</a></li> <li class="contact”><a href="#">Contact Us</a></li> </ul></div>html
  12. 12. <style type="text/css">#nav a { display: block; height: 30px; text-indent: -9999px; background: url(lite_rollover.jpg) 0 0 no-repeat;}#nav li { list-style: none; float: left; }#nav li.home a { width:80px; background: url(lite_rollover.jpg) 0 0;}#nav li.about a { width:100px; background: url(lite_rollover.jpg) -110px 0 ;}#nav li.services a { width:100px; background: url(lite_rollover.jpg) -240px 0; }#nav li.contact a { width:140px; background: url(lite_rollover.jpg) -360px 0; }#nav li.home a:hover { background: url(lite_rollover.jpg) 0 -30px ; }#nav li.about a:hover { background: url(lite_rollover.jpg) -110px -30px ; }#nav li.services a:hover { background: url(lite_rollover.jpg) -240px -30px ; }#nav li.contact a:hover { background: url(lite_rollover.jpg) -360px -30px ; }</style>css
  13. 13. linksPerfect Full Page Background Imagehttp://css-tricks.com/perfect-full-page-background-image/How to Create a CSS Menu Using Image Spriteshttp://line25.com/tutorials/how-to-create-a-css-menu-using-image-spritesCSS Sprite Generatorshttp://css-sprit.es/http://spriteme.org/

×