add columns to a megamenu in Joomla
- Details
- Parent Category: computer
- Category: joomla
- Published on Sunday, 23 September 2012 11:45
- Written by majid
- Hits: 411
add columns to a megamenu in Joomla
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.
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.
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.
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:
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:
In this example, the result looks as shown in the screenshot below:
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.