As we have seen in our previous image, for now, our menu is quite limited. The submenus are appearing just under their menus, but they don't really look quite good.

If we want to convert this unfinished menu into a working drop-down menu, we can use a lot of possibilities. We will be able to do it with CSS, a bit of JavaScript, or by using Joomla! extensions—and maybe I'm missing out some other way as well.

To start with, we are going to try it with CSS alone. Let's check the source code generated for our menu. It will look similar to the following:

<div id="mainmenu">
                        <ul class="menu">
                        <li id="current" class="active item1"> <a href="http://wayofthewebninja.com/"><span>Home</span></a></li>
                        <li class="parent item2"> <a href="/index.php?option=com_content&amp;view=category&amp; layout=blog&amp;id=1&amp;Itemid=2"><span>News</span></a>
                        <ul>
                        <li class="item4"> <a href="/index.php?option=com_content&amp;view=article&amp; id=2&amp;Itemid=4"><span>News 1</span></a></li>
                        <li class="item5"> <a href="/index.php?option=com_content&amp;view=article&amp; id=3&amp;Itemid=5"><span>News 2</span></a></li>
                        <li class="item6"> <a href="/index.php?option=com_content&amp;view=article&amp; id=4&amp;Itemid=6"><span>News 3</span></a></li>
                        <li class="item7"> <a href="/index.php?option=com_content&amp;view=article&amp; id=7&amp;Itemid=7"><span>News 4</span></a></li>
                        </ul>
                        </li>
                        <li class="item3"> <a href="/index.php?option=com_content&amp;view=article&amp; id=9&amp;Itemid=3"><span>Code highlight</span></a></li>
                        </ul>
                        </div><!-- End of mainmenu -->
                    

Let's summarize this code so that we can see the important parts of it. Look closely:

<ul>
                        <li>Menu 1
                        <ul>
                        <li>Submenu 1</li>
                        <li>Submenu 2</li>
                        <li>Submenu 3</li>
                        <li>Submenu 4</li>
                        </ul>
                        </li>
                        </ul>
                    

Now we can see the structure more easily, and we can also see that it includes an unordered list nested within another one. With this structure we are able to create a CSS drop-down menu with very little code.

Oh, I know I told you that we will start coding in the next chapter, but let's take this as a small introduction. Open the templates/jj15/css/styles.css file, and add the following code at the end:

/**
                        * CSS dropdown styles
                        */
                        ul.menu {
                        padding: 0;
                        margin: 0;
                        list-style: none;
                        }
                        ul.menu li {
                        float: left;
                        position: relative;
                        }
                        ul.menu li ul {
                        display: none;
                        position: absolute;
                        top: 25px;
                        left: 0;
                        z-index: 102;
                        }
                        ul.menu li ul li {
                        background-color: #4C4841;
                        padding: 4px;
                        padding-left: 10px;
                        width: 75px;
                        border: 1px solid #5B5751;
                        }
                        ul.menu li:hover ul {
                        display: block;
                        }
                    

Most of this code is only there to position the submenus under their menus, and also to give some color to the submenu elements. The important parts are as follows:

