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


Published on

Published in: Design
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

css navigation

  1. 1. CSS Navigationa couple of tricks
  2. 2. the basic idea
  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 a { width:100px; background: url(lite_rollover.jpg) -240px 0; }#nav 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 a:hover { background: url(lite_rollover.jpg) -240px -30px ; }#nav a:hover { background: url(lite_rollover.jpg) -360px -30px ; }</style>css
  13. 13. linksPerfect Full Page Background Image to Create a CSS Menu Using Image Sprites Sprite Generators