Posts Tagged ‘menu’

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 :

.glossymenu{
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{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
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>
</ul>

 

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.

Advertisements