Your SlideShare is downloading. ×
css navigation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

css navigation

512

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
512
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Navigationa couple of tricks
  • 2. the basic ideahttp://css.maxdesign.com.au/listamatic/horizontal04.htm
  • 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. <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. 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. sprites
  • 7. sprites
  • 8. sprites
  • 9. stepping it up withbackground images
  • 10. make an image sprite
  • 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. <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. 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/

×