Actions

J1.5

Difference between revisions of "Creating a CSS Drop down Menu"

From Joomla! Documentation

(Clarified some text. Corrected punctuation.)
m (version/tutorial template)
Line 1: Line 1:
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.
+
{{version/tutor|1.5}}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].  
 
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__
 
__toc__
 
==Suckerfish Combined with the Extended Menu Module==
 
==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 [http://de.siteof.de/extended-menu.html here] 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:
 +
 
 +
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.
  
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:
+
In order to see it in action, you will likely want to select a set of menus for it to display.
- Menu style: Tree List
+
- Expand Menu: Yes
+
  
 
===The Cascading Style Sheet===
 
===The Cascading Style Sheet===
Line 129: Line 140:
 
– Menu 1 Sub Menu 3.
 
– Menu 1 Sub Menu 3.
  
2. Make sure the parameters are set to:
+
2. Make sure the mod_mainmenu parameters are set to:
  
 
• Menu Style is set to List.
 
• Menu Style is set to List.
Line 211: Line 222:
  
 
.menusan li:hover ul, .menusan li.sfhover ul  { /* lists nested under hovered list items */
 
.menusan li:hover ul, .menusan li.sfhover ul  { /* lists nested under hovered list items */
  left: auto; /* change is to 10px, 20px, etc for indenting the sub menu */
+
  left: auto; /* change this to 10px, 20px, etc for indenting the sub menu */
 
}
 
}
 
/* **************** Dropdown Menu styling end here ***************/
 
/* **************** Dropdown Menu styling end here ***************/
Line 218: Line 229:
 
5. Save all.
 
5. Save all.
  
===Hint===
+
===Creating Several Menus Using Just One Menu===
 
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.  
 
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.  
  

Revision as of 20:54, 17 September 2012