News Feed E-mail

Get How-To's right in your inbox. Subscribe to the HowToJoomla! news feed e-mail. Just enter your email address here:

Delivered by FeedBurner

Login






Lost Password?
No account yet? Register

Affiliates

Azrul's JomComment
JoomlaShack
iJoomla
The Joomla! Store
Member of W3C Sites dot com
How to Use Multiple Menus on the Same Page PDF Print E-mail
Written by Cory   
Friday, 29 September 2006

Joomla! has a problem that you may or may not know about. It is a minor problem (or major, depending on whom you ask), and it will not really affect how your website functions.

The problem exists in how Joomla! renders menus. By default, the main element that contains the menu (in the case of a "flat list" menu, it is the "ul" element) is given an id=mainlevel. This is not a problem if you are using one menu on a page. But, if you are using multiple menus on a single page, there is a conflict.

Proper XHTML markup should not have more than one element with the same id. An id should be unique for each element that is given an id, so the browser can tell them apart for the purpose of style sheets and javascript. If you use multiple menus on the same page, you are using improper XHTML markup, and you will fail XHTML validation.

You can rest easy, though, because there is a solution. Read on to find out what it is.

The Solution

The Joomla! core development team is full of web development experts and people much smarter than I am. They anticipated this problem, and they have provided a solution.

When a menu is created in the Menu Manager, a corresponding menu module is created in the Module Manager. In the Module Manager, click on one of your menu modules, and you will see parameters. One of those parameters is the "Menu Class Suffix". Here, you can give a unique suffix to each menu that will appear on the same page.

With the menu suffix in place, your menu's new id will be "mainlevelsuffix". By giving each menu a unique suffix, you will ensure that there will be no conflicting id's in your XHTML markup.

Please note that by changing your menu's id, you will also change how it appears because your CSS file is likely set to modify the menu element with id=mainlevel. You will need to make the appropriate changes to your template css file to ensure that your menus are rendered properly. If you have any qeustions about this, please post them in the comments, and I will do my best to answer them.

Trackback(0)
Comments (8)add comment
BTOS: ...
Still no relevant explanation found here on how menus are supposed to link to invisible pages smilies/angry.gif
1

report abuse
vote down
vote up
September 30, 2006
Votes: +0
Still no relevant explanation found here on how menus are supposed to link to invisible pages


I'm sorry, I don't quite understand what you mean. The purpose of this article was to explain how to display multiple menus without getting an id conflict.

Could you explain what you mean about "how menus are supposed to link to invisible pages"? I can try to explain it for you if I understand what you mean.
2

report abuse
vote down
vote up
September 30, 2006
Votes: +0
jorge: ...
I used to have vertical lists on my menus, but when I came to use flat lists (ul lists) it happended to appear the "id mainlevel already defined" error when xhtml validating. using the "menu class suffix" really solves this problem, and although I'm pretty sure this info is somewhere included deep inside joomla documentation I have to thank Cory for pointing it out.
3

report abuse
vote down
vote up
October 05, 2006
Votes: +0
Thanks for the info Cory. I have a related Joomla menu question maybe you know the answer to.

The Joomla pathway (or breadcrumb, depending on who you're talking to) uses the Itemid. When I have an article residing in /section/category/ and click on the article from there, the pathway shows correctly. But if I publish it on the frontpage, it uses an Itemid of 1, killing the pathway. It just shows up as "Home."

Is there a way to have items shown on the frontpage use the Itemid of their published category (or section?) to preserve the pathway function?
4

report abuse
vote down
vote up
October 26, 2007
Votes: +0
Hi Kevin, that's a great question. My website actually works that way, and I did not do anything special. I'm not sure why yours is not working that way. Is your section or category menu item a blog or a table?
5

report abuse
vote down
vote up
October 26, 2007
Votes: +0
stefano: ...
I have the same pathway problem. And my section menu item is a table, which I prefer, because the blog section doesn't allow to show the creation date in the articles list, only in the full article (unless you can suggest some workaround or hack...)
6

report abuse
vote down
vote up
November 20, 2007
Votes: +0
n1ght_: ...
Hey, guys, I was hoping you can help me with my little problem.
The thing is ... I'm trying to remove a menu when a user clicks on a certain link.
Well, see I have a forum which is bridged (SMF forum), and the wrapper displays it in a bad way.
I want to do something like this -> http://forum.joomla.org
The only thing that I can come up so far is to delete the left navigation panel completely, but I would love to save it on the other pages (if the user is not visiting the forum).
I would appreciate some help.
Thanks.
7

report abuse
vote down
vote up
December 27, 2007
Votes: +0
Sukanya Swadi: ...
I have a problem with showing menus selectively. I have a top menu that should appear on all pages and a series of left menus that appear on selecting the relevant top menu item.

I know that in the Modules Manager, it is important to select the top menu item as well as the left menu items for which the specific left menu should appear.

I had done precisely this...but surprisingly some of my menus show up fine, i.e. on selecting the relevant top menu item the specific left menu appears and remains on when clicking any of those left menu items. But out of 6 such left menus, 3 work fine while others don't. These don't show up unless I select the All option in the Modules Manager. I am foxed!!!
8

report abuse
vote down
vote up
July 05, 2008
Votes: +0

Write comment
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

busy
 
Tag it:
Delicious
Digg
Technorati
Next >
Advertisement

About HowToJoomla

HowToJoomla was started in September 2006 by me, Cory Webb, a long-time Mambo/Joomla user with a desire to give back to the community that has given so much to him.

HowToJoomla is not the best, most comprehensive Joomla tips site out there. That's not the goal. The goal is to share some of the knowledge and experience that I have gained through years of using the world's best content managment system. I hope that you will find this site useful and visit often. As I come across new tips and ideas, I will post them here for all to see.

I hope you enjoy using HowToJoomla and find it very useful.

Please take some time to read the Disclaimer.

Thanks for visiting!

About Me

I am a 28-year-old husband and father of a beautiful baby girl named Lucy. I have a degree in Electrical Engineering from the University of Texas at Austin, an MBA from Baylor University, and over 4 years experience working with the Mambo/Joomla CMS.

On February 1, 2008, I started a web design, development, and consulting company specializing in designing and developing custom Joomla-powered websites. The new company is aptly named Cory Webb Media, LLC. The double meaning is purely unintentional, but with a last name like "Webb" it is difficult to escape the obvious puns. If you are looking for professional assistance with your website, please feel free to contact me to discuss your project.

I also run HowToJoomla, CoryWebb.com (my personal website/blog), and JoomlaForm.com (a site dedicated to promoting good design in the Joomla! community). In my spare time (if there is such a thing), I volunteer with the youth ministry at my church.

Copyright © 2006 - Cory Webb Media, LLC - All rights reserved.
Powered by Joomla!