• Vista/Apple menu builder
• More options for horizontal menu builder
• Direct menu linking
• Export features
• Multi level menu builder
• Site performance improvements

Below you can read a description of each of the features and if you feel like it, vote which should be done first.

Vista/Apple menu builder
I have been working on a vista styled menu builder for some time now, but I have still not finished it, mainly because I had some issues with finding a way to generate gaussian blur to the overlay of the menu. I tried to use PHP’s imageconvolution, but it did not give a big enough blur, so I wrote a function myself, but there are some problems with the transparency. Furthermore I would also like to add an Apple styled menu builder, so maybe I will be able to combine these two into one, which would be more practical.

More options for horizontal menu builder
Also in the works, have been the move of the horizontal menu builder, to the new menu builder core. Though I have still not started this, the task should not be as hard as it is time consuming, due to the 1500+ lines that need to be rewritten. Once this is done, more background options should be available and I would also be adding some more menu images.

Direct menu linking
Since early in the development, though early is about 2 months ago, it has been my idea to allow for direct linking to a menu. This would allow menu developers to send menus to each other for approval before downloading the menu, furthermore it would allow a user to bookmark the menu, so that they could return to continue development or recover the menu, should they have lost it.

Export features
Since I wrote the tutorial on how to implement the menu in WordPress, and I am currently working on one for Drupal, I thought it would be easier if the menu builders could just export the code directly. This would mean that the HTML code would output the complete PHP and HTML code for each enabled publishing system, so that you would not have to write any code, like it is now for the normal menus. Currently I have only thought about WordPress and Drupal, but would be added.

Multi level menus
Of course a multi level menu builder has also been the plan all along, but I have just been to scared to start development on it, as I know that it is going to drive me crazy. Also a new user interface would have to be created and limitations would have to be made, but which, it is very hard to decide. Furthermore I want them to be purely CSS, but I will need to look into if this is viable or if I should compromise by adding a small javascript to the menu. There is also the issue of building just one builder that can handle both horizontal and vertical menus or dividing them up.

Though I know that this would be a popular addition, you will probably have to wait a while longer, before I start development on this, as it will be very time consuming and since some other features will have to come first, to ease development on this.

Other stuff
I have also been trying out some different options for adding a caching engine to the site to enable faster loading. The issues concerning this have been how to properly store the cached files with language information and allowing for direct linking. There is also the issue of caching the generated images, so that they may load faster or at least the random images on the site. I have a few possible solution, but I have not had time to test them.

I have also been looking at different dedicated server solution to host the site on, as it is currently on a shared host. This would also improve performance, but here the issue of money comes in and that is something I will have to fix, before this becomes a reality. Funny how it always comes down to that.

Anyway
I hope that you now have something to look forward to. Below I have added a poll to allow you to show me which feature you would like first. There is one feature missing and that is the multi level menu builder as that is not something that can be done more or less quickly. You are also welcome to leave a comment with other features that I might not have thought about.

WordPress vertical page menu integration

The horizontal menus are for top level pages and the vertical menus are for sub-pages, but only the first level, since this is limited by the menu builders. Go to the demo blog I have created that showcases what we will try to achieve with this tutorial.

WordPress horizontal page menu integration

As you can see in these two images, its to look pretty good and if I am capable of explaining it well, you should be able to do this without breaking a sweat, though you might come to realise, that you have put to much confidence in my skills as a tutorial writer.

Anyway let’s get going.

Horizontal menu

CSS
The first thing you need to do, is to create a menu using the horizontal menu builder and get the css code and the image, don’t bother with the html code, because you won’t be needing it, as WordPress generates this code for us. You could also just copy the full css code below, if you are using menu images generated by CSS Menu Builder.

Now you should have something that looks like this:

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

This is the standard css code that the menu builder generates, and this works for most purposes, but in the case of WordPress, we will have to modify it a little bit. WordPress adds the css classes to the list (<li> tag), where cmb adds them to the a tag <a>. Furthermore as it is not possible to add your own classes to the WordPress PHP function, we will have to change our active class to use their current_page_item and so that the top level menu will also be active when a sub-page is viewed, we will also have to add the class current_page_ancestor. Lucky for us, this only needs to be applied to the last two lines of the css code, which handles the active state.

