The Blog

Implemented sliding door on one of my CSS work. Creating screenshots and writing it up is time consuming. In case anyone is interested here is a link regarding the concept: http://www.alistapart.com/articles/slidingdoors/

Here is a sample code that is doing the sliding door trick:

[sourcecode language=”css”]
#header{
overflow:hidden;
padding-bottom:30px;
}

#header ul {
float:right;
list-style:none;
margin-top:30px;
}

#header ul li {
float:left;
margin-left:10px;
padding: 10px 0 10px 12px;
}

#header ul li a {
color: #fff;
text-decoration:none;
font-size:20px;
padding: 10px 14px 10px 2px;
}

#header ul li.active {background:url(images/nav-left.jpg) no-repeat left;
}

#header ul li.active a {background: url(images/nav-right.jpg) no-repeat right;
}
[/sourcecode]