To emphasize W3C valid code and lean pages, neither Flash nor JavaScript are generally considered to be favourable. Many (drop down) menu solutions make use of one of these two. There are a number of techniques one can use to get more visually attractive (drop down) menus, almost solely using cascading style sheet (CSS) and limiting the use of Javascript.

+

+

All use unordered lists (ul) to create the menu. An often-used solution is the drop down menus called “Suckerfish” or "Son of Suckerfish." It's pure CSS, very lean, hack free and employs just 12 lines of JavaScript to fix some problems with Microsoft Internet Explorer 6 and earlier. You can see a [http://www.htmldog.com/articles/suckerfish/dropdowns/example/ demo] of what can be created with Suckerfish. More detailed guides about the Suckerfish technique can be found at [http://www.htmldog.com/articles/suckerfish/dropdowns/ htmldog.com] and [http://www.alistapart.com/articles/dropdowns/ alistapart.com].

+

+

__toc__

To emphasize W3C valid code and lean pages, neither Flash nor JavaScript are generally considered to be favourable. Many (drop down) menu solutions make use of one of these two. There are a number of techniques one can use to get more visually attractive (drop down) menus, almost solely using cascading style sheet (CSS) and limiting the use of Javascript.

To emphasize W3C valid code and lean pages, neither Flash nor JavaScript are generally considered to be favourable. Many (drop down) menu solutions make use of one of these two. There are a number of techniques one can use to get more visually attractive (drop down) menus, almost solely using cascading style sheet (CSS) and limiting the use of Javascript.

Line 7:

Line 12:

In order to let Suckerfish function well, you need your menu in the form of a good clean list. It just so happens that there is a module out there to do this. It's called Extended Menu (Module Type: mod_exmenu-j15). You can find it [http://extensions.joomla.org/extensions/163/details Extended menu] and in the [http://extensions.joomla.org JED].

In order to let Suckerfish function well, you need your menu in the form of a good clean list. It just so happens that there is a module out there to do this. It's called Extended Menu (Module Type: mod_exmenu-j15). You can find it [http://extensions.joomla.org/extensions/163/details Extended menu] and in the [http://extensions.joomla.org JED].

−

Download and install the module. Now let’s set it up. It’s easiest if you give it a menu and module class suffix such as “mainnav” (you’ll see in the CSS below). A couple of other settings you will need:

+

Download and install the module. Now let’s set it up:

−

- Menu style: Tree List

+

−

- Expand Menu: Yes

+

In the main Joomla interface, open the '''Extensions''' menu and choose the '''''Module Manager'''''.

+

+

Select your newly added Extended Menu Module by clicking on its name - it'll probably be fairly close to the bottom of the list.

+

+

• Assign a '''Menu suffix''' and a '''Module class suffix''' of "mainnav" (unless you change the CSS, below)

+

+

• Set '''Menu style''': Tree List

+

+

• Set '''Expand Menu''': Yes (don't worry about the tooltip description here - the CSS code takes care of hiding and showing the sub-menus, so they need to always be visible.)

+

+

• You can leave the other settings here at their defaults.

+

+

In order to see it in action, you will likely want to select a set of menus for it to display.

===The Cascading Style Sheet===

===The Cascading Style Sheet===

Line 115:

Line 132:

//--><!]]></script>

//--><!]]></script>

</source>

</source>

+

+

==Suckerfish Combined with the Default Joomla! Menu Module==

+

The second approach is to implement a Drop Down menu using the mod_mainmenu module that comes with Joomal 1.5. I've played around with the “suckerfish” and CSS to make this work. This work perfectly in IE 7 as well as Netscape.

+

+

1. Create your Menu with the following Hierarchy:

+

+

Menu 1.

+

+

– Menu 1 Sub Menu 1.

+

+

– Menu 1 Sub Menu 2.

+

+

– Menu 1 Sub Menu 3.

+

+

2. Make sure the parameters are set to:

+

+

• Menu Style is set to List.

+

+

• Always show sub-menu Items is set to Yes.

+

+

• Menu Class Suffix is set to <b>san</b> - you can pick you own, but then make sure you change it in CSS & JS files.

+

+

3. Insert this piece of JS in your template index.php <head> tag, or in Javascript file that’s called from index.php

+

+

<source lang="javascript">

+

/* ********* drop down menu Java script code - start **********/

+

<script type=”text/javascript”><!–//–><![CDATA[//><!– // don’t need this line if using .JS file

+

sfHover = function()

+

{

+

var sfEls = document.menusan.getElementsByTagName(”LI”);

+

+

for (var j=0; j<sfEls.length; j++)

+

{

+

sfEls[j].onmouseover=function()

+

{

+

this.className+=” sfhover”;

+

}

+

sfEls[j].onmouseout=function()

+

{

+

this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);

+

}

+

}

+

}

+

if (window.attachEvent) window.attachEvent(”onload”, sfHover);

+

//–><!]]></script> // don’t need this line if using .JS file

+

+

/* ********* drop down menu Java script code – end **********/

+

</source>

+

+

4. Here's the corresponding CSS

+

+

Either add these CSS selectors to your template's existing template.css file or create a new CSS file, name it and include it between the <head>...</head> section of the index.php.

You can use a single menu to create multiple drop downs menus. Just create the menu in the following hierarchy and you’ll have 2 drop down menus, Menu 1 & Menu 2.

+

+

Menu 1.

+

+

– Menu 1 Sub Menu 1.

