CSS Sliding Door menu using only 1 image

Concept

The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.

 

HTML

 

Now, I add in a for each of the link to hold the left hand side of the background image.

CSS

1.

    – Unorder-List:

    ul {
    padding: 5px;
    margin: 10px 0;
    list-style: none;
    float: left;
    }

    ul li {
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0 10px;
    }

    ul li a {
    text-decoration: none;
    float:left;
    color: #999;
    cursor: pointer;
    font: 900 14px/22px "Arial", Helvetica, sans-serif;
    }

    ul li a span {
    margin: 0 10px 0 -10px;
    padding: 1px 8px 5px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
    }

    We need to make list-style as none because no image for any list within it. I use a float left here because I am going to use float left for the and also

  • . I am not going to define a width for it because this is just a sample.

    4. – mouse over action

    ul.blue li a.current, ul.blue li a:hover {
    background: url(images/blue.png) no-repeat top right;
    color: #0d5f83;
    }

    ul.blue li a.current span, ul.blue li a:hover span {
    background: url(images/blue.png) no-repeat top left;
    }


    Be Sociable, Share!

Leave a comment