• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
css navigation
 

css navigation

on

  • 577 views

 

Statistics

Views

Total Views
577
Views on SlideShare
577
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    css navigation css navigation Presentation Transcript

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