April 2nd, 2010 by J
This is very helpful post provided by the Awareness engine and it saved me hours of stress when it comes to the Joomla Menu system.
Thanks.
I thought I’d have a whirl at explaining how to style Joomla menu’s when set to List format, which is probably the best method to use and more versatile. First things first, is to look at some HTML output from a main_menu module.
1
2
3
4
5
6
7
8
9
10
|
<div class="moduletable"> _menu suffix applied to default menu that includes homepage
<ul class="menu">
<li class="parent active item299"><a href="#"><span>Design</span></a>
<ul>
<li class="active item313" id="current"><a href="#"><span>3D</span></a></li>
<li class="item304"><a href="#"><span>File/Media Types</span></a></li>
</ul>
</li>
</ul>
</div>
|
The Design menu example is formatted via administration, as below. Normally, all items are listed straight down without being sub-items, however, this is List formatting and because the default .moduletable <h3> heading CAN’T be styled as ‘active’, this is why you would use this structure. See this article for creating custom module styles.
Fig. 1.
The CSS definitions applied to the <li> items depending on their state are as follows:
#menu CSS ID is applied to the first main <ul> only
#current CSS ID applied to <li> for the current item
.active CSS Class applied to <li> for the current item
.parent CSS Class applied to <li> if child links exist
.item[ItemID] class applied to the <li>
Where ID is termed below, this refers to CSS ID and not Joomla menu item ID’s.
From the above rules, different definitions are applied to li items below the main #menu ID, which makes for exact state styling (and potentially very mind-numbing), as opposed to the older mainlevel style used in Legacy formats, which was limited to two-levels main and sub level, and sub level couldn’t be styled as singularly active. With Lists, you can achieve this.
As CSS is cascading one thing to be considered is the structure of your menu’s and how many levels you’re going to use. With unordered lists you can have as many levels as required, though you wouldn’t sensibly style more than three to four levels below the #menu ID. Additionally, the rules you define for ul and li items at the top of the structure from the second level on, will affect lower ul and li items unless you override those definitions with new ones.
For each li item that has a child element, a new ul is created with child li element(s). For example, if we had a menu structure that was three levels deep, the HTML structure would be similar to:
<div>
<ul> LEVEL ONE
<li><a href=”#”><span>Design</span></a>
<ul> LEVEL TWO
<li id=”current”><a href=”#”><span>3D</span></a></li>
<li><a href=”#”><span>File/Media Types</span</a></li>
<ul> LEVEL THREE
<li><a href=”#”><span>Online Proofing</span></a></li>
<li><a href=”#”><span>Portfolio</span></a></li>
</ul>
<li><a href=”#”><span>Printing</span></a></li>
<li><a href=”#”><span>Creative Articles</span></a></li>
</ul>
</li>
</ul>
</div>
For CSS styling purposes, it’s better to forget about the possible states at the beginning and concentrate on the hierarchy, as follows:
- Define any CSS ID areas in your template for your navigational menus, in this example this will be #navleft.
- Define, if any, the styling of the module wrapper .moduletable.
- Define, the first #menu ul ID. In the Design menu above, this is the styling of the Design text and background image #navleft .moduletable ul.menu. You can leave out .moduletable if desired here, or if using a CSS suffix applied in the module parameters, leave off #navleft and style something like .moduletablemysuffix ul.menu.
Okay, firstly we’re going to think about the Unordered Lists and remove all default bullets and padding. This will affect all <ul> tags within #navleft:
1
2
3
4
|
#navleft ul {
list-style-type: none;
padding-left: 0;
}
|
Next, you want to define any spacing, text styling values for subsequent <ul> tags, drilling down the hierarchy as many times as you need to:
1
2
3
4
5
6
|
#navleft ul ul {
padding-left: 18px;
}
#navleft ul ul ul {
padding-left: 10px;
}
|
You can also do the <li> tags in the same way: #navleft li, #navleft li li. YOU DON’T HAVE TO INCLUDE ALL THE UL AND OTHER CSS PREFIXES BEFORE THEM! This is only useful for spacing and the like where states such as active and parent don’t count.
The Levels
Fig. 2.
Level One
Now to think about styling the top menu item, see Fig. 2. In our List navigation menus, there’s actually three possible states and they should be defined with active and inactive before hovered:
- Active.
#navleft ul li.active a:link, #navleft ul li.active a:visited { }
- Inactive.
#navleft ul li a:link, #navleft ul li a:visited { }
- Hovered.
#navleft ul li a:hover, #navleft ul li a:focus { }
Level Two
Next are the second level items or sub-level items, again 3 states with essentially just ul li and ul li.active added to the above:
- Active.
#navleft ul li.active ul li.active a:link, #navleft ul li.active ul li.active a:visited { }
- Inactive.
#navleft ul li.active ul li a:link, #navleft ul li ul li a:link, #navleft ul li.active ul li a:visited, #navleft ul li ul li a:visited
- Hovered.
#navleft ul li.active ul li a:hover, #navleft ul li ul li a:hover, #navleft ul li.active ul li a:focus, #navleft ul li.active ul li a:focus
Level Three
Next are the third level items or sub-level items, again 3 states with essentially just ul li and ul li.active added to the above:
- Active.
#navleft ul li.active ul li.active ul li.active a:link,#navleft ul li.active ul li.active ul li.active a:visited { }
- Inactive.
#navleft ul li.active ul li.active li a:link,#navleft ul li ul li li a:link,#navleft ul li.active ul li.active li a:visited,#navleft ul li ul li li a:visited
- Hovered.
#navleft ul li.active ul li.active li a:hover,#navleft ul li ul li li a:hover,#navleft ul li.active ul li.active li a:focus,#navleft ul li ul li li a:focus
Rather than show the CSS definitions for each level, I’ve included the CSS file for this design, which reminds me to mention to create a unique CSS file for menu styling.
Active / Parent States
You’ll see from Fig. 2 above that I’ve styled a little down and up arrow depending on whether the parent item is active. You can achieve this with the following CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#navleft ul li.active ul li.parent span {
background-image: url(../images/downarrow.gif);
background-position: right center;
padding-right: 12px;
background-attachment: scroll;
background-repeat: no-repeat;
}
#navleft ul li.active ul li.parent.active span {
background-image: url(../images/uparrow.gif);
background-position: right center;
padding-right: 12px;
background-attachment: scroll;
background-repeat: no-repeat;
|
