Submit your widget

CSS Sliding Door menu using only 1 image

Created 13 years ago   Views 7949   downloads 1718    Author n/a
CSS Sliding Door menu using only 1 image
View DemoDownload
Share |


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.




<ul class="blue">
    <li><a href="#" title="home">home</a></li>
    <li><a href="#" title="products">products</a></li>
    <li><a href="#" title="blog">blog</a></li>
    <li><a href="#" title="contact">contact</a></li>



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

    <li><a href="#" title="home" class="current"><span>home</span></a></li>
    <li><a href="#" title="products"><span>products</span></a></li>
    <li><a href="#" title="blog"><span>blog</span></a></li>
    <li><a href="#" title="contact"><span>contact</span></a></li>




1. <ul> – 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;
 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)*/


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 <span> and also <li>. I am not going to define a width for it because this is just a sample.

4. <Hover> – mouse over action li a.current, li a:hover {
 background: url(images/blue.png) no-repeat top right;
  color: #0d5f83;
} li a.current span, li a:hover span {
 background: url(images/blue.png) no-repeat top left;