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

Be a link sponsor for this page now

• The Page SPONSORED BY
• Become SPONSOR Now
• HELP

No donations within the last 60 days.Who make donation will leave message at here.Donate Now.

Name Or TextAds:
Your URL:
Amount: USD AUD GBP CAD CZK DKK EUR HKD HUF JPY MXN NZD NOK PLN SGD SEK CHF TWD THB PHP RMB 55 dollar donations or more will appear in the Sponsored cloud. More donations, bigger Link!There is the option of having your name link to a site of your choosing. Simply fill out the form, click the PayPal button and you're on your way!

If your haven't the paypal account so far.Please register paypal account:[PayPal Registration] first.

This a wordpress plugin Wp-Donators.It provides a smart donation function to autoleave the sponsor information in this container after payment. People can donate and submit name/URL or TextLink AD. The information of the latest donors are displayed in the cloud. The more a person donates, the bigger their link will be.It's will support most popular payment interface in future. ParPal Just the first one. More..

Powered By:WP-DONATORS

---

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!