FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog
Published on 18 May 2007

Joomla Template Tutorial - Menus

Article Index

Menus

Setting that control how a menu is outputted are controlled in the module that publishes it. When you first make a module you will see a note that tells you that a module has been created with the same name.

New Menu Created

In the module for that menu, there are several options for how the menu is presented:

Menu Options

  • Vertical
    The menu appears as a vertical table
  • Horizontal
    The menu appears as a horizontal table
  • Flat List
    The menu appears as a flat <ul> CSS list

The table format produces code such as:

<div class="moduletable">
<h3>Main Menu</h3>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left">
<td> <a href="/component/frontpage/" class="mainlevel" id="active_menu">Home</a>
</td>
</tr>
<tr align="left">
<td> <a href="/component/content/?task=view&id=5" class="mainlevel" >Joomla! License</a> </td></tr> <tr align="left"><td><a href="/component/content/?task=section&id=1" class="mainlevel" >News</a>
</td>
</tr>
<tr align="left">
<td> <a href="/component/content/?task=blogsection&id=0" class="mainlevel" >Blog</a>
</td>
</tr>
<tr align="left">
<td> <a href="/component/weblinks/" class="mainlevel" >Links</a> </td></tr> <tr align="left"><td> <a href="/component/contact/" class="mainlevel" >Contact Us</a>
</td>
</tr>
<tr align="left">
<td> <a href="/component/search/" class="mainlevel" >Search</a>
</td>
</tr>
<tr align="left">
<td>
<a href="/component/newsfeeds/" class="mainlevel" >News Feeds</a>
</td>
</tr>
<tr align="left">
<td> <a href="/component/content/?task=category&sectionid=3&id=7" class="mainlevel" >FAQs</a>
</td>
</tr>
<tr align="left"><td> <a href="/component/wrapper/" class="mainlevel" >Wrapper</a>
</td>
</tr>
</table>
</div>

The flat list will produce (for the same menu):

<div class="moduletable">
<h3>Main Menu</h3>
<ul id="mainlevel">
<li><a href="/component/frontpage/" class="mainlevel" id="active_menu">Home</a></li>
<li><a href="/component/content/?task=view&id=5" class="mainlevel" >Joomla! License</a></li>
<li><a href="/component/content/?task=section&id=1" class="mainlevel" >News</a></li>
<li><a href="/component/content/?task=blogsection&id=0" class="mainlevel" >Blog</a></li>
<li><a href="/component/weblinks/" class="mainlevel" >Links</a></li>
<li><a href="/component/contact/" class="mainlevel" >Contact Us</a></li>
<li><a href="/component/search/" class="mainlevel" >Search</a></li>
<li><a href="/component/newsfeeds/" class="mainlevel" >News Feeds</a></li>
<li><a href="/component/content/?task=category&sectionid=3&id=7" class="mainlevel" >FAQs</a></li>
<li><a href="/component/wrapper/" class="mainlevel" > Wrapper</a></li>
</ul>
</div>

Again, using CSS lists rather than tables results in reduced code and easier markup. After setting all our menus to flat lists we have only 12 tables (the rest cannot be removed withour hacking). Lists are also better than tables because text-based browsers, screen readers, non-CSS supporting browser, browsers with CSS turned off and search bots will be able to access your content more easily.

One of the other advantages of using CSS for menus is that there is alot of example code on various CSS developer sites. Lets look at one of them and see how it can be used.

A web page at maxdesign.com has a selection of over 30 menus all using the same underlying code. Its called the Listamatic. There is a slight difference in the code that we have to change in order to adapt these menus to Joomla.

These lists use the following code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li>
</ul>
</div>

This means that there is an enclosing <div> called navcontainer and the <ul> has an id of navlist.. To duplicate this effect in Joomla, we need to add a module location, let's use user1 before the left modules.

<div id="sidebar">
<div class="inside">
<div id="navcontainer">
<?php mosLoadModules('user1',-2);?>

</div>

<?php mosLoadModules('left',-2);?>
</div></div>

Note that we place the mosLoadModules inside the <div> that matches those from ListaMatic. This could be any name, but for the purposes of this tutorial, its useful to be able to easily use all those menus!

Next, if there are any references to navlist, for Joomla this is output as mainlevel:

<ul id="mainlevel">

Lastly, we need to add a CSS module suffix to the module in the admin backend so that module can receive unique CSS styles.

Module Suffix

A Module Class Suffix can be used on any module. When outputted, the names of the <div> for that module will have the suffix appended.

So in this case:

  • If it is using a -2 style it would be .moduletable-leftnav.
  • If it is using a -3 style it would be .module-leftnav.

This use of a module class suffix is very useful. We will see in the Tips and Tricks section that it allows different colored boxes with just a simple change of the module class suffix.

For our site we will use List 10 by Mark Newhouse. Our CSS will be:

.moduletable-leftnav{
margin-bottom:1em;
padding:0; /*the padding is removed so the menu fills the whole module box*/
border:1px #CCC solid;
}
.moduletable-leftnav h3{
background:#666;
width:100%;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0;
/*now we have no padding in the module, we don't need the negative margins*/ border-bottom: 1px solid #CCC;
}
#navcontainer{
padding:0;
color: #333;
}
#navcontainer ul{
list-style: none;
margin: 0;
padding: 0;
}
#navcontainer li{
border-bottom: 1px solid #ccc;
margin: 0;
}
#navcontainer li a{
display: block;
padding: 3px 5px 3px 0.5em;
border-left: 10px solid #333;
border-right: 10px solid #9D9D9D;
background-color:#666;
color: #fff;
text-decoration: none;
}
html>body #navcontainer li a {
width: auto;
}
#navcontainer li a:hover,a#active_menu:link,a#active_menu:visited{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

 

Designer's Tip

When trying to get a particular menu to work, here is a useful tip. Create a default Joomla installation and then look at the code that is the mainmenu. Copy and paste this code into an HTML editor (like Dreamweaver). Replace all the links by "#" and then you can add CSS rules until the effect you want is acheived. The code for the menu to create the style is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!-- .thisisyourCSS {
/* put a rule here*/
} -->
</style>
</head>

<body>

<div class="moduletable">
<h3>Main Menu</h3>
<ul id="mainlevel">
<li><a href="#" class="mainlevel" id="active_menu">Home</a></li>
<li><a href="#" class="mainlevel" >Joomla! License</a></li>
<li><a href="#" class="mainlevel" >News</a></li>
<li><a href="#" class="mainlevel" >Blog</a></li>
<li><a href="#" class="mainlevel" >Links</a></li>
<li><a href="#" class="mainlevel" >Contact Us</a></li>
<li><a href="#" class="mainlevel" >Search</a></li>
<li><a href="#" class="mainlevel" >News Feeds</a></li>
<li><a href="#" class="mainlevel" >FAQs</a></li>
<li><a href="#" class="mainlevel" >Wrapper</a></li>
</ul>
</div>
</body>
</html>

Note the CSS is embedded rather than linked to make editing easier.

published in Joomla Tutorials

RECENT POSTS