The Kasper Group

A Graphic & Web Design Company

CSS Tree Menu - NO JAVASCRIPT!

I have seen tree-like menus that are pretty good but I haven't seen one that does not use javascript.

When using a tree-menu with javascript I've found that they don't always transition smoothly from one page to the next. In other words, the menu seems to be jumpy at times when the new page loads. This is very annoying to me and probably to clients also.

Now please forgive me if this has been done before but I could not find anything on the internet that could achieve a tree-like menu without using javascript. So I took what skills I have with CSS and decided to come up with one that will work for all browsers. In addition, I wanted the menu to be SEO friendly and accessible. Not only that, I wanted to use just one 'include' file so it's easier to update.

The concept I am using here is really simple but requires an extra step in formatting the html pages that uses this menu. I used display: none embedded within the html pages to hide the sub-menus and when I wanted to display the sub-menu on any particular page I would remove the appropriate class from the embedded style.

Just view the source to see how it work.

If you are familiar with CSS, you can see how straight forward it is. I have 1 style sheet, 1 include file which contains the menu or navigation and a simple embedded CSS style located between the <head> </head> tags. (See embedded CSS below):

<style type="text/css">
.submenu-1, .submenu-2, .submenu-3 {
display: none;
}
</style>


The idea is that if you use this menu for all your web pages you would then copy and paste the above CSS code to all your html pages located between the <head> </head> tags which will hide all the sub-menus.

Setting up a navigational menu using a list.

Creating a unordered list for a menu is quite easy and will not be explained here. The html code below basically shows you how to setup sub-menus.

For each sub-menu I gave the unordered list (<ul>) it's own class:

<div id="leftmenu">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../main-link-a.html">Main Link A</a></li>
<li><a href="../main-link-b.html">Main Link B</a></li>
<li><a href="../main-link-c.html">Main Link C &gt;</a>
<ul class="submenu-1">
<li><a href="#">Sub Link C1</a></li>
<li><a href="#">Sub Link C2</a></li>
<li><a href="#">Sub Link C3</a></li>
<li><a href="#">Sub Link C4</a></li>
<li><a href="#">Sub Link C5</a></li>
</ul></li>
<li><a href="../main-link-d.html">Main Link D</a></li>
<li><a href="../main-link-e.html">Main Link E &gt;</a>
<ul class="submenu-2">
<li><a href="#">Sub Link E1</a></li>
<li><a href="#">Sub Link E2</a></li>
<li><a href="#">Sub Link E3</a></li>
<li><a href="#">Sub Link E4</a></li>
<li><a href="#">Sub Link E5</a></li>
</ul></li>
<li><a href="../main-link-f.html">Main Link F</a></li>
<li><a href="../main-link-g.html">Main Link G</a></li>
<li><a href="../main-link-h.html">Main Link H &gt;</a>
<ul class="submenu-3">
<li><a href="#">Sub Link H1</a></li>
<li><a href="#">Sub Link H2</a></li>
<li><a href="#">Sub Link H3</a></li>
<li><a href="#">Sub Link H4</a></li>
<li><a href="#">Sub Link H5</a></li>
</ul></li>
</ul>
</div>


Naturally all the links listed above will display by default but if you have added the above CSS embedded styles to the head of all your html pages it will hide all your sub-menus.

Once this is set up, the easy part is determining which page gets what sub-menu to display. You do this by simply removing one of the class style from that page and any other pages that uses that sub-menu.

Let's say you want Main Link H page to display the sub-menu. You simply remove .submenu-3 from the style. See below (remove the class in bold):

<style type="text/css">
.submenu-1, .submenu-2, .submenu-3 {
display: none;
}
</style>


It will now look like this:

<style type="text/css">
.submenu-1, .submenu-2 {
display: none;
}
</style>


Of course you would do the same thing for the Main Link H's sub-pages so that the sub-menu appears on those pages too.

All your menu styling are located in one CSS style sheet and you can do pretty much whatever you want. Take a look at the CSS to see what I did to achieve the results that I got.

You can get fancy with it or keep it simple. You can even make it look like a Windows Explorer folder list by using some small graphics.

If you like this you are free to use it and make any changes you like.  If you come up with a unique design using this concept I would like to hear from you and see your work. Contact me.