.menu li.current_page_item a, .menu li.current_page_item a:hover, .menu li.current_page_ancestor a, .menu li.current_page_ancestor a:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('images/topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li.current_page_item a span, .menu li.current_page_item a:hover span, .menu li.current_page_ancestor a span, .menu li.current_page_ancestor a:hover span{background:url('images/topMenuImages.png') 100% -90px no-repeat;}

As you can see in the above code example, I removed the active class from the a tag and added the WordPress class name to the list tag. Furthermore I added the following lines .menu li.current_page_ancestor a, .menu li.current_page_ancestor a:hover to the code that handles the displaying a tag and .menu li.current_page_ancestor a span, .menu li.current_page_ancestor a:hover span to the code that handles the displaying span tag.

So the full css code for the horizontal top level WordPress page code, should now look like this:

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('images/topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('images/topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('images/topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li.current_page_item a, .menu li.current_page_item a:hover, .menu li.current_page_ancestor a, .menu li.current_page_ancestor a:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('images/topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li.current_page_item a span, .menu li.current_page_item a:hover span, .menu li.current_page_ancestor a span, .menu li.current_page_ancestor a:hover span{background:url('images/topMenuImages.png') 100% -90px no-repeat;}

Please note that you also need to change the image path, so that it points to the right directory, in this case, the default WordPress theme has a folder called images.

WordPress code

Now that we have the css code ready, we will move on to the WordPress code, that will display the page list, that we will be styling.

By default WordPress does not put the a span tag inside the a tag and their function does not provide a way to enable this, which is the way to make it possible to use the sliding doors effect. But luckily for me, and maybe also for you, I found this fantastic tutorial over at hackwordpress.com that shows us how to do this. By using the PHP function preg_replace on the output of the WordPress wp_list_pages function, we can add the span tag inside the a tag.

So the full WordPress code looks like this:

<ul class="menu">
<?php echo preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('echo=0&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;depth=1&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;title_li='));?>
</ul>

As you can see, we look for the list and a tags from the code generated by the wp_list_pages function and inside the a tag we add the span tag. You might also notice that inside the wp_list_pages function we have added some variables. We have told the function not to add a title to the list and that the depth of the menu should only be one. In regards to the echo=0, this tells the wp_list_pages function whether to display the generated items or return them as a HTML text string. By setting this to 0, we ask it to return it as a HTML text string that we can work with.

I added this code to the bottom of my header.php file in the default theme folder, so that it would be right after the header image, but you can place it anywhere you feel it fits your design. Furthermore I placed mine inside a div block, to contain and position it.

Well that’s it, we have now finished creating the horizontal menu integration for WordPress pages, for more on the wp_list_pages function, that will also be used in the next part, please visit the WordPress Template Tags documentation.

Vertical menu (sub-menu)

CSS
So once again you should go to the vertical menu builder and build the menu you want to have on your blog and get the CSS code and the image or just copy the CSS code from below. And again just discard the HTML code, as you won’t be needing it.

The standard CSS code from the CSS Vertical Menu Builder looks like this:

.menu{margin:0; padding:0; width:190px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}

And again we need to change it a bit, but here the change only concerns one line, which is the second line from the bottom, as this does not take advantage of the sliding doors technique. In this case the reason for the span tag, is to vertically align the text, that is why it has the line-height set to 40 pixels, as this is the height of the menu. And as before we add the current_page_item class to the list and remove the active class from the a tag, so it looks like this.

.submenu li.current_page_item a, .submenu li.current_page_item a:hover{background:url('images/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}

You might notice that I also changed the main class name, from menu to submenu, this is because I now have two menus from the generators on the site and the classes should be different.

So the full CSS code for the Vertical sub-page menu, which could also be used as a top menu, if you use the above WordPress code, looks like this:

.submenu{margin:0 -10px 0 0 !important; padding:0; width:190px; list-style:none;background:rgb(255,255,255);}
.submenu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.submenu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('images/verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.submenu li a:hover{background:url('images/verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.submenu li.current_page_item a, .submenu li.current_page_item a:hover{background:url('images/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.submenu li a span{line-height:40px;}

As I just mentioned, if you want to have a vertical page menu for the top level pages, you should use the above WordPress menu code and change submenu back to menu or what ever name you want.

WordPress code
The WordPress code for the sub-page menu example is a little bit more complicated than top-page code and the version I will be showing here, which is more or less copied from the WordPress documentation, only concerns WordPress installations 2.0.1 or newer. If you want the code for earlier versions, please go to the WordPress documentation regarding the wp_list_pages. Furthermore this code snippet will also be using the hackwordpress.com sliding doors hack.

Here is the WordPress code I added to my sidebar.php page:

<?php
if($post->post_parent) {
$children = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('title_li=&amp;amp;amp;amp;amp;child_of='.$post->post_parent.'&amp;amp;amp;amp;amp;echo=0&amp;amp;amp;amp;amp;depth=1'));
} else {
$children = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('title_li=&amp;amp;amp;amp;amp;child_of='.$post->ID.'&amp;amp;amp;amp;amp;echo=0&amp;amp;amp;amp;amp;depth=1'));
}
if($children) {
echo"
<ul class=\"submenu\">\n".
$children
."</ul>\n";
} ?>

The first if -else statement checks to see if it the page has a parent page, if so it displays the sub-pages of the parent page, which in this case would be the actual sub-page, else it diplays the current page’ sub-pages. To me, this looked a bit weird at first, but after reading the code a few times, it started to make sense. If you are on a parent page, it displays the sub-pages, but if you are one the sub-page, the normal code would try to display the sub-pages of the sub-page, that is why we instead display the sub-pages of the sub-page parent-page, so that the sub-page is still displayed.

Again we use the preg_replace function to add the span tag inside the a tag and in the wp_list_pages function we put the depth to 1, because of the limits of the menus generated via CSS Menu Builder. We also set the title_li to nothing to clear the parent list <ul> tag and remove the default title of the list. Last we add the child_of variable. In the if section we set it to the parent of the post, and in the else section we set it to sub-pages of the post.

The second if statement checks if the first statement found any sub-pages, if so, it displays them in an unsorted list to which we have added the class submenu, as that was what we called it in the CSS section.

Ok, I guess that takes care of this tutorial, I hope I explained it more or less understadable, though should you have any doubts, corrections or comments, you can leave them below or contact me via the contact page.

Here is a list of the resources and a link to the final result:

• Demo WordPress blog for this tutorial
• WordPress Template Tags documentation
• Hack WordPress article on how to add the span tag for sliding doors effect

Anyway, contrary to popular belief, yes the site is very popular and people have begun to believe great things about it, the menu builders do not use neither Flash nor Ajax or XHR or what ever it is called it now a days.

How do I know what people believe, you might ask, and I will tell you how, though you might already have figured it out. I read other peoples blogs, especially the ones that have posts about css menu builder. Some, of course, are in obscure languages that I have not yet mastered, but thanks to the wonderful Google Translate service, I am now able to get the big picture, so this is how I know.

But to get back to the point of this post, the mechanics are actually much simpler than using Flash, which by the way I suck at, or AjaXHR. I actually went with just changing the stylesheet everytime a setting in the menu builder is changed.

The earlier versions of the menu builders, which where never known to the world, used Ajax, but I didn’t feel it was clean enough, since it added styles inside the response. So when I started extracting the menu builders from my other projects, I remembered a stylesheet switcher script I had come across. The stylesheet switcher was written by Achim Mensching and though I changed a few things, all credits go to him for making my life so much easier and such a great little script. I had actually forgotten to write him in my Kudos section in the contact page and I apologize for this, if he should ever read this post.

The menu builders use javascript, in this case MooTools and code that I made for the site, the great MooRainbow as the color picker and the stylesheet switcher. Once the stylesheet is changed, it takes the variables passed to it and adds them to the background image, which is a PHP file that generates the images.

Ok, now that I am reading this it looks a little confusing and not that clear, but maybe that’s only because it is late, anyway I hope you get the picture.

So I hope, by explaining the simple mechanics, this can help others in getting ideas for new and cool (maybe even free) tools for the web.

If you are using the MooTools version or read that post or have not had problems in browsers with that version or are never going to use these javascript tab menus, then there is really no point in reading the rest of this post. On the other hand, if you love reading about this stuff, please be my guest and read the rest of the post.

I did this version of my tabbed content script only because there was a comment on the previous version, saying that it did not work in IE7. It did work in my IE7, but for some reason, it did not work in some other IE7’s and after rewriting the MooTools version, it still did not work in that website when viewed by some IE7’s.

So, I thought it might be a good idea to try and provide an alternative to the MooTools version and for no particular reason, jQuery was the choice . I actually also considered using Dojo, but due to the lack of quality documentation, I changed my opinion, so if any of the few people reading this blog are firm in Dojo and have nothing better to do, you are more than welcome to add a comment with a link to your tab tutorial.

Well enough pre-talk, lets get to it.

I was supprised how short the code became, though I am sure it would also be possible to shorten the MooTools code. The jQuery version of the tabbed content script is only 13 lines of code, but it could be even shorter, if you moved the function code inside the document ready container. I chose not to do this, as I like having the functions, to get a better overview of the various sections of javascript code.

Here is the javascript code

$(document).ready(function(){
initTabs();
});

function initTabs() {
$('#tabMenu a').bind('click',function(e) {
e.preventDefault();
var thref = $(this).attr("href").replace(/#/, '');
$('#tabMenu a').removeClass('active');
$(this).addClass('active');
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
});
}

And to see what it actually does, here are the links to the examples.

jQuery tabs at the top of the container

jQuery tabs at the bottom of the container

Note
By the way, if you started out with the MooTools version, but now want to use the jQuery version, all you have to do is change the javascript, since the rest is the same.

And another note
This version will not break if javascript is disabled, though you would have to create the pages with the tabs open, in accordance to the URL you put in the href attribute. An example could be using a server-side rewrite and then capturing the last part of the URL and with this information activate the tab, by adding “active” the the class of the DIV element.

Third and final note
Though I wrote the tabbed content script for two different javascript libraries, I do not expect to do this in the future. I usually use MooTools and am quite happy doing so. It takes time to learn how to use a new library and then you might mix them and break the code you are trying to write, or at least I might do this. Furthermore I believe it is a good idea to learn one and learn it well, than learning them all, but badly. This does not mean that MooTools is the best in the world, but I guess it is the one I have come to like.

If you already know how to do this, there is really no point in reading the rest of this post, but if you on the other hand are a bit uncertain about how to proceed, then maybe this post might help you a bit.

The first thing to do, is to create a menu via one of the builders. As you probably already know, we currently offer three different types of menu builders, they are as follows.

1. Horizontal menu builder
2. Vertical menu builder
3. Breadcrumb menu builder (also called breadcrumb trails)

Once you have created a menu that you like and want to use for your site, you have the following options, either download the zip archive and use the files to see how it was implemented or save the image file and copy the css and html code generated by the selected builder to your site.

There are two ways to use the css code, either directly in the html document, in a style tag or by adding it to a stylesheet and linking to it in the html document. Below I will try to explain both methods, in both examples I will be using the default code from the horizontal menu builder.

Stylesheet method

Create a new document, using your favourite editor, and add the css code to it.

/* Generated via www.cssmenubuilder.com */

.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}

Then save it as stylesheet.css or any other name you might prefer, but remember that the ending should be .css.

Please not that if the menu image is not saved to the same location as the stylesheet, you should add the new location to the code above, where it says

background:url(’topMenuImages.png’)

so it might look something like

background:url(’/new/location/folder/topMenuImages.png’).

There are 5 background images, remember to update them all or parts of the menu might break.

We now have a stylesheet and we will add a link to it in our html document as well as add the html code to the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Builder test document</title>
<link rel="stylesheet" type="text/css" href="/location/to/stylesheet.css" media="screen" />
</head>

<body>
<ul class="menu">
<li><a href="#" class="active"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</body>
</html>

Note that on line 6 is where we link to the stylesheet, of course you will have to edit the location to reflect your site structure.

From line 10 to 15 is where the html code from the menu builder is added, you may of course add this to any part of your html document, as long as it is between the <body></body> tags.

Now just open the document in your favourite browser and it should work, should you have any problems, you could try to download the zip archive and have a look through it, as it uses this method. The site structure in the zip file is a css folder for the stylesheet, a image folder for the image and the html file in the root.

All in one file method

You could also add the css directly into the html document. In this case the css code copied from the css menu builder would have to be placed inside a style tag in the header section of the document, as illustrated below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Builder test document</title>
<style type="text/css" media="screen">
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
</style>
</head>

<body>
<ul class="menu">
<li><a href="#" class="active"><span>Home</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</body>
</html>

On line 6 we have the opening style tag, below it we add the css code and end by closing the style tag on line 15. Remember to change the background image location if the menu image is not located in the same directory as the html document.

The html code copied from the menu builder is added between the body tags, from line 19 to 24. As with the other example, you can add the html code anywhere you wont within the body tags.

I hope this small tutorial helped you a bit, but if you do a google search, you will surely find many better tutorials on css and html, as this is mainly focused on the implementation of menus from our css menu builder.

If you are new to css and html, you might want to go visit w3schools and have a look through their various examples, tutorials and documentation on these subject.

If you have any questions, you are welcome to post a comment below or try to send me an email via the contact page.

This value reflects the number of menu downloads via the ZIP archive downloader and does not include the amount of times the code has been copied. If you include the number of copied menu code the amount is considerably higher, but due to the fact that some visitors only download part of the code, like only the html or css code, I decided only to use the ZIP download number as an indicator.

I would like to thank everybody that have used the css menu builders and hope that you will continue to use this tool in the future, as it matures and additional menu builders are added.

The example uses one of the new menu styles added to the horizontal menu builder, furthermore it uses MooTools 1.11 as the javascript framework, but you can easily change this to fit your favourite framework.

The code is supplied in each tab, so you can quickly apply this to your site, by copy/pasting the code from the tabs to your own site.

Example 1

By creating a menu image where the tabs are upside down, you can easily add the tabs to the bottom of the container, as the second example shows.

Example 2

To get started with creating your own css tab menu style, go to the horizontal menu builder.

Other resources
A List Apart has a great tutorial on how to create your css tabs using the sliding doors technique. Here are the links for Part 1 and Part 2

TutorialBlog also has a list of 10 Different Ajax Tab.

At Dynamic Drive you can find many tabbed content examples along with css menus examples.

And at last, if you want a Windows XP styled tab script, you can find an excellent one over at dhtmlgoodies.com.

Update 27/09-2008

Due to the comment below, by Doug, I have made a modification to the tab script, so that if you should ever encounter similar issues, you can use the below examples for you site.

As stated in my comment below, the changes to the script are very simple to implement. In your tab links you will have to add a hash (#) before the link name and in the javascript you will need to change the last two lines in the “tabState” function from;

var ac = ael.getProperty(’href’);
$(ac).addClass(’active’);

to

var acu = ael.getProperty(’href’);
var ac = acu.replace(/#/, ”);
$(ac).addClass(’active’);

Furthermore, while trying to figure out what could have caused the issue, I encountered a variable that was not set. The scripts here have been corrected, but if you have used the script and want to correct this all you need to do, is change the following line in the “initTabs” function;

e = new Event(e).stop();

to

var e = new Event(e).stop();

But enough talk from me, I could go on all day, here are the links to the examples using the different javascript.

Example 3

Example 4

Please note that even though an issue occurred on Dougs site, I tested it in IE7 and it worked fine, the issue might have occurred due to multiple javascript not being able to play toghether.

Currently only English and Danish are supported, but I expect to add Portuguese, French and Spanish during the weekend. More languages might be added as I find trusted translators.

The language selector uses a cookie to remember the language, this cookie is set for 365 days.

For those users that do not allow cookies, the translation of the builder page can be obtained directly by adding a language code to the query string (?l=xx, where xx is the language code), should the chosen language code not be supported, the page will fall back to the default language which is English.

Though I have tried to make the menu builders as user friendly as possible, I hope this will help those users that do not understand all the terms on each builder page.

Ohh yeah, and should you find a term that you do not find is suited, then please send me an email or add a comment below, arguing why your suggested term is better suited.

Please note that when you change language, the page reloads and the menu you are working on will be lost, so please choose your language before initiating the menu building process.

Update Sep 10th, 2008: Portuguese language has been added to the menu builders. Though I had hoped to add French and Spanish as well, I have still not received these translations. I will update this post, as soon as these have been implemented.

You can choose from 24 background images and 33 pointer images and combine them as you see fit. This gives you almost 800 different combinations, though not all of them might look good. Of course this is without taking into consideration that you may also choose an endless combination of colors, rounded corners, width and text alignment, so there should be a possibility of having some fun with this new release.

There are also a few kudos I would like to give, since I could not be this creative by myself. Some of the menus have been inspired by the menus found on e-lusion.com, dynamicdrive.com and cssdrive.com, so thank you very much for sharing your ideas.

Furthermore I implemented the Antialiased filled Arcs/Ellipses functions found on mierendo.com to give smoother roundness in some of the background images. Thank you very much for this great function, much appreciated.

So I guess that is about all I have to say about that, so why not just start building your own vertical css menu.

After more or less 3 hours of editing the site to be able to display the menus in IE7, while hitting my head against the table and looking very angry, I found that the error was one line. Yup, the IE stylesheet was only active for Internet Explorers below 7, but I have now changed that. I’m a little disappointed in me for not checking that first, but anyway, I apologize for this inconvenience to the visitors.

There are still some minor errors in IE7, while viewing some of the pages, you might notice that the footer area get locked under parts of the menus. This is also something that some might consider unprofessional and for that I am sorry, as soon as I have some time from making menu builders for the site, I will fix this.

In the meantime, if this really bothers you, I suggest using Firefox to view the beauty of the site, without errors.