Xillent CSS rollover menu bar  

Xillent CSS rollover menu bar

The method used to create the orange menu bar seen on Xillent doesn’t use any lists, unlike many other CSS rollover menus found on the web. All that is used here is one containing div, and four smaller inner divs.

#menutab {
background: url(../images/menubar2.gif) no-repeat top;
height: 34px;
width: 900px;
color: #FFF;
margin: 20px auto;
font-size: 14px;
}

#menutab a { color: #FFF; text-decoration: none; }
#menutab a:hover { color: #FFF; text-decoration: none; }
#menutab a:visited { color: #FFF; text-decoration: none; }

#tab1 {
height: 34px;
width: 225px;
display: block;
float: left;
text-align: center;
margin: 0px;
padding: 0px;
}

#tab1 a:hover {
background:url(../images/menubar2.gif);
height: 34px;
width: 225px;
display: block;
background-position: 0px -34px;
}

#tab2 {
height: 34px;
width: 225px;
display: block;
float: left;
text-align: center;
}

#tab2 a:hover {
background:url(../images/menubar2.gif);
height: 34px;
width: 225px;
display: block;
background-position: -225px -34px;
}

#tab3 {
height: 34px;
width: 225px;
display: block;
float: left;
text-align: center;
}

#tab3 a:hover {
background:url(../images/menubar2.gif) no-repeat;
height: 34px;
width: 225px;
display: block;
background-position: -225px -34px;
}

#tab4 {
height: 34px;
width: 225px;
display: block;
float: left;
text-align: center;
}

#tab4 a:hover {
background:url(../images/menubar2.gif) no-repeat;
height: 34px;
width: 225px;
display: block;
background-position: -675px -34px;
}

There is only one image used, as well. It is the entire length of the menu bar that the links sit inside of. Take a look.

The top half of the image is the off state, and the lower half is the on state. We then change the background position of the divs so when you rollover each one, it moves the background image into place, giving it the hover effect. Below you will see the HTML.

<div id="menutab">
<div id="tab1"><a href="#"><div style="padding-top: 7px;">Web Design and Development</div></a></div>
<div id="tab2"><a href="#"><div style="padding-top: 7px;">Search Engine Optimization</div></a></div>
<div id="tab3"><a href="#"><div style="padding-top: 7px;">Application Programming</div></a></div>
<div id="tab4"><a href="#"><div style="padding-top: 7px;">E-Commerce</div></a></div>
</div>

There is an inline style set in each href to center the text in each div, but that could have been done in the external style sheet as well. Have fun!

• Filed under: CSS
•