Sliding Door menus in CSS

Most of the times while coding in HTML & CSS, we come across a situation whereby we need the background of the menu to vary according to the text inside (the menu items). For an illustration, you can click this link here. Here, the menus on the top namely Most Recent, Popular & Random need to have a background that expands itself when the text (Most Recent, Popular & Random) size increases, in case the text is dynamic and gets fetched from the admin side. This menu designing technique is called Sliding-Door technique. Designing this kinda menu is really an interesting task. Though I have included the codes for this kinda menu with this blog, I guess this link here also has a nice explanation that can be understood once read carefully. I have used two images here, though I found that that its possible to implement this menu technique using a single background image too, though I am not quite sure if that is bereft of any browser compatibilty issue(s). Moreover this way that I have mentioned here is a much tested one and is the best of its kinds or even the best one, easy at the same time.

StyelSheet goes here :

position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(image_32.jpg) no-repeat;
height: 46px;
list-style: none;
.glossymenu li{
.glossymenu li a{
float: left;
display: block;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 39px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
.glossymenu li a b{
float: left;
display: block;
padding: 0 37px 0 0;
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(image_hover_left.png) no-repeat;
background-position: left;
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(image_hover_right.png) no-repeat right top;

The main body has codes like this :

<ul class=”glossymenu“>
<li><a href=”#”><b>Home</b></a></li>
<li><a href=”#”><b>About Riccineer</b></a></li>
<li><a href=”#”><b>Story</b></a></li>
<li><a href=”#”><b>Blog</b></a></li>
<li><a href=”#”><b>Gallery</b></a></li>
<li><a href=”#”><b>Testimonials</b></a></li>


Though this works fine in normal coding, while using WordPress or might be other CMSs (though I am not sure about others), using two attributes <a> & <b> in the menu items as above cannot be implemented this way. so we need to remove the  <b> attribute and accordingly make changes as required.

You can send me any issue that you come across using this technique.
Comments are really welcome and appreciated too.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: