Today we review the 3 vertical menu plugins available on this site and summarise which one to use for each situation.

The Vertical Menu Options

• jQuery Vertical Accordion Menu Plugin
• jQuery Vertical Mega Menu Plugin
• jQuery Drill Down iPod Menu Plugin

When considering a menu type the main thing to take into account is the number of levels of the menu. Here we are looking at menus that have more than one level. You then need to consider whether the information in each sub-level is related or can be treat separately – i.e. are there advantages for the user if all menu options for each main menu link are displayed at the same time or is it important that you actually keep them separate.

1. The Vertical Accordion Menu

The accordion menu allows users to click on a menu link and have the sub-menu options slide out underneath. It is very popular since it offers a fairly compact, easy to navigate system and the sliding effect gives a good visible cue for the user to know that further options are available.

Setting the menu so that only one main link can be open at any one time keeps the focus on the users current opton. Using CSS we can also add further styling to help indicate which is the current active menu item.

Basic 2 level Accordion Menu

Pros:

Perfect for menus containing only 2 levels of navigation, where the sub-menus are easily recognisable. For a basic menu structure it offers a great way to effectively display your navigation in your web page side bar and offers a nice alternative to the standard flyout menus.

The accordion menu will also degrade gracefully to a standard nested HTML list in the event that the user has javascript disabled and is easily styled using CSS.

Cons:

For menus that have multiple levels it becomes harder to track which are parent links and which are the sub-menus for each parent. Even using more advanced CSS styling there is a limit to the number of levels you can effectively display without confusing the user.

Recommendation

Use for basic sidebar navigation that has parent links with one level of child links.

See the WordPress Vertical Accordion Menu Plugin page for more information and examples.

2. The Vertical Mega Menu

The vertical mega menu creates a single “flyout” style container for each parent link, which contains all of the sub menus for that section. This allows the user to see all available options and therefore compare what link to click with other sub-menus.

These are very popular with online stores, where you want to display a lot of product information yet still keep some kind of categorisation for the products.

In terms of useability they are excellent since it only requires the user to activate the menu once to see all options. The larger area for the menu also makes it less tricky to navigate compared to multi-level flyout menus, which can sometimes test the users mouse skills.

3 level Mega Menu Showing All Product Categories/Links

Pros:

Excellent for displaying large groups of related links where the user will benefit from having the ability to view all options at the same time – perfect for online stores. Good useability and less awkward than multi-level flyout menus.

With only one parent link its fairly easy to style the menu to give visual clues as to which is the current active menu option.

Cons:

Large area and will inevitably block the main page content. Also requires javascript combined with fairly advanced CSS to create the mega menu effect. This style of menu is basically useless for only 2 levels of navigation.

Recommendation

For navigation using related categories and minimum 3 levels.

See the WordPress Vertical Mega Menu Widget Plugin for more information and examples.

3. The Drill Down Menu – iPod Stlye Menu

Still relatively new, the drill down style menu offers an interesting and more fun method for users to navigate your links.

Following the iPod style, users can drill down multiple levels of the menu, selecting various options to ultimately arrive at a very defined and specific list of available links.

Drill Down Menu With Breadcrumb Navigation Showing Previous Options

Pros:

Perfect for navigation systems where you need to guide the user down specific options to ultimately offer exact links according to their needs and where different categories actually need to be kept separate.

This is great for products that have various components where the items selected are critical to the final product. Also very good for structures such as web directories, where you can add value to the user by allowing them to be more specific about their needs.

Due to their design and the way they operate they are very compact, occupy a fixed size in your sidebar and considering how they effectively manage large, complicated menu structures you cant beat it for size – obviously why Apple chose this style for the iPod!

Cons:

A lot of effort/clicks required by the user – it is therefore important that the drill down concept needs to actually add value to the users experience.

More complicated to backtrack and the menu style makes it difficult/impossible to compare across categories.

As with the vertical mega menu this also requires javascript to create the ipod effect, although CSS styling is fairly straightforward.

Not particularly useful with less than 3 levels of navigation or for standard page navigation.

Recommendation

For navigating unrelated categories/sub-categories of minimum 3 levels or where you need to guide the user to a specific menu option based on their previous choices.

Perfect for selling multi-component style products or navigation systems with a complicated heirarchy, where showing all available options would actually confuse the user.

Go to the WordPress Drill Down iPod Menu Plugin page to see drill down menu demos and more information.

Summary

The most important thing to keep in mind at all times, as well as selecting a menu plugin that looks good on your site, is that the method of navigation actually adds value to the users experience. If it doesnt add value, try alternatives and if it actually makes it more diffcult – you have the wrong plugin!

One advantage to all 3 plugins is that they all work from exactly the same HTML structure and you can try out the same custom WordPress menu with each different menu style and test which one works best for your WordPress site.

Without Resizing

Whilst many ecommerce/content management systems will automatically create standard thumbnails or you can use CSS to limit the height of the thumbnail shown sometimes it is not possible/desirable/liked by client to limit the thumbnail height.

Using jQuery we can easily overcome this problem to create an auto-resizing product list:

Using jQuery to Resize

The jQuery Code:

So, in the following jQuery code we are going to do a few things:

1. Create a function to determine the greatest height of an element
2. Use the above function to get the height of the largest list item
3. Use the function again to get the height of the largest image
4. Use the above values to then set the CSS of the list item – for this example we set both the height of the list item as well as the bottom margin of the image to line-up the text

// The function to find the greatest height from a set of elements
function findMaxValue(element){
    var maxValue = undefined;
    $(element).each(function(){
        var val = parseInt($(this).height());
        if (maxValue === undefined || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
}
// Using the above function we set the height of all list items and the bottom margin of the image
$(document).ready(function (){
    $listItem = $('ul li');
    maxValue = findMaxValue($listItem);
    $listItemImg = $('img',$listItem);
    maxImgHeight = findMaxValue($listItemImg);
    $listItem.each(function(){
        $(this).css("height",maxValue);
        var imageHeight = $('img',this).height();
        var imageMargin = maxImgHeight - imageHeight;
       $('img',this).css("margin-bottom",imageMargin);
    });
});

Whilst we have used a list of thumbnails and text to demonstrate the jQuery this can easily be applied to an selection of elements.

View Demo – Set Equal Heights Using jQuery Download source files

The HTML, jQuery and CSS

To speed up the tutorial we will assume that you have already followed the initial postings and therefore understand how to create the basic HTML/CSS structure for a vertical accordion menu and that you have the preliminary jQuery in place.

Using jQuery Cookies

What jQuery cookies allows us to do is very easily create/modify/store a cookie on the visitors computer that will hold the position of the last menu item visited. When they next visit the site we can therefore use this value to automatically open the relevent menu section.

Creating a jQuery Cookie

To create a cookie we simply declare the cookie name, followed by the value. For our accordion menu we will therefore create a cookie named “nav-item” and its value will be the index value of the last anchor tag clicked. So to create this we use:

$('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
	  $.cookie("nav-item", navIndex);
	  $('#nav li ul').slideUp();
	   if ($(this).next().is(":visible")){
		   $(this).next().slideUp();
	   } else {
	   $(this).next().slideToggle();
	   }
	   $('#nav li a').removeClass('active');
	   $(this).addClass('active');
  });

In the above code – line 2 gets the index value and line 3 sets the cookie.

Using the Cookie Value

Now that we have a cookie on their computer we need to add the jQuery code that will check the visitors browser when the page loads, retrieve the cookie if it exists and use this to open the appropriate menu section:

var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
	$('#nav > li > a:eq('+checkCookie+')').next().show();
  }

That is basically all that is required. Put it all together and the complete code …

The Complete jQuery

$(document).ready(function () {
  var checkCookie = $.cookie("nav-item");
  if (checkCookie != "") {
	$('#nav > li > a:eq('+checkCookie+')').next().show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
	  $.cookie("nav-item", navIndex);
	  $('#nav li ul').slideUp();
	   if ($(this).next().is(":visible")){
		   $(this).next().slideUp();
	   } else {
	   $(this).next().slideToggle();
	   }
	   $('#nav li a').removeClass('active');
	   $(this).addClass('active');
  });
});