+

+

– Menu 1 Sub Menu 2.

+

+

– Menu 1 Sub Menu 3.

+

+

Menu 2.

+

+

– Menu 2 Sub Menu 1.

+

+

– Menu 2 Sub Menu 2.

+

+

– Menu 2 Sub Menu 3.

+

+

You might have to play with CSS a bit to work out the positions of the second menu etc. (Note: This did not work on the Chrome Browser 5.0.)

+

+

[[Category:Tips and tricks]]

+

[[Category:Tips and tricks 1.0]]

+

[[Category:Tips and tricks 1.5]]

+

[[Category:Tutorials]][[Category:Templates]]

==Suckerfish Combined with the Default Joomla! Menu Module==

==Suckerfish Combined with the Default Joomla! Menu Module==

Revision as of 17:31, 13 January 2011

This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

To emphasize W3C valid code and lean pages, neither Flash nor JavaScript are generally considered to be favourable. Many (drop down) menu solutions make use of one of these two. There are a number of techniques one can use to get more visually attractive (drop down) menus, almost solely using cascading style sheet (CSS) and limiting the use of Javascript.

All use unordered lists (ul) to create the menu. An often-used solution is the drop down menus called “Suckerfish” or "Son of Suckerfish." It's pure CSS, very lean, hack free and employs just 12 lines of JavaScript to fix some problems with Microsoft Internet Explorer 6 and earlier. You can see a demo of what can be created with Suckerfish. More detailed guides about the Suckerfish technique can be found at htmldog.com and alistapart.com.

To emphasize W3C valid code and lean pages, neither Flash nor JavaScript are generally considered to be favourable. Many (drop down) menu solutions make use of one of these two. There are a number of techniques one can use to get more visually attractive (drop down) menus, almost solely using cascading style sheet (CSS) and limiting the use of Javascript.

All use unordered lists (ul) to create the menu. An often-used solution is the drop down menus called “Suckerfish” or "Son of Suckerfish." It's pure CSS, very lean, hack free and employs just 12 lines of JavaScript to fix some problems with Microsoft Internet Explorer 6 and earlier. You can see a demo of what can be created with Suckerfish. More detailed guides about the Suckerfish technique can be found at htmldog.com and alistapart.com.

Suckerfish Combined with the Extended Menu Module

In order to let Suckerfish function well, you need your menu in the form of a good clean list. It just so happens that there is a module out there to do this. It's called Extended Menu (Module Type: mod_exmenu-j15). You can find it Extended menu and in the JED.

Download and install the module. Now let’s set it up:

In the main Joomla interface, open the Extensions menu and choose the Module Manager.

Select your newly added Extended Menu Module by clicking on its name - it'll probably be fairly close to the bottom of the list.

• Assign a Menu suffix and a Module class suffix of "mainnav" (unless you change the CSS, below)

• Set Menu style: Tree List

• Set Expand Menu: Yes (don't worry about the tooltip description here - the CSS code takes care of hiding and showing the sub-menus, so they need to always be visible.)

• You can leave the other settings here at their defaults.

In order to see it in action, you will likely want to select a set of menus for it to display.

The Cascading Style Sheet

You can either add these CSS selectors to your existing template.css or create a new CSS file. If you create a new file be sure to include a reference to it inside the <head>..</head> section of your template's index.php file.

Suckerfish Combined with the Default Joomla! Menu Module

The second approach is to implement a Drop Down menu using the mod_mainmenu module that comes with Joomal 1.5. I've played around with the “suckerfish” and CSS to make this work. This work perfectly in IE 7 as well as Netscape.

1. Create your Menu with the following Hierarchy:

Menu 1.

– Menu 1 Sub Menu 1.

– Menu 1 Sub Menu 2.

– Menu 1 Sub Menu 3.

2. Make sure the parameters are set to:

• Menu Style is set to List.

• Always show sub-menu Items is set to Yes.

• Menu Class Suffix is set to san - you can pick you own, but then make sure you change it in CSS & JS files.

3. Insert this piece of JS in your template index.php <head> tag, or in Javascript file that’s called from index.php

Hint

You can use a single menu to create multiple drop downs menus. Just create the menu in the following hierarchy and you’ll have 2 drop down menus, Menu 1 & Menu 2.

Menu 1.

– Menu 1 Sub Menu 1.

– Menu 1 Sub Menu 2.

– Menu 1 Sub Menu 3.

Menu 2.

– Menu 2 Sub Menu 1.

– Menu 2 Sub Menu 2.

– Menu 2 Sub Menu 3.

You might have to play with CSS a bit to work out the positions of the second menu etc. (Note: This did not work on the Chrome Browser 5.0.)

Suckerfish Combined with the Default Joomla! Menu Module

The second approach is to implement a Drop Down menu using the mod_mainmenu module that comes with Joomal 1.5. I've played around with the “suckerfish” and CSS to make this work. This work perfectly in IE 7 as well as Netscape.

1. Create your Menu with the following Hierarchy:

Menu 1.

– Menu 1 Sub Menu 1.

– Menu 1 Sub Menu 2.

– Menu 1 Sub Menu 3.

2. Make sure the parameters are set to:

• Menu Style is set to List.

• Always show sub-menu Items is set to Yes.

• Menu Class Suffix is set to san - you can pick you own, but then make sure you change it in CSS & JS files.

3. Insert this piece of JS in your template index.php <head> tag, or in Javascript file that’s called from index.php