Learn how to create great websites

using Joomla 3

 

How to add columns to a megamenu in Joomla 2.5

In the first tutorial on using the MaxiMenu extension, I've explained how you can add a megamenu to your Joomla-powered site. Now let's build on this knowledge by adding columns to present rows of hyperlinks within the megamenu.

Why use columns?

Using a megamenu enables you to show your web site visitor many related navigation options in just one click. If you want to present menu options as clearly as possible, it’s a good idea to use columns within your megamenu. To see what this effect looks like, here’s how I decided to order the menu links under the Joomla books menu item on my website.

columns image001

In this example, three columns are used:

  • The first columns shows introductory information on this menu item (‘Books on Joomla 1.6 and 2.5’).
  • The second column shows all books under the Joomla 1.6 heading (actually, it’s just one book, but we won’t let that fact spoil our columnar fun).
  • The third column contains a Joomla 2.5 heading and shows links about the book on Joomla 2.5.

Example: creating three columns

How do you achieve the menu layout shown above using MaxiMenu? To see how this  structure is constructed in the Joomla backend, let’s have a look at the menu items under Menus > Main Menu. Here you can see how I've added codes to the Menu Titles to indicate where MaxiMenu should start rendering a new column.

columns image002

To create a structure like the one shown above, these are the steps involved:

  • To indicate the start of the first column, in the Menu Manager, create (or edit) the first 2nd level menu link. In the Menu Title field, add a [col=<width>] code to indicate the starting point and width (in pixels) of the column. In this example, the first menu item already consists of a code [modid=97]: it's not just an ordinary menu link, but it's a Custom HTML module shown within the menu  (as described in the previous part of this tutorial). After the [modid=97] code, I’ve added the code [col=160], indicating a MaxiMenu column with a width of 160 pixels should start here.

columns image003

It’s important to note that you could add this [col=<width>] code to any kind of menu link: in this case it’s a Text Separator used to make MaxiMenu display a module, but it could also be any other type of menu link, such as a link to an article.

  • To indicate the start of the second column, edit the Menu Title of the menu link that should become the first link in the second column and add a similar code here. In this case, I’ve added [col=170] to create a column that’s 170 pixels wide:

columns image004

  • To indicate the start of the third column, add a similar code in Menu Title field of the menu link that will become the first link in this column. In this example, I’ve again added [col=170] to create a column that’s 170 pixels wide:

columns image005

In this example, the result looks as shown in the screenshot below:

columns image006

Of course, this is just one example of the way you can use columns and add lists of links to one single main menu item. This approach can be much more useful on content-rich sites, where you want to display an overview of related contents in columns or lists. Go ahead and experiment!

To read more about the basic deployment of the MaxiMenu CK module, make sure to have a look at the first tutorial on this topic: How to create a mega drop-down menu in Joomla 2.5.

Eric Tiggeler

Search this site

Get the best book on Joomla

Fully updated for the current version of Joomla (3.3 and higher)

Available as paperback and e-book

Published by Packt

The Joomla 3 Beginner's Guide is published by the renowned international IT books publishing company Packt Publishing LTD.