Check out the online demo

Update 5th Mar 2011:

We have now also released the jQuery Vertical Accordion Menu Plugin, which makes it easy to create accordion menus from any nested HTML lists. The plugin has several features including use of cookies and ability to select either hover or click to activate the menu.

Check out the project pages for more information and examples or go straight to the download page.

The example below came from a recent project to create an internal web application for a client, which utilised tab navigation, jQuery and AJAX to load data into the page without the need to refresh the web page.

1. The HTML Code

<ul id="nav">
  <li><a href="page_1.html">Page 1</a></li>
  <li><a href="page_2.html">Page 2</a></li>
  <li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

You can fill the “ajax-content” div with default text, which will be replaced when one of the tabs are clicked.

2. The jQuery Code

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });
});

The above jQuery code will automatically use the URL written into each anchor tag as the source for the AJAX data.

So what is the above code doing?

1. When a tab is clicked we first empty the contents of the ajax-content div and then load a loading graphic, whilst the content is being retrieved.
2. The jQuery then removes the “current” class from the tabs and adds the class to the newly clicked anchor tag allowing you to style the tabs to show which one is now active.
3. Once the data from the URL has been retrieved the loading image is removed and the content loaded into the “ajax-content” div.
4. Finally, the “return false” command is used to prevent the default action of the tabs browsing to the content pages.

3. Loading A Default Page

If you wanted to use one of the external pages as your default content you can simply edit the code as below:

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });

    $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
	$.ajax({ url: 'page_1.html', success: function(html) {
            $("#ajax-content").empty().append(html);
	}
    });
});

Substitute the URL for your required page in the code.

A very simple yet effective way to create a basic jQuery and AJAX application for your website

Check out the demo.

This can easily be achieved by using similar code shown in our previous posts on Using jQuery to Validate Search Box Input and Email Validation Using jQuery.

1. The Password Input Fields

<form method="post" name="form1" id="form-password" action="">
  <fieldset>
    <label>Password:</label>
    <input type="password" name="password" id="password" value="" size="32" />
    <label>Re-Enter Password:</label>
    <input type="password" name="password-check" id="password-check" value="" size="32" />
    <input type="submit" value="Submit" id="submit">
  </fieldset>
</form>

2. The jQuery Validation Code – Check That Both Passwords Match

