Online Tips for Web Developer/Designer

How to implement your very own suckerfish dropdown menu to your own joomla templates.

First create a javascript file for the dropdown action, within your template create a folder name js, and create a file name called cssmenu.js and insert the following code in it.

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

In the head section of your template index.php file, you will need to enter the following line of code to call up the javascript.

<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/cssmenu.js"></script>

In your template you will need to include the following code. Place the code where you want your menu to display. and we name the module hornav. Be sure to add this module position within your module setup screen.

<div id="mainlevelmainnav">
     <div class="hornav">
         <jdoc:include type="modules" name="hornav" style="xhtml" />
     </div>
</div>

To complete the dropdown menu, you will need to insert the proper css code that we had written. The menu is currently best fit with our own template system. DS Busuit. If you are having trouble with your template, be sure to submit your comments and I will see how I can help you out with it.

.hornav div{display:inline;}
.hornav {float:left; display:inline; margin-top:43px;}

#mainlevelmainnav, #mainlevelmainnav ul {
	float: left;
	list-style: none;
	line-height: 1;
}


#mainlevelmainnav a {
	display: block;
}

#mainlevelmainnav li {
	float: left;
	padding: 0;
}
#mainlevelmainnav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 18em;
	w\idth: 17.9em;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0;
	z-index:1;
}
 
#mainlevelmainnav li li {
	padding-right: 1em;
	list-style:none;
	background:none;
	width: 18em;
}
 
#mainlevelmainnav li ul a {
	width: 18em;
	w\idth: 17.6em;
}
 
#mainlevelmainnav li ul ul {
	margin: -1.75em 0 0 12em;
	background:#e7e7e7 url(../images/menu_li.gif) top right;
}
 
#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;
}
 
#mainlevelmainnav li:hover, #mainlevelmainnav li.sfhover {
}
#mainlevelmainnav ul.menu {
	margin:0;
	background: ;
}

#mainlevelmainnav ul.menu li {
	background:#e7e7e7 url(../images/menu_li.gif) top right no-repeat;
}

#mainlevelmainnav ul.menu li a
{
	color: #656565;
	padding: 2px 0;
	display: block;
	text-decoration: none;
	outline: none;
	background:none;
}

#mainlevelmainnav ul.menu li a span,
#mainlevelmainnav ul.menu li li a span{
	padding: 0 15px;
	background: none;
}

#mainlevelmainnav ul.menu li li li a:hover,
#mainlevelmainnav ul.menu li li li a:active,
#mainlevelmainnav ul.menu li li li a:focus,
#mainlevelmainnav ul.menu li li a:hover,
#mainlevelmainnav ul.menu li li a:active,
#mainlevelmainnav ul.menu li li a:focus,
#mainlevelmainnav ul.menu li a:hover,
#mainlevelmainnav ul.menu li a:active,
#mainlevelmainnav ul.menu li a:focus,
#mainlevelmainnav ul.menu li:hover,
#mainlevelmainnav ul.menu li:active,
#mainlevelmainnav ul.menu li:focus {
	background:#dadada!important;
	color: #000;
	text-decoration: none;
}

#mainlevelmainnav ul.menu li.active a {
	font-weight: bold;
	text-decoration: none;
}

#mainlevelmainnav ul.menu li .parent{
	background:#dadada url(../images/menu_sub_arrow.gif) center right no-repeat;
}


#mainlevelmainnav ul.menu li.active a span {
}

#mainlevelmainnav ul.menu li li a span {
	padding: 0;
	background: none;
}

#mainlevelmainnav ul.menu li ul {
	border:1px solid #cccccc;
	padding: 0;
	list-style: none;
}

#mainlevelmainnav ul.menu li li {
	padding: 0!important;
	list-style: none;
}

#mainlevelmainnav ul.menu li li a {
	color: #333333;
	font-size: 92%;
	font-weight: normal;
	padding:0 10px;
}

#mainlevelmainnav ul.menu li li a:hover,
#mainlevelmainnav ul.menu li li a:active,
#mainlevelmainnav ul.menu li li a:focus {
}

#mainlevelmainnav ul.menu li li a span {
	font-weight: normal;
}

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!