Thu, 2010-05-27 17:20
I am in the process of creating a suckerfish drop menu in a Joomla 1.6. Currently I'm working with the 1.6 beta 1. I took the suckerfish css from a tutorial site online. The code worked for a single level drop but it was not coded for buttons. I have a two color slider button I am using. For some reason when I hover over a drop level link the left side of my button does not appear, however, it does work when the link is active. I've been at this for 3 days now and have no idea how to get this to work. If anyone has any insight as to why this isn't working properly, I will be forever grateful. 
I've attached a screen shot of the drop menu issue, along with my slider button images.
Here is my html/php code
<?php /** * @copyright Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved. * @license GNU/GPL, see LICENSE.php * Joomla! is free software. This version may have been modified pursuant * to the GNU General Public License, and as distributed it includes or * is derivative of works licensed under the GNU General Public License or * other free or open source software licenses. * See COPYRIGHT.php for copyright notices and details. */ defined( '_JEXEC' ) or die ( 'Restricted access' ); define( 'YOURBASEPATH', dirname(__FILE__) ); JHTML::_( 'behavior.mootools' ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/drop-menu.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/general.css" type="text/css" /> <script type="text/javascript" src="templates/<?php echo $this->template; ?>/js/dropmenu.js"></script> </head> <body> <div id="drop-menu"> <div class="moduletable-menu"> <ul class="menu"> <li class="item435"><a href="/joomla-beta1/index.php?option=com_content&view=featured&Itemid=435">Home</a></li> <li class="item294"><a href="/joomla-beta1/index.php?option=com_content&view=article&id=90&Itemid=294">About Us</a></li> <li id="current" class="active item233"><a href="/joomla-beta1/index.php?option=com_users&view=login&Itemid=233">Login</a> <ul> <li class="item448"><a href="/joomla-beta1/administrator" target="_blank">Site Administrator</a></li> </ul> </li> <li class="item452"><a href="/joomla-beta1/index.php?option=com_contact&view=contact&id=3&Itemid=452">Contact Us</a></li> <li class="item454"><a href="/joomla-beta1/index.php?option=com_content&view=category&id=81&Itemid=454">Ministries</a> <ul> <li class="item455"><a href="/joomla-beta1/index.php?option=com_content&view=article&id=91&Itemid=455">Youth Groups</a></li> <li class="item458"><a href="/joomla-beta1/index.php?option=com_content&view=article&id=92&Itemid=458">Life Groups</a></li> <li class="item459"><a href="/joomla-beta1/index.php?option=com_content&view=article&id=0&Itemid=459">Worship</a></li> </ul> </li> </ul> </div> </div> </body> </html>
And here is my css:
#drop-menu { font-family:"Trebuchet MS", Geneva, Arial; padding:0; margin:50px 0 0 0; font-size:1.2em; float:right; height:53px } #drop-menu a { color:#333; background-image: url(../images/menu-l.gif); text-decoration:none; background-position: 0 -56px; /*left side gray*/ background-repeat: no-repeat; z-index:50 !important; } #drop-menu li { float:left; background-image:url(../images/menu-r.gif); background-position:100% -56px; /*right side gray*/ background-repeat:no-repeat; z-index:50 !important; line-height:53px; font-size:1.1em } /*_______________BLUE ACTIVE AND HOVER BUTTON____________*/ /* right side blue */ #drop-menu li.active, #drop-menu li.active:hover, #drop-menu li:hover { background-position:100% 0; z-index:50 !important } /* left side blue */ #drop-menu li.active a, /* left hover/active link */ #drop-menu li.active a li a, /* left first level drop when active -WORKS IN IE, FF, SAFARI, CHROME*/ #drop-menu li a li a, #drop-menu a.active:hover, #drop-menu a:hover { background-position:0 0; z-index:50 !important } /* END BLUE BUTTON */ #drop-menu ul { list-style:none; margin:0; padding:0; float:left; height:27px; line-height:27px; font-size:90% } #drop-menu li ul { position:absolute; width:220px; left:-999em; margin:0 } #drop-menu li:hover ul { left:auto; padding:0 } #drop-menu li ul li { width:220px; padding:0; border-bottom:1px solid #ccc; line-height:27px; font-size:90% } #drop-menu li a { display:block; text-decoration:none } #drop-menu a, #drop-menu li.active a { white-space:nowrap; display:block; margin:0 5px 0 0; padding:0 13px 0 17px; font-weight:bold; overflow:hidden; z-index:50 !important; } html>body #drop-menu li a { width:auto } #drop-menu li ul li a { background:#eeefeb; width:190px /* filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;*/ } #drop-menu li a:hover, a#active_menu:link, a#active_menu:visited { color:#057089; text-decoration:none /* filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;*/ } #drop-menu li ul li a:hover { background:#f3f5f1 } #drop-menu li:hover ul, #drop-menu li.sfhover ul { left:auto } #drop-menu ul li.active a { color:#057089; text-decoration:none } #drop-menu li.parent.active a { color:#000; text-decoration:none } #drop-menu li.parent.active a:hover { color:#057089 } #drop-menu li.parent.active ul li a { color:#057089; text-decoration:none } #drop-menu li.parent.active ul li a:hover { color:#057089; text-decoration:none }
| Attachment | Size |
|---|---|
| dropmenu-problem.jpg | 50.18 KB |
| menu-l.gif | 1.28 KB |
| menu-r.gif | 3.45 KB |
