/ Published in: CSS
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/
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
#topnav {width:960px;height:50px;margin-top:0;background:url(images/topnavBG.jpg);} #topnav ul{width:759px;height:40px;background:url(images/TNSprites.jpg);margin:0;padding:0;position:relative;} #topnav ul li {margin:0;padding:0;list-style:none;position:absolute;top:0;background:none;} #topnav ul li, #topnav ul li a {height:40px;display:block;} #topnav ul li a {text-indent:-9000px;text-decoration:none;} #topnav ul li a:focus {-moz-outline-style:none;outline:none;} #TNhome {left:0; width:71px;} #TNcourses {left:72px; width:154px;} #TNgeneralinfo {left:226px; width:157px;} #TNstudentlife {left:383px; width:107px;} #TNenroll {left:490px; width:118px;} #TNfaq {left:608px; width:151px;} #TNhome a:hover {background: transparent url(images/TNSprites.jpg) 0px -40px no-repeat;} #TNcourses a:hover {background: transparent url(images/TNSprites.jpg) -72px -40px no-repeat;} #TNgeneralinfo a:hover {background: transparent url(images/TNSprites.jpg) -226px -40px no-repeat;} #TNstudentlife a:hover {background: transparent url(images/TNSprites.jpg) -383px -40px no-repeat;} #TNenroll a:hover {background: transparent url(images/TNSprites.jpg) -490px -40px no-repeat;} #TNfaq a:hover {background: transparent url(images/TNSprites.jpg) -608px -40px no-repeat;} #TNhome a.active {background: transparent url(images/TNSprites.jpg) 0px -80px no-repeat;} #TNcourses a.active {background: transparent url(images/TNSprites.jpg) -72px -80px no-repeat;} #TNgeneralinfo a.active {background: transparent url(images/TNSprites.jpg) -226px -80px no-repeat;} #TNstudentlife a.active {background: transparent url(images/TNSprites.jpg) -383px -80px no-repeat;} #TNenroll a.active {background: transparent url(images/TNSprites.jpg) -490px -80px no-repeat;} #TNfaq a.active {background: transparent url(images/TNSprites.jpg) -608px -80px no-repeat;}
URL: http://extension.ucsd.edu/department/elp/index.cfm