Skip to content

CSS step navi

von dennis

>>> Demo (new window)

HTML:

        <ul id="steps">                
            <li class="first-child"><a class="active" href="#">first step</a></li>
            <li><a href="#">second step</a></li>
            <li><a href="#">[...]</a></li>
            <li class="last-child"><a href="#">last step</a></li>            
        </ul>

CSS:

        #steps { list-style:none; float:left; height:40px; margin:0; padding:0; }
        #steps li { margin-right:-17px; float:left; }
        #steps li a { background:url(img/steps.png) top left no-repeat; display:block; width:142px; height:32px; padding-top:8px; text-decoration:none; color:#eee; font-size:14px; text-align:center; }
        #steps li a:hover, #steps li a.active { background-position: 0px -50px; color:#252525 !important; }
        #steps li.first-child a { background-position: 0px -100px; }
        #steps li.first-child a:hover { background-position: 0px -150px; }
        #steps li.first-child a.active { background-position: 0px -150px; }
        #steps li.last-child { margin-right:0; }
        #steps li.last-child a { width:135px; background-position: 0px -200px; }
        #steps li.last-child a:hover { background-position: 0px -250px; }
        #steps li.last-child a.active {background-position: 0px -250px; }

Background-Image:
Sprite

Aus → CSS

No comments yet

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS