Also last week CSS Menu Builder had a few problems and the site became unstable and unresponsive for pretty much a whole day, so it is important to have other resources to use, when this happens.

01. CSS Menu Maker

CSS Menu Maker has been around for a long time and offers both horizontal and vertical menus along with drop down menus.

Furthermore it also offers Dreamweaver plugins.

For more informaiton, please visit,
www.cssmenumaker.com

02. Pure CSS Menu

Pure CSS Menu offers an advanced menu builder, where you are able to create your own drop down menus, by selecting one of their various menu templates. Futhermore you are able to change the colors and add/remove items from your menu, all updated in realtime.

For more informaiton, please visit,
www.purecssmenu.com

03. Menu Builder Me

Menu Builder Me is a very simple menu builder, that offers you the choice between a couple of horizontal or vertical menu templates, which you can then customize by changing the colors.

For more informaiton, please visit,
www.menubuilder.me

04. My CSS Menu

My CSS Menu is another advanced drop down menu builder. It offers a large collection of menu templates, which can then be customized to your needs. The menus are built using tables and not lists, so if you are not happy with tables or you need this menu for a CMS which outputs list, you might want to look at one of the other menu builders.

For more informaiton, please visit,
www.mycssmenu.com

05. Izzy Menu

Izzy Menu also generates advanced drop down menus. Izzy Menu might look a little bit complicated at first, but this is due to the many options for customizing your drop down menus. Furthermore it offers you a menu catalogue to give you inspiration, when building your css menu.

For more informaiton, please visit,
www.izzymenu.com

By Smokscren

Today, 22nd of April, 2010 @ 16.06 GMT, the site has been and still is experiencing quite a few internal server errors. I have been in contact with the hosting company’s support team and they say it has been fixed, so hopefully these errors will stop soon.

These things are unavoidable, and maybe even more on a shared hosting environment, but as the site does not generate income to support a VPS or Dedicated Server, I will remain with Bluehost, as their service has been very good so far and their support has been fantastic.

I will update this post, as soon as I see that the site is running normally again.

The other day I started thinking that this could be done dynamically by using javascript. Of course some people will probably not like this method, so you should stop reading now.

I have created 3 examples, for people using either MooTools, jQuery or just plain JavaScript, you can see them below as well as examples.

Please note that all 3 examples require that you set the ID of the containing div element, this is so that a background image can be added to this element.

Update while writing
Of course while writing this tutorial, I found an article which explains how to do this using CSS, but since I had already written the tutorial, you will get all 4 examples.

CSS way

Based on the article by Matthew James Taylor

CSS

#menu{text-align:center; width:100%; position:relative; overflow:hidden; background:url('topMenuImages.png') repeat-x; }

.menu{margin:0; padding:0; height:30px; background:url('topMenuImages.png') repeat-x; left:50%;clear:left; float:left; position:relative;}
.menu li{padding:0; margin:0; list-style:none; display:block; float:left; position:relative; right:50%;}
.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;}

HTML

<div id="menu">
    <ul class="menu">
      <li><a href="/home" class="active"><span>Home</span></a></li>
      <li><a href="/products"><span>Products</span></a></li>
      <li><a href="/services"><span>Services</span></a></li>
      <li><a href="/about"><span>About</span></a></li>
      <li><a href="/contact"><span>Contact</span></a></li>
    </ul>
</div>

Example Centering a menu using CSS

MooTools

window.addEvent('domready', function() {
	var menuWrapID = 'menu'; // container element ID
	var menusize = 0;
	// get width of each anchor tag and sum
	$$('#'+menuWrapID+' .menu li a').each(function(el) {
		menusize += el.getSize().x;
	});
	// set unsorted list width and container background image
	var mbg = $$('.menu').getStyle('background-image');
	$(menuWrapID).setStyle('background-image',mbg);
	$$('.menu').setStyle('width',menusize);
});

Example Centering a menu using MooTools

jQuery

$(document).ready(function(){
	var menuWrapID = 'menu'; // container element ID
	var menusize = 0;
	// get width of each anchor tag and sum
	$('#'+menuWrapID+' a').each(function(i, el) {
		menusize += $(el).outerWidth();
	});
	// set unsorted list width and container background image
	var mbg = $('.menu').css('background-image');
	$('#'+menuWrapID).css('background-image',mbg);
	$('.menu').css('width',menusize+'px');
});

Example Centering a menu using jQuery

JavaScript

function menuResize() {
	var menuWrapID = 'menu'; // container element ID
	var menusize = 0;
	// get width of each anchor tag and sum
	var els = document.getElementById(menuWrapID).getElementsByTagName('a');
	for(var i = 0; i < els.length; i++) {
		var size = els[i].clientWidth;
		menusize = menusize + size;
	}
	// set unsorted list width and get its background image
	var uls = document.getElementById(menuWrapID).getElementsByTagName('ul');
	for(var i = 0; i < uls.length; i++) {
		uls[i].style.width = menusize+'px';
		var browserName=navigator.appName;
		// if FireFox, Chrome, Opera, Safari
		if (browserName==="Netscape" || browserName==="Opera") {  var bgi = getComputedStyle(uls[i],'').getPropertyValue('background-image');}
		// if Internet Explorer
		else if (browserName==="Microsoft Internet Explorer") {  var bgi = uls[i].currentStyle.backgroundImage; }
	}
	// set background image to menu div
	document.getElementById(menuWrapID).style.backgroundImage = bgi;
}

window.onload = menuResize;

Example Centering a menu using JavaScript

In the plain JavaScript version, it relies on the onload event, but you might want to add the excellent domready.js script to your page, so that the change is done when the dom is ready.

Thanks for the use, which I take as an indication of support for the service.

Below is a screenshot of, so that you can see the individual download stats.

Downloads on CSS Menu Builder from Jul 1st, 2008 till Nov 12th, 2009

All images are cached on the server and depending on which type of image is requested, it will be delivered by the appropriate sub-domain.

This is a part of CSS Menu Builders attempt in following the best practice rules set forth in an article on the same subject by Yahoo, a link is provided below.

In the future it would be cool to add all the static menu images to one file, as this would drastically decrease the requests made by the site, but there is still some way to go, before this is even attempted.

Best Practices for Speeding Up Your Web Site

Note:
Headers are set for the images, so the first time, it might take a little time to load, but then they should be cached in your browsers as well. Headers are set for 1 week and then they should revalidate.

In a time where many have focus on performance, I decided to do the same, granted there are still a few issues that need to be fixed to comply with more points on the Yahoo best practice list, but they will come.

Here is a list with a few of the performance enhancements that have been added.

• CSS and Javascript minification.
• CSS and Javascipt caching.
• Javascript code reduction.
• Image caching.
• File size reduction.

Here is a list of new features added to the new CSS Menu Builder structure.

• Builder broken up into multiple segments to increase performance and usability.
• Fixed Zip file download errors in Safari under OS X and IE 8 under Windows.
• Added link builder to create links for your menus, they support drag & drop for positioning.
• Uses cookies to remember you last menu, next time you come back (Cookie is saved for 1 year).
• Breadcrumb menu now has built-in support for Breadcrumb NavXT WordPress plugin, by removing the span tag within the anchor tag.

Future features, without promising to much, as happened last time I wrote a post looking at the future.

• Javascript, css and image files will be distributed on sub-domains to increase performance, using browsers multiple domain request features as described in Yahoo’s best practices for speeding up websites.
• Better image caching on the various sub-domains.
• Horizontal Menu Zip file and Breadcrumb Menu Zip file will include templates for WP Menubar and Breadcrumb NavXT WordPress plugins.
• All images will have alpha transparent background, so that you may remove the background image from the css and allow for seamless integration into your designs, where it is not possible to build a menu background.
• Menu Image generator scripts will all be updated to use the new Builder Class, which should increase performance and future maintenance.

I hope that people will like these enhancements and will continue to use CSS Menu Builder in the future.

• 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.