Joomla menus look up table – User position switches

I remember that one of the most confusing part of learning Joomla was to deal with menus and the code they generate.
To insert a menu in Joomla we have to insert a snippet of code in the template.

 <?php mosLoadModules('user1'); ?>

However, there is more to it. Depending on the type of menu chosen in the Menu Module this code will generate a menu inside a table. Not the most desirable code if your site needs to be accessible or you want to have maximum flexibility in displaying the menu in your template.

Read more about Joomla, Zen cart and web design at: ContiCreative.com

Fortunately, Joomla allows us to use a “switch” in the code to change the menu type, as well as giving us a way in the administration site to choose the kind of menu that best suits our template.

These switches look like this:

<?php mosLoadModules('user1', -1); ?>
<?php mosLoadModules('user1', -2); ?>     

<?php mosLoadModules('user1', -3); ?>

However, I have to admit that even after working with Joomla and Mambo for some time, I don’t always remember off the cuff what each of them does. In addition, in the Joomla menu module there are three parameters that can be assigned to the menus which in turn affect the layout output of the menu. These three options are in the “Menu Style” of the module parameters. The options are:

  • Vertical
  • Horizontal
  • Flat List

My favorite is usually flat list, as it’s the only one that, after carefully choosing the position menu switch in the template, allow the menu to display free of layout tables. These three options are pretty self explanatory: the first two will arrange the links inside a table either in a vertical or horizontal fashion, while the flat list will simply arrange the links inside a Unordered List. Adding the switch in the Joomla position will create a few different layouts for the menu.

Clearly, this can get a bit confusing so I built my own look up table with several combination of switches and parameters.

The look-up table below should be self explanatory. I run the code first without a switch define, then I used the -1,-2,-3 switch in all threee different layouts: Vertical, Horizontal and Flat List.

No switch flat List

<table cellpadding="0" cellspacing="0" class="moduletable">
   <tr><td>
   <ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
   </ul>
 </td></tr></table>

No switch Horizontal

Website Terms of Use
|
Security Policy
|
Privacy Policy
<table cellpadding="0" cellspacing="0" class="moduletable"><tr><td>
   <table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>
   <td nowrap="nowrap">
   <a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a>
</td></tr></table></td></tr></table>

No switch vertical

Website Terms of Use
<table cellpadding="0" cellspacing="0" class="moduletable"><tr><td>
   <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
   <tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>
   <tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>
</table></td></tr></table>

menu module “-1” (flat List) Pure <ul> layout

<ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
</ul>

Horizontal -1

Website Terms of Use
| Security Policy
| Privacy Policy
<table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>
   <td nowrap="nowrap"><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>
   <span class="mainlevel-footer"> | </span><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>
   <span class="mainlevel-footer"> | </span><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td>
</tr></table>

Vertical -1

Website Terms of Use
<table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
   <tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>
   <tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>
</table>

flat List  -2

<div class="moduletable">
   <ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
   </ul>
</div>

Horizontal -2

Website Terms of Use
|
Security Policy
|
Privacy Policy
<div class="moduletable">
   <table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>
   <td nowrap="nowrap">
   <a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a>
   </td></tr></table>
</div>

Vertical -2

Website Terms of Use
<div class="moduletable">
   <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
   <tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>
   <tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>
</table></div>

Flat list -3

<div class="module">
   <div>
   <div>
   <div>
   <ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
   </ul>
   </div>
   </div>
   </div>
</div>

Horizontal -3

Website Terms of Use
|
Security Policy
|
Privacy Policy
<div class="module">     

   <div>     

   <div>     

   <div>     

   <table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>     

   <td nowrap="nowrap">     

   <a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>     

   <span class="mainlevel-footer"> | </span>     

   <a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>     

   <span class="mainlevel-footer"> | </span>     

   <a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a>     

   </td></tr></table>     

   </div>     

  </div>    

   </div>  

</div>

Vertical -3

Website Terms of Use
<div class="module"><div><div><div>   

<table width="100%" border="0" cellpadding="0" cellspacing="0">   

<tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
<tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>     

<tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>     

</table>     

</div></div></div></div>

Naturally, there are issues that will affect the layout of the menu from the CSS point of view, such as adding CSS suffixes in the module interface. In the flat list other issues will involve how the different menus handle sub-menus. I will probably add that to a future article or if this article stirs enough interest I will be glad to touch on it in a future edit. On that note, I may edit this article from time to time and I’ll try to create some better styles for the actual formatting of the code. My time is limited and I apologize I have not had time to install a better text editor in my WordPress blog. I’ll try to get to it as soon as possible. In the meantime the table above is better than nothing and should help you work with the Joomla Menus.

Good Luck.

Check out my new website where I am now maintaining all my blogs Please visit my blog page on www.conticreative.com if you are interested in my articles.
Thank you and I apologize for the inconvenience.
Marco Conti
Advertisements

5 responses to “Joomla menus look up table – User position switches

  1. Maybe you can help..

    I’m currently using the horizontal menu option (i was using the flat list before but ran into a problem like this, http://forum.joomla.org/index.php/topic,116759.0.html and couldnt get it fixed but im going off the point).

    Basically i see that joomla always outputs the horizontal menu into a table with a cellspacing of 1 that is creating a white border around my menu items… is there a way to override that in CSS.. i’ve tried so many things but everything leads to a deadend..

    any ideas what else i can try?

  2. I apologize that today I don’t have much time to look at your menu. I have my own menu to deal with and my hair is turning gray :) However, with CSS you should be able to override any border you want by pointing to the right child element.

    Why don’t you search for the many “flat list” menu tutorials on the web and try to apply their CSS? I have done that once or twice when my css was to messed up to be saved and all I had to do was substitute class and ID names and presto: it worked.

  3. On second thought, I read your post again and if the border is inline you will not be able to override it. Are you sure flat list does not work? That would be my best choice. I am not sure I understand what the issue was with the flat list. Sorry.

  4. Thank you for sharing. I came to this site to read how things really are

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s