Compassdesigns.net

Teaching - Web - Sailing

  • Home
  • Services

Menus and Submenus in Joomla 1.5

November 12, 2006 By barrie@compassdesigns.net Leave a Comment

Menu and Module Class suffixes

These control the appearance of menus. All of the menus use CSS in the template to style how they look. By carefully coding the CSS, the menuÂ’s appearance can be quickly and easily changed based on the suffixes used. An example of how this works might be different colored rounded boxes as shown below with our Joomlashack examples. These are four popular templates:

  • demotemplates.joomlashack.com/lush
  • demotemplates.joomlashack.com/element
  • demotemplates.joomlashack.com/simplicty
  • demotemplates.joomlashack.com/lightfast

Joomla Menu Examples 

Menu Styles

There are two main ways to display your menu. One is to use a table for the layout (either vertical or horizontal) and the other is to use a bulleted list. In other tutorials I have discussed at length template design and how to make W3C valid websites. A big part of this is the subtle design differences between using tables or pure CSS for layout. This is getting technical, just know that you need to select whatever the template documentation calls for. Also, you can’t have sublevels currently in 1.0.X with a flat list.

At the time of writing, Joomla 1.5 has legacy support for the previous way that a bulleted list was rendered (flat list) and a new way that allows more flexibility (list).

Thus there are currently 4 options:

  1. List – New method of showing a bulleted list
  2. Vertical – uses a vertical table
  3. Horizontal – uses a horizontal table
  4. Flat List – old method of showing a bulleted list

Submenus

Joomla has a feature where you can create submenus and they can be displayed in various ways. In the previous version of Joomla, it was not possible to have submenus if you were displaying your menu as a flat list. This was an issue as a bulleted list is a much more standards compliant method of displaying links.

In 1.5, this functionality is added to menus. It allows you to have submenus and flat lists. This is very important, as in the hands of a skilled template designer it allows you to do things like have dropdown menus and images for links without having to resort to JavaScript or tables, both of which are bad for accessibility, SEO and W3C compliance.

If “always show submenu items” is set to “yes” you get the out put shown below. Note that you MUST have the menu style selected as List.

<ul class=”mainmenu”
<li class=”level1 item1″
<a href=”/”
</li
<li class=”level1 item2″
<a href=”/”
</li
<li class=”level1 item3 parent”
<a href=”/”

<ul
<li class=”level2 item1″
<a href=”http://www.compassdesigns.net”
</li
<li class=”level2 item2″
<a href=”http://www.joomlashack.com”
</li
</ul

</li
<li id=”current” class=”level1 item4 active”
<a href=”/”
</li
</ul

Notice the new output. There are multiple classes on the <li

This feature is very welcome to the flexibility of menus in dev blog at the Joomla site.

Filed Under: Uncategorized

The Skinny

I am an entrepreneur, web consultant, author and educator.

I have been involved in starting a K-12 School District, a Private High School, and three web tech companies. I also wrote one of the original and best selling books on Joomla.

And I like sailing with kids.

Recent Posts

  • Teenager Invents New Type of Hunting Camo Suit
  • A Parent’s Guide to Proficiency Based Learning
  • Proficiency/Competency Based Learning in NGSS Classrooms
  • Hunting Camouflage Website Launched
  • Get More Email Newsletter Signups With These Easy Tips
  • Proficiency Based Learning Resources
  • Social Media Redux
  • How to turn off WordPress Comments if you use Disqus
  • The API was Yesterday. The Tomorrow is iPaaS
  • Left Hook Digital Named Zapier’s First Integration Developer Partner

Top Posts

  • Proficiency Based Learning Resources
  • Joomla 1.5 Template Tutorial
  • What Exactly is Standards-Based Teaching and Learning
  • What is Zapier?

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

Copyright © 2021 Compass Designs · Musings on Education, Life, Joomla and the Web by Barrie North