ul.menu li ul {
                        display: none;
                    

This code hides the submenu, so we can't see it. But then we have the following code:

ul.menu li:hover ul {
                        display: block;
                        }
                    

This code makes the menus visible when the mouse pointer is over the Main Menu. An image is better than a thousand words, so let's take a look at the result (as seen in the following screenshot):

Our menu now has a nice drop-down effect, and we have been able to accomplish it with only a bit of CSS. We can group our menus into drop-down menus to organize them better. But we have some limitations here:

All of these problems can be solved with some coding. For example, we can follow the guidelines found at the following links:

There's lot more out there. However, once we have seen an easy and fast way to have drop-down menus on standard compliant browsers, I think our next best step will be to use a Joomla! extension to create our menus.

Using a Joomla! module for creating our menus has some benefits that must be taken into account. For example, they have some nice effects, such as fade effects, shadows, and many more.

These effects can make our site look a bit more appealing. They can also solve the problems that we have previously found, such as the menu not working in other browsers or the number of sublevels we are able to have.

With all this in mind we are going to see the Superfish Dropdown Menu. Search for it on the JED by that name, or find it at the following URL:

http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/6731

As the module description itself states on this page, it's based on the Suckerfish-style menu—yes, the one we have been using in our CSS example—but this time with some jQuery added to it and all put into a Joomla! module.

Once we have downloaded it, our next step will be to go to the administrator screen of our site. Then go to Extensions | Install/Uninstall. Here, after selecting the file, click on the Upload file & Install button.

Hopefully, the extension will be installed without problems and you will find it in Extensions | Module Manager.

As this module will substitute our current Main Menu module, we need to disable the Main Menu module, and enable the Superfish Menu module as shown in the following screenshot:

After doing so, you can click on the Superfish Menu. Do so now, and look at the parameters found in it, as shown in the next screenshot:

There are still more parameter's in the module, but we will start with the following ones:

We have configured quite a few parameters, but before seeing our menu in action we need to do something more. At the very bottom of the parameters we can see the options for the jQuery library:

We are almost done now, and only a few parameters need to be changed—the ones in the Details part, to the left-hand side—as we can see in the following screenshot:

Here we need to perform some minor changes. The Title is not so important, as we are selecting No in Show Title. Of course, we need to enable the module if we haven't done so before. And last, but not least, is the module Position. For our current template and example, we are going to select the menu position of our template.

And that's all; we can save our changes and take a look at the frontend. If all has gone OK, and hopefully it has, we will be able to see something similar to the following screenshot:

I know, I know, this needs some styling, but I just wanted you to see the result of our work. We can also comment on the benefits of this module over our previous CSS-only version. For example, and to name only some of them:

Adapting the menu to suit our template

Now that we have our menu working, we are going to make the styling more in consonance with our template. Don't worry, this part will be easy, and more fun I think.

First open the templates/jj15/css/styles.css file and remove all of the styles that we placed before. These are all the styles that were placed under this comment:

/**
                            * CSS dropdown styles
                            */
                        

This way we will start working from the ground up with our new styles. Now if we take a look at our source code, we can see a code similar to the following:

<div id="mainmenu">
                            <ul class="menu sf-menu sf-horizontal">
                            <li id="current" class="first-child active item1"><a href="http://wayofthewebninja.com/"><span>Home</span></a></li>
                            <li class="parent item2"><a href="/index.php?option=com_content&amp;view=category&amp; layout=blog&amp;id=1&amp;Itemid=2"><span>News</span></a>
                            <ul>
                            <li class="first-child item4"><a href="/index.php?option=com_content&amp;view=article&amp; id=2&amp;Itemid=4"><span>News 1</span></a></li>
                            <li class="item5"><a href="/index.php?option=com_content&amp;view=article&amp; id=3&amp;Itemid=5"><span>News 2</span></a></li>
                            <li class="item6"><a href="/index.php?option=com_content&amp;view=article&amp; id=4&amp;Itemid=6"><span>News 3</span></a></li>
                            <li class="last-child item7"><a href="/index.php?option=com_content&amp;view=article&amp; id=7&amp;Itemid=7"><span>News 4</span></a></li>
                            </ul>
                            </li>
                            <li class="item3"><a href="/index.php?option=com_content&amp;view=article&amp; id=9&amp;Itemid=3"><span>Code highlight</span></a></li>
                            <li class="last-child item8"><a href="/index.php?option=com_content&amp;view=article&amp; id=10&amp;Itemid=8"><span>Flicker</span></a></li>
                            </ul>
                            </div><!-- End of mainmenu -->
                        

As we can see, it's mostly the same code that we have before installing the menu module. We have the two nested lists. However, some classes have been added, and this is great because this gives us more control when styling.

Note that some of these styles make mention of child elements, such as first-child, last-child, and so on. Child elements are elements that are inside another element. So the first-child would be the first element found inside the other element and the last-child would be the last.

This differentiation makes it easier to style elements; we can take advantage of these new classes.

But first, let's return to our administrator screen. Go to Extensions | Module Manager, and click on the Superfish Menu. We need to add something to the module parameters. Once in the module's admin screen, look for the Custom Styling parameter. It looks similar to the following screenshot:

This parameter lets us add our custom CSS stylesheet. This way we don't need to modify module files, and we can create our own file. This file will prevail upon the module CSS files. For example, I've put in the following parameter:

{mostemplate}/css/menu.css
                        

First save this change. Then we need to create the menu.css file in templates/jj15/css. Create the file and open it; we are going to add the following styles to it:

.menu{
                            margin-top: -3px;
                            margin-left: -15px;
                            }
                        

This is only to move the menu a bit. Now add the background colors, borders, and so on, of the first-level li elements:

.menu li{
                            background-color: #938F89;
                            border: 1px solid #211F1B;
                            }
                            .menu li a{
                            border-top: 1px solid #DEDEDE;
                            border-left: 1px solid #DEDEDE;
                            }
                        

For the second-level li elements add the following styles:

.menu li ul li{
                            background-color: #938F89;
                            border: 1px solid #211F1B;
                            }
                            .menu ul li li a{
                            border-top: 1px solid #DEDEDE;
                            border-left: 1px solid #DEDEDE;
                            }
                        

For the current active menu add the following styles:

#current a{
                            background-color: #9A0000;
                            color: #ffffff;
                            font-weight: bold;
                            border-top: 1px solid #D70000;
                            border-left: 1px solid #D70000;
                            }
                        

And lastly, for the hovering elements add the following styles:

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
                            background: #000000;
                            }
                        

With all these changes, our menu will look more or less as follows:

Much better now, isn't it? With very little effort our menu looks a lot better. Of course, this module has many other options, so why don't you give it a try? This is an extension that we could always use to modify and try out options, or to just play with it!

Tip

You can find the code for this example inside the css_dropdown_2.txt file in the code bundle for Chapter 4 of the book.