Actions

J1.5

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

From Joomla! Documentation

m (Suckerfish combined with the default Joomla! menu module)
m (version/tutorial template)
(14 intermediate revisions by 9 users not shown)
Line 1: Line 1:
To emphasize W3C valid code and lean pages, neither flash and JavaScript are generally considered to be favourable. But a lot of (drop down) menu solution make use of one of these two. There are a number of techniques one can use to get this more visually attractive (drop down) menus, almost solely using CSS and limiting the use of javascript to a minimum.
+
{{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 of them use unordered lists (better known as bulleted lists), to create the menu. An often used solution is the drop down menu called “suckerfish”. Its pure CSS, very lean, hack free and just as 12 lines of JavaScript to bail out some tiny problems with IE6 and lower. 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].  
 
+
Suckerfish functions very well in combination with Joomla!.
+
 
__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 outputted as a good clean list. Well it just so happens that there is a module out there to do this. Its called extended_menu, 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.)
  
So, grab the module and install. Now let’s set it up. It’s easiest if you give it a menu and module class suffix. I used “mainnav” (you’ll see in the CSS below). A couple of other settings you will need:
+
• You can leave the other settings here at their defaults.
- Menu style: Tree List
+
- Expand Menu: Yes
+
  
So put the menu where you want it, then to the CSS. This is a little tricky, it took me some trial and error to get the effects I wanted, but you can just skip that part and use mine. :)
+
In order to see it in action, you will likely want to select a set of menus for it to display.
  
For the following, you can either edit the exisitng template_css.css or create a new css file, name it and include in inside the <head>..</head> section.
+
===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.
  
 
<source lang="css">
 
<source lang="css">
#twocols{ /*the columns that gets dropped down over yours might be different*/
+
#twocols{ /* The columns that gets dropped down over yours might be different. */
 
   z-index:20;
 
   z-index:20;
 
}
 
}
  
#leftcol{  /*the columns that gets dropped down over yours might be different*/
+
#leftcol{  /* The columns that gets dropped down over yours might be different. */
 
   z-index:10;
 
   z-index:10;
 
}
 
}
  
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme*/
+
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme. */
 
   position:absolute;
 
   position:absolute;
 
   top:187px;
 
   top:187px;
Line 86: Line 95:
  
 
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
 
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
   l,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
+
   ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
 
   left:auto;
 
   left:auto;
 
   z-index:6000;
 
   z-index:6000;
Line 96: Line 105:
 
</source>
 
</source>
  
Now, just make sure you have the z-indexes set up properly, also remember to have a z-index, the element needs some sort of positioning, if not absolute then relative.
+
Make sure you have the z-indexes set up properly. Also remember, in order to have a z-index, the element needs some sort of positioning. If not absolute, then relative.
  
Last but not least you need to add the JavaScript for IE into the head of the template index.php (or a js file), it doesn’t like the :hover.
+
===The JavaScript File===
 +
You need to insert a reference to the JavaScript file for early versions of Microsoft Internet Explorer into the head of your template's index.php file.
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 117: Line 127:
 
</source>
 
</source>
  
Hopefully, follow this and Bob’s your Uncle you should have clean valid drop downs for your menu.
+
==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.
==Suckerfish combined with the default Joomla! menu module==
+
The second approach is to implement 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:
 
1. Create your Menu with the following Hierarchy:
Line 132: 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 140: Line 148:
 
• 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.
 
• 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 java script file that’s called from index.php
+
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">
 
<source lang="javascript">
Line 167: Line 175:
 
</source>
 
</source>
  
4. Here the corresponding CSS  
+
4. Here's the corresponding CSS  
 
+
Here again, either the exisiting template_css.css (of your template) or create a new css file, name it and include it between the <head>...</head> section of the index.php.
+
Third option can be that you add <script type=text/css">.... here following css code ....</script> and put this into the head section of your index.php.
+
  
'''Never put script code parts (css, java,etc.) directly into the code section of your files. You will loose your XHTML-validy!'''
+
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.
  
 
<source lang="css">
 
<source lang="css">
Line 178: Line 183:
 
.menusan
 
.menusan
 
{
 
{
  /* use these params to positions your menu */
+
  /* Use these parameters to positions your menu. */
 
  position: relative;
 
  position: relative;
 
  left: 10px;
 
  left: 10px;
Line 200: Line 205:
 
.menusan li { /* all list items */
 
.menusan li { /* all list items */
 
  float: left;
 
  float: left;
  width: 10em; /* width needed or else Opera goes nuts */
+
  width: 10em; /* The width is needed by the Opera browser. */
 
  border-bottom:1px solid #ccc;
 
  border-bottom:1px solid #ccc;
 
}
 
}
Line 207: Line 212:
 
  position: absolute;
 
  position: absolute;
 
  width: 10em;
 
  width: 10em;
  left: -98%; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
+
  left: -98%; /* Use left instead of display to hide menus; display: none isn’t read by screen readers. */
 
}
 
}
  
