|
 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.
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 demo of what can be created with Suckerfish. More detailed guides about the Suckerfish technique, can be found at [1] and alistapart.com. Suckerfish functions very well in combination with Joomla!.
Suckerfish combined with the extended menu moduleIn 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 here and in the JED. 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: - 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. :) #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
l,#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;
} 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. 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. <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> 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 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 java script 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 the corresponding CSS /****************** Dropdown Menu styling starts here **************/
.menusan
{
/* use these params 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; /* width needed or else Opera goes nuts */
border-bottom:1px solid #ccc;
}
.menusan li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -98%; /* using left instead of display to hide menus because 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 is to 10px, 20px, etc for indenting the sub menue */
}
/* **************** Dropdown Menu styling end here ***************/ 5. Save all and you should be good to go 6. Trick 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. 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. (Source: www.joomla.org)
 |
Joomla Trick & Tips 
Dec.20
Subscribe to this comment's feed
