Top Navigation using sprites


/ Published in: CSS
Save to your folder(s)

Makes inline navigation list utilizing image sprites for background.\r\nSprites image: http://extension.ucsd.edu/department/elp/images/TNSprites.jpg\r\n\r\nReference / original idea: Dave Shea at http://www.alistapart.com/articles/sprites/


Copy this code and paste it in your HTML
  1. #topnav {width:960px;height:50px;margin-top:0;background:url(images/topnavBG.jpg);}
  2. #topnav ul{width:759px;height:40px;background:url(images/TNSprites.jpg);margin:0;padding:0;position:relative;}
  3. #topnav ul li {margin:0;padding:0;list-style:none;position:absolute;top:0;background:none;}
  4. #topnav ul li, #topnav ul li a {height:40px;display:block;}
  5. #topnav ul li a {text-indent:-9000px;text-decoration:none;}
  6. #topnav ul li a:focus {-moz-outline-style:none;outline:none;}
  7.  
  8. #TNhome {left:0; width:71px;}
  9. #TNcourses {left:72px; width:154px;}
  10. #TNgeneralinfo {left:226px; width:157px;}
  11. #TNstudentlife {left:383px; width:107px;}
  12. #TNenroll {left:490px; width:118px;}
  13. #TNfaq {left:608px; width:151px;}
  14.  
  15. #TNhome a:hover {background: transparent url(images/TNSprites.jpg) 0px -40px no-repeat;}
  16. #TNcourses a:hover {background: transparent url(images/TNSprites.jpg) -72px -40px no-repeat;}
  17. #TNgeneralinfo a:hover {background: transparent url(images/TNSprites.jpg) -226px -40px no-repeat;}
  18. #TNstudentlife a:hover {background: transparent url(images/TNSprites.jpg) -383px -40px no-repeat;}
  19. #TNenroll a:hover {background: transparent url(images/TNSprites.jpg) -490px -40px no-repeat;}
  20. #TNfaq a:hover {background: transparent url(images/TNSprites.jpg) -608px -40px no-repeat;}
  21.  
  22. #TNhome a.active {background: transparent url(images/TNSprites.jpg) 0px -80px no-repeat;}
  23. #TNcourses a.active {background: transparent url(images/TNSprites.jpg) -72px -80px no-repeat;}
  24. #TNgeneralinfo a.active {background: transparent url(images/TNSprites.jpg) -226px -80px no-repeat;}
  25. #TNstudentlife a.active {background: transparent url(images/TNSprites.jpg) -383px -80px no-repeat;}
  26. #TNenroll a.active {background: transparent url(images/TNSprites.jpg) -490px -80px no-repeat;}
  27. #TNfaq a.active {background: transparent url(images/TNSprites.jpg) -608px -80px no-repeat;}

URL: http://extension.ucsd.edu/department/elp/index.cfm

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.