Loading ...
Build a CSS Menu with Rollovers
This article is for people who have little to no experience with CSS. I will explain very detailed which codes to use and how to use them. At the end of this tutorial, you can code yourself this rollover menu, completed in CSS and HTML.
!tip ALWAYS check your code on faults. You can validate CSS and (x)HTML.
!tip Use tabs and space to organize your codes (wordpress wouldn’t allow me to). You can download the files (with organization) below.
We’ll start. First, you should create 2 files. One called rollovers.css and the other one rollover.html. Those files should be empty. The next step is to open up rollover.html. In this file, our content will be stored. In the file, past these codes:
1
Those codes will tell your browser everything it needs to know. It is written in XHTML 1.0, so your browser will render your webpage the XHTML 1.0- way. You can read more information about DOCTYPEs here.
We are ready to start with the rollover menu. First, we will only code the structure. If we have completed that part, we can start changing the style.
So, you want the codes. No, I’ll first tell you something about the structure. It may sound strange when you hear this for the first time, but rollover menus are built from Unordered lists. When I first heard this I thought it wasn’t possible. I thought CSS could never change the expression of a list that much. But CSS can!
Everything that is content will need to be coded between the <body> </body> area. That’s where we start typing too. We’ll start with a list, which you can call for with the <ul></ul> attribute. For every item you want add, you need a <li></li> between the <ul> attribute. Example:
1 2 3 4 5 6 7
<ul>
<li>item</li>
<li>item2</li>
</ul>You can add as many items as you want, but maybe it’s easier to keep it two or three items at this time. When we are finished, there’s enough room for more items.
In a rollover menu, there need to be clickable links. All you have to do is add a <a href=”"> before and a </a> after your item.
1 2 3 4 5 6 7
<ul>
<li><a href="http://www.divitodesign.com/wp-admin/item.html">item</a></li>
<li><a href="http://www.divitodesign.com/wp-admin/item2.html">item2</a></li>
</ul>Your menu structure is finished! The only thing we have to do in the .html file is to make sure the right style file is included. We do this with an extern CSS file. You have to include this in the rollovers.html through the following codes.
1
As you can see, we include the rollovers.css as the extern CSS file.
Now, save the file and see how it looks. We will now start with the CSS in the rollover.css file!
CSS
Open up your CSS file and make sure it is empty. In CSS, you style existing attributes like <ul> , <body> and <font> as the way you write them. Example:
1 2 3 4 5
ul {
color:#fff;
}With this very simple code, you style all the ul> attributes in the webpage. You can add a lot of style-attributes to every attribute you would like to style.
If you want to style a link attribute inside a ul> attribute, this is the way you should do it.
1 2 3 4 5
ul a {
color:#fff;
}When you take a look on your rollover.html file, you see that your menu has this structure:
1 2 3 4 5
<ul>
<li><a></a></li>
</ul>As you can see, the a> attribute is inside the li>, and the li> is inside the ul> attribute. To style the links inside your menu, you have to call for it in your CSS file like this. This order only.
1 2 3 4 5
ul li a{
color:#fff;
}And, because we will need to style all the ‘menu items’, we need to style ul li too. Take a look below for some basic style on the ul, ul li and ul li a styles. Explanation is beneath the codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
ul{
margin: 0;
padding: 0;
font: 13px 'Lucida Grande', Arial, sans-serif;
list-style-type: none;
}
ul li{
display: inline;
}
ul li a{
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #b0f664;
border:1px solid #8bda35;
}Let’s start with the ul attribute. Margin is the distance outside the list, padding is inside the box. Font is just the font used, size of the font etc. Now an attribute you might have never heard of. It’s called list-style-type and it defines what should be shown before every item. When you look at your default list-style-type, you’ll notice there are black dots before every item. This is something we do not want on our menu, so we set its value to none. If you want your whole menu to show something, like font size, you can change it all in this ul attribute.
The ul li attribute. I have not much to tell you about this one. Only thing I change from the default version is the display value. When you look at your default list, you see the items are beneath each other. This is something we don’t want with the menu we are making. When you want a vertical menu, you should not change this value.
Now, take a look at the ul li a style values. In this style, you can change everything you see when you don’t roll over the menu with your mouse. You see I wanted a border, a background-color, a text color and some space between the text and the border, called by with padding. At default, a link has a blue color, with an underline. I deleted the underline by changing text-decoration to none.
Please save your file and see what changed. You could also save it after you have added a single line, so you know which things changes with every aspect you add.
To finish this menu, you might want a different background color when you roll over an item. You can do this with changing the ul li a:hover attribute. Take a look below for the codes.
1 2 3 4 5 6 7
ul li a:hover{
background-color: #ccf69f;
border:1px solid #a8e765;
}You don’t have to re-type all the things you don’t want to change on the rollover. Only the things, like background-color and border, you would like to change goes here.
We are finished! This is the easiest way to make a rollover menu. Best of all, this is written the standard way! I love standards, and I hope when you have read this tutorial, you think the same.
If you want the final code all together, please download the files below and enjoy!
Download (right mouse > save as): rollover.html and rollover.css
Other Tutorials
You might be interesting in the horizontal dropdown version and vertical version too. Read them as well!
Nice tutorial! Looking forward to the next one.
goe gedaan zegge we dan
great tut..
waiting for the next one…
can you guide me in a making a navigation like http://www.tech.co.uk
@niceone – bedankt
@shashank – Thanks. I think I’ll write an article on that navigation. Keep visiting!
Great tutorial looking forward to next one, thanks again you make it a pleasure to learn.
Hi, nice tutorials you’ve got there. I have learned a lot and as you said, I realy like the old way…
I will rebuild some of my webpages with the help of css files in the near future so tnx again…
Best wishes
Robert
Thank you all for your nice comments. I really appreciate it when people give them!
@Robert – If you do rebuilt them, use my ‘Search Engine Optimizing’ article I release soon too!
very nice and easy
Great tutorial mann
i got an assignment for tafe/uni and gotta use them. it will help alot
CHeers
very nice and helpful tips !!
Thanks
Hi, Very informative tutorial. I really learned a lot.
Could you please publish the drop down menu tutorial. Thats the one I really need.
Keep up the good work.
Cheers
Dear sir,
I have little knowledge about html.I see the html code, only the head tag is closed but it is not opened in rollover.html file.
I want to know it is required or not.If not than pls expain and also if possible than tel me about more tags.
Take a good look at the source and you’ll see the ‘head’ tag is opened in the rollover.html file as well.
Adding ‘head’ tags are required for validation, and the tag gives your page important information.
[...] I’ll continue on a topic I wrote about some time ago. A CSS menu. This time we will build a vertical CSS menu with rollover submenu’s. This menu will be [...]
Drop down menus ASAP please.
Plus how to place them dynamically on a page. For example, in a table header.
Thank you so much
Vertical Menu;
http://www.divitodesign.com/blog/2008/01/vertical-css-menu-with-a-behavior-file/
[...] I’ll continue on a topic I wrote about some time ago. A CSS menu. This time we will build a vertical CSS menu with rollover submenu’s. This menu will be [...]
[...] A CSS menu with rollovers. My article on their site Start using sIFR on your website! My article on their site [...]
This is nice but, I am Looking for a drop down css menu
Vertical Dropdown menu can be found here; http://www.divitodesign.com/2008/01/vertical-css-menu-with-a-behavior-file/
[...] this article, you will learn how to create a mouseclick effect, using only CSS! It’s like the hover effect, but now the effect shows up when you click on an item. I also show you how to add a preloader to [...]
Great post and I really like the look of this website… you got some mad skillz.
Simple, Clean, Effective, Thanks for the tutorial!
Really nice tutorial, very in depth explanation and easy to understand. Thanks very much
Thank you so much for the tutorial. Its clear and concise and easy to understand. I will be back here for more.
My work site had images for menu items that used javascript to create a rollover effect.
I’ve changed it now to use CSS – far more standards-compliant.
So simple and easy
Thank you. I’ll recommend your site to my partners
Thanks for the tutorial.
Very useful for a beginner
Thankful for the review.
A nice site for a beginner like me
Thank you for the tutorial.
Very easy to understand!
thank you
You laid it all out perfectly, step-bystep, can’t ask for much more than that.
Thank you so much for the easy to understand way of tutorial.
Thank You for the nice article..You have laid down step by step points so there is no more queries to ask about it.i have started following ur points.
This is exactly what I was looking for. This is a great tutorial on css menus. I really appreciate you taking the time to put it together.
Just to say – I found this really useful – since I first saw this post I’ve used CSS menus on my sites, so thanks very much!
Really, i am fully impress with this post.
Thank you writer for sharing this important post.
Indian business directory
Hi, I like your blog
Great blog!