jQuery(function(){
        $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;
        var passwordVal = $("#password").val();
        var checkVal = $("#password-check").val();
        if (passwordVal == '') {
            $("#password").after('<span class="error">Please enter a password.</span>');
            hasError = true;
        } else if (checkVal == '') {
            $("#password-check").after('<span class="error">Please re-enter your password.</span>');
            hasError = true;
        } else if (passwordVal != checkVal ) {
            $("#password-check").after('<span class="error">Passwords do not match.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will perform the following checks upon clicking the submit button:

• Check that a password has been entered and return an error message if the input field is empty.
• Check that the “re-enter password” field contains text and return an error message if the input field is empty.
• Finally – compare both password texts to check if they match

If any of the validation checks return an error then the form submission on your website is stopped with the “return false” command.

Check out the demo.

For our core files we usually have the main directory structure set up:

• CSS folder
• Images Folders
• Javscript folder for jQuery plugins
• index.html file

The index.html file already contains the link to download the latest jQuery library and of course the link to the basic CSS file. The page structure has the div tags for the header, main content and footer and associated CSS rules set up in the style.css file ready to create the main web design layout.

The CSS structure includes:

• CSS reset – to remove all default presentation from HTML tags
• Coding to create a “sticky footer” on your web page
• CSS classes to style the website main navigation & footer navigation
• Basic form presentation
• CSS rules to to create buttons

Although you need to develop your own core files that work best for your style of web design, you can however
download a copy of our core files and are free to use these as a starting point or adapt them.

Usually ordered lists are very simple to in XHTML create using the following code:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ol>

Which will produce the following ordered list:

1. List item 1
2. List item 2
3. List item 3
4. List item 4
5. List item 5

Unfortunately HTML won’t automatically handle reverse numbering. Adding the numbers manually into a standard unordered list looked messy and I wanted a solution that would automatically renumber the list in case anyone else came along and added more items … jQuery to the rescue.

Using some of the usual jQuery magic we can add the following code to the head of the document:

$(document).ready(function() {   

   var countli = $('ol > li').size();
   $("ol > li").each(function(i) {
         var attrvalue = countli - i;
         $(this).attr("value",attrvalue);
   });
});

This will automatically reverse order all of the items in the ordered lists on the web page by adding the “value” attribute to each list item.

See demo for creating a reverse order ordered list using jQuery.

With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page:

jQuery(function(){
     $(".img-swap").hover(
          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");
     });
});

Then simply create your 2 images – normal state called xxxxxx_off.jpg and the hover state xxxxxx_on.jpg, add the css class “img-swap” to the image tag in your html and jQuery will do the rest … see demo below:

Additional Notes:

Refer to our later blog post – Create An Image Preloader For Image Swap Function Using jQuery – for a preload function to improve the image swap performance.

For an example on how to use this to create a very simple jQuery gallery check out our tutorial – jQuery Image Swap Gallery.

Design Chemical is focused on proper code, along with leveraging a variety of tools to make the eCommerce shopping cart both user friendly, as well as, SEO effective.

CMS Content Management Systems, eCommerce sites, Graphic Image Galleries, Databases, Blog Setup, Forum Setup, SEO Search Engine Optimization, SEM Search Engine Marketing, Traffic Analytics, and Web Hosting

A variety of technical skills and a commitment to professional service  make Design Chemical a good choice for Web Design and Web Development in Bangkok and around the world.

• eCommerce
• CMS Content Management Systems,
• jQuery
• Dynamic Sites
• Image Galleries
• Database
• Blogs
• Forums
• SEO Search Engine Optimization
• SEM Search Engine Marketing
• Analytics
• Web Hosting

A broad range of technical skills combined with a commitment to service and professionalism makes Design Chemical the best choice for Web Design and Web Development in Thailand and around the globe.

Today we have 2 more techniques, which utilise the jQuery javascript library. If you are not sure how to include the library code into your web page then refer to our post – Adding jQuery To Your Website. The following examples assume that your web page already includes the jQuery library.

3. Using The jQuery Spamless Plugin

This is a lightweight plugin, which renders the email address on the visitors browser using source code, which is scrambled (or obfuscated). To a spambot the source code only contains unreadable text.

Refer to the jQuery Spamless plugin project pages for examples, information on how to use the plugin and to download the plugin file.

To create your scrambled email address with the default settings for the plugin:

1. write the address backwards
2. Replacing the “@” symbol with “[at]“
3. Replace all “.” with “[dot]“

Example: For email address – email@mydomain.com – you would use the following code:

<span class="email">moc[dot]niamodym[at]liame</span>

4. Using jQuery and AJAX

All of the previous 3 methods are unable to handle the addition of a “mailto:” link, which will allow your visitor to open up a blank email containing your email address. A feature, which many people find very useful.

One way of maintaining the link is to use AJAX and jQuery. Using this method we can get the browser to call in the email address code from an external file, after the page has loaded. In most cases spambots would therefore not see the email address in the source code.

View a demo of hiding your email address and mailto link using jQuery and AJAX.

If you view the source code of the above page in your browser you will see that the email address does not appear and only shows on the browser screen. This same method is also used in the footer of our website.

Download the source code for this example

To use this method add the following code after the jQuery javascript library, between the head tags:

<script type="text/javascript">
$(document).ready(function(){

	var content = $(".email");
	content.load("email_address.htm");

});
</script>

Finally in the body of the html page add the following code where you would like your email link to appear:

<span class="email"></span>

A very simple, yet effective solution for hiding your email address link from annoying spammers!

There are many methods that you can use to try and hide your details from the spammers. Some require just simple changes to your text, whilst others, although a little more advanced, can be equally simple to implement.

The following are a few ideas that you can use to disguise your email address online. These are by no means the only ways but we have found them useful in the past in web design projects. The best method for you does of course depend on your own website requirements …

1. Rewriting Your Email Address

The most simple is probably just to rewrite your email address so that humans can understand it and spam harvesters tend to skip over it. Example:

email@mydomain.com could be rewritten as … email [AT] mydomain dot com.

Unfortunately this method obviously relies on the visitor to your website understanding what you mean and this is not necessarily going to fool all spam harvesters these days.

2. Replace Your Email Address with an Image

If you prefer to have your web page show your actual email address then one simple method is to replace the email text in your source code with an image as shown below:

Hiding text in an image is a good way to stop spam harvesters picking out your email address … not impossible of course but far more tricky!

Whilst the above two methods work and offer lower risk ways of displaying your email address, one big problem is that you cannot use these to add the “mailto:” link. The mailto: link allows your visitor to automatically open their email software with a new blank email already populated with your email address as demonstrated if you click on the link below:

someemail@somedomainexample.com

Next week I will cover two more ways of beating the spammers, including one, which allows you to add a “mailto:” link with virtually no risk.

Hiding Your Email Addresses From Spam Harvesters – Part II

One word of advice … DO NOT use your web designer to register your domain name. It is better to do this yourself using one of the international registrars or discuss with us and we can help walk you through the process.

Your domain name is part of your company identity and it is critical that you retain control of your domain name at all times and are free to change name servers to any hosting company. There is nothing worse than spending time, effort and money building up your online branding only to find out when you want to hire a new web designer that you do not actually own your domain name.

Starting from scratch with a new domain name puts you right back at square one when it comes to building up your traffic and search engine rankings.

The jQuery website contains hundreds of plugins, which allow you to quickly add elements to your website such as web photo galleries, navigation, animation, slideshows, mp3 players, AJAX and many more. These plugins are usually well supported and come with downloadable demo files, which makes it easier to integrate the code into your own website.

Later on in our blog we will show examples of where Design Chemical use this excellent resource in our web design projects. However, before you can start using jQuery features you must first know how to add the library to your web page.

There are two ways to include the jQuery library file:

1. Upload The jQuery Library File to Your Server

With this method you hold the main jQuery library file on your web server. You can download the latest version from the jQuery website.

Inbetween the head tags include the link to the jQuery file – make sure that the path is correct based on your file structure. Example – if you download the file “jquery-1.3.2.min.js” to subdirectory “js/” then use the following code:

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

Then upload the jQuery library file (e.g. jquery-1.3.2.min.js) to your web server along with your edited web page.

Make sure that the code comes before any other jQuery code in your document head.

2. Download The jQuery Library File Directly From Google

Instead of holding the file locally you can have your web page download directly from the google code repository. Main advantages of this is that if your visitor has already visited a website that uses the same code then your site can utilise the locally cached copy, which improves your page loading time. With jQuery becoming more and more popular, this method provides a definite advantage.

To download directly from google simply include the following code inbetween your head tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Upload your edited web page to your web server and that’s it!

Easy … now with the library included in your web page you are free to utilise the code to add great features to your web design. To see a sample of what jQuery can do click on one of the project images on our web design portfolio to see a gallery sample in action.