Line 217: 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 menue */
+
  left: auto; /* change this to 10px, 20px, etc for indenting the sub menu */
 
}
 
}
 
/* **************** Dropdown Menu styling end here ***************/
 
/* **************** Dropdown Menu styling end here ***************/
 
</source>
 
</source>
  
5. Save all and you should be good to go
+
5. Save all.
  
6. Trick
+
===Creating Several Menus Using Just One Menu===
You can use a single menu to create multiple drop downs menus. Here’s how to do it. 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.  
  
 
Menu 1.
 
Menu 1.
Line 243: Line 248:
 
– Menu 2 Sub Menu 3.
 
– Menu 2 Sub Menu 3.
  
You might have to play with CSS a bit to work out the positions of the second menu etc.
+
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]]
 
[[Category:Tips and tricks 1.0]]
 
[[Category:Tips and tricks 1.0]]
 
[[Category:Tips and tricks 1.5]]
 
[[Category:Tips and tricks 1.5]]
 +
[[Category:Tutorials]][[Category:Templates]]

Revision as of 21:54, 17 September 2012

Replacement filing cabinet.png
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.

Contents

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.

#twocols{ /* The columns that gets dropped down over yours might be different. */
  z-index:20;
}
 
#leftcol{  /* The columns that gets dropped down over yours might be different. */
  z-index:10;
}
 
.moduletablemainnav { /* I have absolutely positioned the module, you might have a different scheme. */
  position:absolute;
  top:187px;
  left:20px;
  z-index:100;
  font:0.9em Verdana, Arial, Helvetica, sans-serif;
  margin:0;
  padding:0;
}
 
#mainlevelmainnav,#mainlevelmainnav ul {
  float:left;
  list-style:none;
  line-height:1em;
  background:transparent;
  font-weight:700;
  margin:0;
  padding:0;
}
 
#mainlevelmainnav a {
  display:block;
  color:#f90;
  text-decoration:none;
  margin-right:15px;
  padding:0.3em;
}
 
#mainlevelmainnav li {
  float:left;
  padding:0;
}
 
#mainlevelmainnav li ul  {
  position:absolute;
  left:-999em;
  height:auto;
  width:11em;
  font-weight:400;
  background:#36f;
  border:#00C 1px solid;
  margin:0;
}
 
#mainlevelmainnav li li {
  width:11em;
}
 
#mainlevelmainnav li ul a {
  width:11em;
  color:#fff;
  font-size:0.9em;
  line-height:1em;
  font-weight:400;
}
 
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
  left:-999em;
}
 
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
  ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
  left:auto;
  z-index:6000;
}
 
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover {
  background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

Make sure you have the z-indexes set up properly. Also remember, in order to have a z-index, the element needs some sort of positioning. If not absolute, then relative.

The JavaScript File

You need to insert a reference to the JavaScript file for early versions of Microsoft Internet Explorer into the head of your template's index.php file.

<script type="text/javascript"><!--//--><![CDATA[//><!--
  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
           this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
     }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

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 mod_mainmenu 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

/* ********* 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  **********/

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.

/****************** Dropdown Menu styling starts here **************/
.menusan
{
 /* Use these parameters to positions your menu. */
 position: relative;
 left: 10px;
}
 
.menusan, .menusan li, .menusan li ul { /* all lists */
 padding: 0;
 margin: 0;
 list-style: none;
}
 
.menusan li a {
 display: block;
 width: 10em;
 color:#FFFFFF ;
 background-color:#BC031F;
 border:2px solid #BC031F;
 text-decoration:none;
}
 
.menusan li { /* all list items */
 float: left;
 width: 10em; /* The width is needed by the Opera browser. */
 border-bottom:1px solid #ccc;
}
 
.menusan li ul { /* second-level lists */
 position: absolute;
 width: 10em;
 left: -98%; /* Use left instead of display to hide menus; display: none isn’t read by screen readers. */
}
 
.menusan li a:hover {
 border:2px solid #8C7AD6;
 background-color:#8C7AD6;
 color:#fff;
}
 
.menusan li:hover ul, .menusan li.sfhover ul  { /* lists nested under hovered list items */
 left: auto; /* change this to 10px, 20px, etc for indenting the sub menu */
}
/* **************** Dropdown Menu styling end here ***************/

5. Save all.

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.

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.)