Loading ...
Vertical CSS Menu With a ‘Behavior’ File.
Today, 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 written in CSS and HTML, and will use a so-called ‘behavior’ file. What are we going to produce? The menu I’ve made can be found as an example and as .rar file to download below.
Vertical CSS menu – Download
Vertical CSS menu – Example
Horizontal Menu
You might be interesting the horizontal version too, I have wrote an article about that. Read it here.
We start with the structure
To give you a better idea of the structure we’ll use, I’ve made a little image explaining this. We start with an <ul> tag (blue). Inside this tag, we’ll add an <li> tag (pink) to display the menu items. The submenu has the same structure as the orginal menu. It is a menu in a menu. You can see what’s going on in the picture; we’ll add another <ul> tag (green) with < li> tags (orange) inside the pink tag.
To explain it some more; look below. The menu structure will look like this in your browser. I colored the items the way I did in the structure picture so you recognize what codes displays what.
I hope this part is clear now. Next are the HTML 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 34 35 36 37
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Search engine</a></li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Development</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
Behavior .htc file
In CSS, you can add the :hover pseudo-class to many elements. Most modern browsers support this technique already, except the biggest one; Microsoft’s Internet Explorer. IE only supports :hover pseudo-classes on the tag. The menu we are going to built has to work in IE as well. How to do this? With a behavior file. With this file we are able to add extra functions to your CSS properties, which won’t work in other browsers than Internet Explorer. This way, the ability to script that :hover function does exist! I’m not scripting my own behavior file, because it’s written in Javascript, a language I’ve never looked into. The file we are going to use can be found here; Behavior file.
And now the CSS
First, we add the behavior file to your CSS file. This .htc file only has to load one time, so we’ll place it in an element that loads just one time. Like this:
1
body { behavior:url("csshover.htc"); }
Our CSS menu will require some ‘core’ codes. These codes are needed to let the menu work the way we want it to. There are a lot things you could change to let it fit your requirements. Margin between the items, background or text colors, whatever. To let our menu work, use the codes below:
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
ul {
list-style: none; /* Remove the bullets */
margin: 0;
padding: 0;
width:200px; /* Menu width */
}
ul li {
display: block; /* Make a menu item a block (height 100%, width 100%) */
height:100%;
width:100%;
position: relative;
float:left; /* Make sure (in IE) there is no margin between the menu items */
}
ul li a{
display:block; /* When rollover the menu item, the whole item will be seen as link. */
}
ul li a:hover {
padding:0;
}
ul ul {
position: absolute;
top: 0;
display:none; /* Display nothing when not 'hovered' */
}
ul li ul li{}
ul li ul li a:hover{}
ul li:hover ul{
display: block; /* Make sure the submenu is displayed as blocks as well. */
left:200px; /* Your menu width. The submenu appears there, when you hover a menu item. */ }
The problem for your Internet Explorer browser is this line of codes: ‘ul li:hover ul’. It will not display this part, because it doesn’t know what ‘li:hover’ means. To make sure IE does recognize it the way we want it to, we use our ‘behavior’ file.
We’re done
The menu works. I think this version is one of the most simple CSS menu’s around. But well, it doesn’t look great yet. I’ve made a example to show you how to give this menu some borders, background colors and hover styles. Try it yourself and you can post your menu in the comments! If you have a problem with this menu, my explanation or just want to ask me something, please leave me a comment or contact me directly. I hope you have enjoyed this article and keep on coming back! To make this more easy to modify this for you, I have included all the files in a .rar file and this file is available for download below!
Vertical CSS menu – Download
Vertical CSS menu – Example
LusterForever.com – Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.
can it be used ad horizontal menubar aswell?
This time it is a Vertical tutorial. I will publish a horizontal version very soon.
Thanks for the tutorial.
IE is making web designer more work to do.
Thanks very much i was looking for this menu style forever and you have shown me the easiest way to do it thank you.
[...] this tutorial a bit easier, I choose to use a standard list, without a submenu. Read more about a menu with a submenu. <ul> [...]
[...] To visit this tutorial, click here: http://www.divitodesign.com/2008/01/vertical-css-menu-with-a-behavior-file/ [...]
Thank you very very much pal
That menu is very simple indeed. I’ve never seen a behavior file used that way though. I’m just wondering how compatible that menu system is.
How do you make the top menu stay highlighted as we go through the sub-menus of that top menu?
Thanks for your tutorial , it’s help me a lot.
I used this menu inside table and it’s work well in ie6, ie7 , but in Firefox the submenu didn’t appears well, is there any solution ? please help
Thanks again
Even though your example is a simple menu, its clean. I was looking for a horizontal menu.
Horizontal coming up!
[...] a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS [...]
Thanks your tutorial again.
Good luck !
Stefan,
Thanks so much for this post. I’ve started to get involved in wanting to customize parts of my site, and this kind of coding tutorial makes a lot of sense. Gonna take a look around for more jems here!
Kelly
Thanks, great tutorial.
Just one thing, this menu system seems to work exactly the same withouth the use of the behaviour file. I’ve tried it in IE, Firefox and Opera and none of them display anything different without the behaviour file, so what exactly is the purpose of it?
I thought it was something wrong with me, but your site is broken in Firefox! Thanks for the tutorial, very useful for a beginner like myself.
thx buddy will try it for sure as very less people use it on blogs. will be helpful for my readers for sure to navigate
Haw can we change the position of submenus from right to left?
Thanks very much i was looking for this menu style forever and you have shown me the easiest way to do it thank you.
I was searching this Widget for along time.Finally i got a working Code from here.
Thx a lot !!!
Thanks much for the tut..I was redoing some template work on a BANS site IM doing, and was trying to figure out how to fix the menu.
It’s not working in IE 6
Please help me.
Thanks,
The code helped me a lot.
Regards
Rashmi
[...] 41. Vertical CSS menu with a ‘behavior’ file [...]
don’t know what I’m doing wrong but the submenus do not show in IE. It’s working fine in all other browsers. please help !
[...] 41. Vertical CSS menu with a ‘behavior’ file [...]
[...] 13. Vertical CSS Menu With a ‘Behavior’ File [...]
Vertical CSS Menu With a ‘Behavior’ File for thanx.
Nice tutorial. Easy to follow, cheers.
didnt quite work with me
maybe im getting sth wrong. thanks anyway
[...] Vertical CSS Menu With a ‘Behavior’ File [...]
can u give me the css code for the menu which shown on top left side
which contain category list
In DivitoDesign’s sidebar?
ya the category list which shown on left side on Divito Design’s page
div.cats{ display:inline; overflow:hidden; float:left; background:#DDBFB7; width:206px; margin-bottom:25px; padding:0 0 10px 0; } div.cats h3{ margin:15px 0 7px 15px; font-size:1.25em; width:180px; float:left; color:#000; clear:both;} div.cats ul{ clear:both; float:left; } div.cats ul li{ float:left; margin:0 15px; width:176px; border-top:1px solid #C6ABA4; } div.cats ul li a{ padding:5px 0 5px 15px; background:url(images/arrow-b.png) 0 10px no-repeat; font-size:1.05em; line-height:1.3; display:block; color:#6F4A3E; text-decoration:none; font-weight:normal; } div.cats ul li a:hover{ text-decoration:underline; background:#C6ABA4 url(images/arrow-b.png) 0 10px no-repeat; color:#000; }ty Mr.Stefan Vervoort thanks a lot
I really need that one
Hello, and thank you for sharing this code
I have one small problem, though. I can’t get the links to stop being underlined. I’ve tried putting “text-decoration: none” in all the css bits, but I can’t seem to work it out.
I would really appreciate a response,
Thank you.
Try text-decoration:none!important; on the a element. Good luck.
[...] [...]
[...] 41. Vertical CSS menu with a ‘behavior’ file [...]
What program do I use to open this RAR file up? I use a mac.
thanks
Scott
Try UnRarX; http://www.unrarx.com/
Good luck.
[...] 41. Vertical CSS menu with a ‘behavior’ file [...]
Hello,
I wonder if there is a way to show a submenu inside a submenu ? That is the html code looks like
I tried adding lines in CSS
ul li:hover ul li ul{ display: block; /* Make sure the submenu is displayed as blocks as well. */ left:200px; /* Your menu width. The submenu appears there, when you hover a menu item. */ }or ul li:hover ul li:hover ul or
ul li ul li:hover ul and nothing works