As a few of you may already know I tend to try to avoid images in my designs where ever possible. I do this to avoid unnecessary HTTP calls and bandwidth usage. It is not always possible as some browsers may not like it so where possible we should then have a fallback method to render the effect as close as possible. In this tutorial I will show one method for creating a menu that does not use images unless it encounters an old browser that does not support the CSS3 used to create our menu. This way no matter what browser views the page our menu will look at the same. Only difference is newer browser will load the page faster with minimal resource costs to your client.
First step is to create the basic menu on your page in HTML. To so this we simply create a list.
<div id="verticalmenu">
<ul>
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a></li>
<li><a href="#">menu item 3</a></li>
<li><a href="#">menu item 4</a></li>
<li><a href="#">menu item 5</a></li>
</ul>
</div>
now we need to remove the under lines and bullet points from the list. And also add a set height height and width to our menu buttons, this is done in the ul li a tag. We also position our text in here and set text decoration to none so that we remove the under line. The list bullets are removed in ul tag.
#verticalmenu ul li a {
display: block;
height: 32px;
margin-bottom: 5px;
line-height: 32px;
text-decoration: none;
padding-left: 10px;
width: 200px;
float: left;
}
ul {
list-style-type: none;
}We will now add a gradient to the background and round the corners off by adding the following to #verticalmenu ul li a
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
-moz-border-radius: 15px;
border-radius: 15px;Create an image for the fallback-gradient file above and replace it on that line. This way if a browser cant render gradients that image will become the background instead. Those browsers that can render gradients will NOT load the image saving you bandwidth and HTTP calls.
Your menu buttons are now set up for their normal state. Hover we want them to change color when hovered over. So copy and paste another copy of #verticalmenu ul li a into your css file and rename it to #verticalmenu ul li a:hover .
Now change the colors in the gradient to the colors you want for your hover effect. Create another image for the backup gradient image in this new color and place it in the code too. For example:
#verticalmenu ul li a:hover {
display: block;
height: 32px;
margin-bottom: 5px;
line-height: 32px;
text-decoration: none;
padding-left: 10px;
width: 200px;
list-style-type: none;
/* fallback/image non-cover color */
background-color: #FFFFFF;
/* fallback image */
background-image: url(images/fallback-gradient-hover.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #ffffFF);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffFF), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #ffffFF);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #ffffFF);
-moz-border-radius: 15px;
border-radius: 15px;
color: #FFF;
}Your finished CSS should like something like this:
#verticalmenu {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
width: 210px;
margin-right: 12px;
margin-left: 15px;
float: left;
}
ul {
list-style-type: none;
}
#verticalmenu ul li a {
display: block;
height: 32px;
margin-bottom: 5px;
line-height: 32px;
text-decoration: none;
padding-left: 10px;
width: 200px;
list-style-type: none;
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);
-moz-border-radius: 15px;
border-radius: 15px;
}
#verticalmenu ul li a:hover {
display: block;
height: 32px;
margin-bottom: 5px;
line-height: 32px;
text-decoration: none;
padding-left: 10px;
width: 200px;
list-style-type: none;
/* fallback/image non-cover color */
background-color: #FFFFFF;
/* fallback image */
background-image: url(images/fallback-gradient-hover.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #ffffFF);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffFF), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #ffffFF);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #ffffFF);
-moz-border-radius: 15px;
border-radius: 15px;
color: #FFF;
}Unfortunately WordPress won’t let me show you what the finished product looks like in this post without breaking all the menus down the side of this page (even with inline CSS). So you will have to copy the above code to a text editor and try it for yourself.
When you hover over a button it will change colors. It isn’t very pretty as its just a quick demonstration and you need to work with the colors that work for you.
Articles that follow on from here: