Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

css navigation

742 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

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/

×