Extended Menu

[shadeshigeru]

Ok, i sucessfully split the sub menu and the main menu into 2 different modules so i should be able to style them differently 'havent gotten there quite yet.'

My issue now is, when a subnavigation item is active, the parent item does not show active status. How can i achieve this?

Thank you for your help.

[shadeshigeru]

I got it all working how i want it to, however i'm not quite sure how i did it and i believe i have some code that is not necessary. Here is what i have for the active state, can you please tell me what i have, that is not required? Thanks

Code: Select all

/*Active State*/	
a#active_menu-nav, a#active_menu-nav:hover, a.mainlevel_active-nav, a.mainlevel_active-nav:hover, a.mainlevel_current-nav, a.mainlevel_current-nav:hover {
background: #0c91c1 url('../../visual/bg-nav-left.gif') no-repeat 0 -104px;
margin: 0 1px 0 0; 
padding: 0 0 0 14px;
color: #fff;	 
font-size: 13px;
text-decoration:none;	
display: inline;
float: left;
cursor:pointer;   
}

a#active_menu-nav span, a#active_menu-nav:hover span, a.mainlevel_active-nav span, a.mainlevel_active-nav:hover span, a.mainlevel_current-nav span, a.mainlevel_current-nav:hover span  {
background: #0c91c1 url('../../visual/bg-nav-right.gif') no-repeat 100% -104px;
padding: 5px 14px 6px 0;  
display: block;
float: left;
cursor:pointer; 
}

[a6april]

Hi Daniel,
Where is the link to download the 2.0 version, I went to your site: http://de.siteof.de/extended-menu.html and there was only version 1.03

[Kelmi00]

Hey,

trying to use my site with Internet Explorer, there appears to be problem with Extended menu. All of the line.gif -images are not shown. What to do!? I'm not sure if there is already answer for this, but at least I tried to use the search..

To get my point, see the page: http://www.fcvaajakoski.com/fcv/index.p ... &Itemid=57
---

Problem solved. empty.gif was missing.

[muskiediver]

I am using Extended Menu, when I have a menu item listed as Separator / Placeholder it shows up clear (see image - Online Forms under Education).



Notice "Online Forms" has no white background like the rest of the menu items. How can I fix this so "online forms" does have a white background like the rest of the menu items under the education category?

[pahlevy]

i have problem on my site. I might missed a lot of this thread's great solution but i use the search and still cant find how to fix my problem. I guess the solution is very simple but i have less knowledge about this.

I use Extended Menu and suckerfish vertical, everything is look fine on Firefox but the problem goes on IE6 and 7. On IE6 my submenu didnt show at all while on IE7 my submenu show or jump at other places.

thanks for any help...

[ljk]

Hi,

Try this code:

Code: Select all

<!--[if IE]>
<style type="text/css" media="screen">
ul.mainlevel-suckerfish-vertical li, #vertnav ul li {
	float:left;
	width: 100%;
}
ul.mainlevel-suckerfish-vertical li a, #vertnav ul li a {
	height: 1%;
}
</style>
<![endif]-->

where #vertnav is the id of the div that the menu is contained in.

This will help some of your problems.

[pahlevy]

well seems i still cant get it right... so please check my code below and tell what and where to add the script...

Code: Select all

/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical,
a.mainlevel-suckerfish-vertical:link, a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel-suckerfish-vertical:visited, a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited {
	background-color: black;
	color: white;
}

a.mainlevel-suckerfish-vertical:hover, a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover {
	background-color: #E0E0E0;
	color: black;
}

a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical,
a.sublevel-suckerfish-vertical:link, a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel-suckerfish-vertical:visited, a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited {
	background-color: black;
	color: white;
}

a.sublevel-suckerfish-vertical:hover, a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
	background-color: #E0E0E0;
	color: black;
}

ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical,
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:link, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:link, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:link,
ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:visited, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:visited, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:visited {
	background-color: black;
	color: white;
}

ul.mainlevel-suckerfish-vertical ul ul a.sublevel-suckerfish-vertical:hover, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_active-suckerfish-vertical:hover, ul.mainlevel-suckerfish-vertical ul ul a.sublevel_current-suckerfish-vertical:hover {
	background-color: #E0E0E0;
	color: black;
}

ul.mainlevel-suckerfish-vertical .expanded {
	display: block;
	background-image: url("../images/arrow_right.gif");
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 10px;
}


/** customize style / layout here */
a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical, span.mainlevel-suckerfish-vertical,
a.mainlevel-suckerfish-vertical:link, a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel-suckerfish-vertical:visited, a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited,
a.mainlevel-suckerfish-vertical:hover, a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover,
a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical, span.sublevel-suckerfish-vertical,
a.sublevel-suckerfish-vertical:link, a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel-suckerfish-vertical:visited, a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited,
a.sublevel-suckerfish-vertical:hover, a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	text-decoration: bold;
	display: block;
	border: 1px solid silver;
	padding: 0.3em 0.5em 0.3em 0.5em;	/* top, right, bottom, left */
	height: 1em;
	line-height: 1em;
}

a.mainlevel-suckerfish-vertical, a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical, span.mainlevel-suckerfish-vertical {
}

a.sublevel-suckerfish-vertical, a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical, span.sublevel-suckerfish-vertical {
	font-size: 90%;
	border-top: 0px solid silver;
}

#active_menu-suckerfish-vertical,
a.mainlevel_active-suckerfish-vertical, a.mainlevel_current-suckerfish-vertical,
a.mainlevel_active-suckerfish-vertical:link, a.mainlevel_current-suckerfish-vertical:link,
a.mainlevel_active-suckerfish-vertical:visited, a.mainlevel_current-suckerfish-vertical:visited,
a.mainlevel_active-suckerfish-vertical:hover, a.mainlevel_current-suckerfish-vertical:hover,
a.sublevel_active-suckerfish-vertical, a.sublevel_current-suckerfish-vertical,
a.sublevel_active-suckerfish-vertical:link, a.sublevel_current-suckerfish-vertical:link,
a.sublevel_active-suckerfish-vertical:visited, a.sublevel_current-suckerfish-vertical:visited,
a.sublevel_active-suckerfish-vertical:hover, a.sublevel_current-suckerfish-vertical:hover {
	font-weight: bold;
}

ul.mainlevel-suckerfish-vertical, .mainlevel-suckerfish-vertical ul {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 10em;
}

ul.mainlevel-suckerfish-vertical {
	z-index: 101;
}

ul.mainlevel-suckerfish-vertical ul {
	z-index: 102;
}

ul.mainlevel-suckerfish-vertical ul ul {
	z-index: 103;
}

ul.mainlevel-suckerfish-vertical li {
	padding: 0;
	margin: 0;
	background: none;
	list-style: none;
	float: left;
	clear: left;
	position: relative;
	width: 14.4em;
}

ul.mainlevel-suckerfish-vertical li li {
}

ul.mainlevel-suckerfish-vertical ul {
	display: none;
	position: absolute;
	top: 0;
	margin-left: 14.4em;
}

ul.mainlevel-suckerfish-vertical li:hover ul,
ul.mainlevel-suckerfish-vertical li.hover ul {
	display: block;
}


ul.mainlevel-suckerfish-vertical li:hover ul ul,
ul.mainlevel-suckerfish-vertical li.hover ul ul {
	display: none;
}

ul.mainlevel-suckerfish-vertical li:hover ul li:hover ul,
ul.mainlevel-suckerfish-vertical li.hover ul li.hover ul {
	display: block;
}


ul.mainlevel-suckerfish-vertical, ul.mainlevel-suckerfish-vertical li li {
	clear: left;
}

/** separator */
span.mainlevel-suckerfish-vertical, span.sublevel-suckerfish-vertical {
	border-width: 0px;
	padding: 5px;
}

and please also check my site here at http://www.indonesiapullingteeth.com

[ljk]

Hi,

Leave the suckerfish-vertical/css/menu.css as it is

Add the code I posted above in the <head> section of your template file (index.php).

Good luck.

[pahlevy]

Hi Ijk,

still not fixing my IE6 problem, the submenu still not showing but i havent check it on IE7... will you kind enough to check my index.php...

Thanks a lot...

Code: Select all

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<!--[if IE]>
<style type="text/css" media="screen">
ul.mainlevel-suckerfish-vertical li, #vertnav ul li {
   float:left;
   width: 100%;
}
ul.mainlevel-suckerfish-vertical li a, #vertnav ul li a {
   height: 1%;
}
</style>
<![endif]-->


<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
	initEditor();

}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos

//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
	$user1 = 2;
	$user2 = 2;
	$colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
	$user1 = 1;
	$colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
	$user2 = 1;
	$colspan = 1;
}


//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
	$right = 1;
}
?>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div align="center">
	<table border="0" cellpadding="0" cellspacing="0" width="808">
		<tr>
			<td class="outline">
		  		<div id="buttons_outer">
		  		  <div id="buttons_inner">
						<div id="buttons">
						<?php mosLoadModules ( 'user3', -1); ?>
						</div>
					</div>
		  		</div>
		  		<div id="search_outer">
		  		  <div id="search_inner">
		  		  <?php mosLoadModules ( 'user4', -1 ); ?>
		  		  </div>
		  		</div>
		  		<div class="clr"></div>
		  		<div id="header_outer">
		  			<div id="header">
		  			&nbsp;
		  			</div>
		  			<div id="top_outer">
						<div id="top_inner">
						 </div>
				  </div>
		  		</div>
		  		<div id="left_outer">
		  			<div id="left_inner">
		  			<?php mosLoadModules ( 'left', -2 ); ?>
		  			</div>
		  		</div>
		  		<div id="content_outer">
					<div id="content_inner">
					<?php
		  			if ( mosCountModules ('banner') ) {
		  				?>
		  				<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
						<tr>
								<td>

									<div id="banner_inner">


			  					<?php mosLoadModules( 'banner', -1 ); ?><br />
									</div>
									<div id="poweredby_inner">
										<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/metclub.png" alt="metclub.png, 1 kB" title="MetClub" border="0" height="81" width="168" /><br />

									</div>

								</td>
							</tr>
							</table>
							<?php
		  			}
		  			?>
		  			<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
						<tr valign="top">
							<td width="99%">
								<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">

								<?php
								if ($colspan > 0) {
								?>
									<tr valign="top">
										<?php
				  					if ( $user1 > 0 ) {
				  						?>
				  						<td width="50%">
				  							<div class="user1_inner">
				  							<?php mosLoadModules ( 'user1', -2 ); ?>
				  							</div>
				  						</td>
				  						<?php
				  					}
				  					if ( $colspan == 3) {
										 ?>
											<td width="2">
												<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2" />
											</td>
										<?php
										}
				  					if ( $user2 > 0 ) {
				  						?>
				  						<td width="50%">
				  							<div class="user2_inner">
				  							<?php mosLoadModules ( 'user2', -2 ); ?>
				  							</div>
				  						</td>
				  						<?php
				  					}
										?>
									</tr>
									<tr>
										<td colspan="<?php echo $colspan; ?>">
											<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100" /><br />
										</td>
									</tr>
									<?php
									}
								?>
								<tr>
									<td colspan="<?php echo $colspan; ?>">
										<div id="pathway_text">
										<?php mosPathWay(); ?>
										</div>
									</td>
								</tr>
								<tr>
									<td colspan="<?php echo $colspan; ?>" class="body_outer">
				  					 <?php mosMainBody(); ?>
									</td>
								</tr>
								</table>


							</td>
							<?php
							if ( $right > 0 ) {
		  				?>
		  				<td>
			  				<div id="right_outer">
			  					<div id="right_inner">
			  					<?php mosLoadModules ( 'right', -2 ); ?>
			  					</div>
			  				</div>
		  				</td>
		  				<?php
		  			}
		  			?>

						</tr>
						</table>
		  		</div>
		  	</div>
		  </td>
	  </tr>
  </table>
</div>
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>

[TomT]

Did you put the folder js with the file menu.js in the folder of your template?

[pahlevy]

yes sir, i did put the .js on this following folder /templates/rhuk_solarflare_ii/menu.js

btw, should the menu.js is placed in js folder...?

[TomT]

btw, should the menu.js is placed in js folder...?

I think so. I have them i a folder named js, I think extended menu refers to this folder.

[pahlevy]

omg... thanks tom... you solved my problem its just as simple as it...

thanks also for everyone who trying to help...

[pahlevy]

but still on IE6 my extended menu / submenu wasn't show at all...

[wildorchid]

Hello,

I use Extended Menu -suckerfish horizontal in the toolbar on Joomla 1 that came with a template called jsn-epic.

I'm trying now to substitute the Main Menu on the left column with another instance of Extended Menu but vertical.

I've downloaded suckerfish-vertical-1.0.1.zip and copied everything to jsn_epic/ext/extmenu/suckerfish-vertical.
I've made a copy of the Module Extended Menu and named it Menu
I've edited the properties Class Suffix = -suckerfish-vertical and the Template Name: /ext/extmenu/suckerfish-vertical/menu.html

It now shows a vertical menu with bullets but I think this is not the suckerfish-vertical style

What could I have configured wrong?

Thanks for your help.

[pahlevy]

have you set the parameter in the extended menu from site module setting...

check if the setting for "Enable Menu Template" already set yes. and also make sure that the "Template Name" set to menu.html

hope its help u a bit...

[bramalho]

Is there any simple way to disable the parent items so they are not clickable links?

No there isn't. I has been posted here before: you need a javascript menu for that.

This really needs to be fixed.

[wildorchid]

have you set the parameter in the extended menu from site module setting...

check if the setting for "Enable Menu Template" already set yes. and also make sure that the "Template Name" set to menu.html

hope its help u a bit...

Yes phalevy I have and it works for example with the -bulletree but not with -suckerfish-vertical.

[maddunr]

Hello,

***UPDATE***

Apparently this is a well-documented (here and here) IE bug seen where multiple classes have the same id (#id1.class1, #id1.class2). The IE parser goes thru the list of styles, sees the first one and applies that style to the element. Then it moves the next one and sees that it has the same id and doesn't bother to check the class to see if it is different and skips everything else with the same id.

I solved the problem by having the module apply active/current highlighting to BOTH <li> and <a> elements (thanks to de for letting us do this in his module!!). I then applied regular state styling to the <li> element (#menuitem_1) and active state styling to the <a> element (#menulink_1), thus ensuring uniqueness of styles so stupid IE could see them .

***********************
I have used ExMenu several times, but this is the first time I have run into this problem. I am using it for an image menu, as a flat list, with element id, without templates. The problem is that IE 6.0 doesn't show the current/active state or the rollover state. I am aware that IE doesn't handle :hover very well. I am really concerned about the current / active state. You can see the site in question here. (The top menu uses ExMenu)

Here is the html code generated (module suffix is -sub and menu suffix is -collection):

Code: Select all

<div class="moduletable-sub">
			<ul  id="menulist_root-collection" class="mainlevel-collection">
<li class="mainlevel_current-collection" id="menuitem_1-collection">
<a href="#" class="mainlevel-collection" id="menulink_1-collection">UPHOLSTERY</a>
</li>
<li class="mainlevel-collection" id="menuitem_2-collection">
<a href="#" class="mainlevel-collection" id="menulink_2-collection">WOODWORK</a>
</li></ul></div>

As you can see, I have applied the current/active highlighting to the <li> element only.

Here is my css (module suffix is -sub and menu suffix is -collection):

Code: Select all

/*this is where the text link is pushed below the div to hide it*/
.moduletable-sub a {display:block; padding-top:40px;} 

/*general styling for all li elements*/
ul.mainlevel-collection li {height:35px; padding:0; margin:0; list-style:none; overflow:hidden; float:left; vertical-align:top; text-align:left;} 

/*menu item 1 */
ul.mainlevel-collection li#menuitem_1-collection.mainlevel-collection {background:url(../images/nav_upholstery.jpg) no-repeat top left; width:130px;}
ul.mainlevel-collection li#menuitem_1-collection.mainlevel_current-collection {background:url(../images/nav_upholstery_active.jpg) no-repeat top left; width:130px;}
ul.mainlevel-collection li#menuitem_1-collection.mainlevel-collection:hover {background:url(../images/nav_upholstery_ro.jpg) no-repeat top left; width:130px;}

/*manu item 2 */
ul.mainlevel-collection li#menuitem_2-collection.mainlevel-collection {background:url(../images/nav_woodwork.jpg) no-repeat top left; width:120px;}
ul.mainlevel-collection li#menuitem_2-collection.mainlevel_current-collection {background:url(../images/nav_woodwork_active.jpg) no-repeat top left; width:120px;}
ul.mainlevel-collection li#menuitem_2-collection.mainlevel-collection:hover {background:url(../images/nav_woodwork_ro.jpg) no-repeat top left; width:120px;}

Can anyone pls shine some light as to why IE doesn't honor the active/current class styling? After all, it is simply just another class. Does it have something to do with the ordering of #id.class or .class#id?

Thanks in advance,
-V

[friends1976]

I am new to joomla and I was wondering if someone could help me. I am using 1.0 and installed the extended menu. It is not wide enough to display the text in some instances. Does anyone know how to change that?

http://www.ashleybaileydesigns1.com

Thanks so much!
Ashley

[TomT]

By changing the width of menulist_2_1-nav and sublevel-nav (and the active states of these classes too) in the css file of the menutemplate.

[friends1976]

I don't know what you mean by "active states" of the classes. I think it is in the first part of the code I quoted here. But, I just don't know what to change or the setting to change it to.

/* @end */

/* @group Left Column */

/* @group Left Column Mainmenu List */

/* MainMenu Expandable Tables */

#leftcol a.mainlevel-sidenav, #leftcol a.mainlevel-sidenav2 {
height: 20px;
line-height: 20px;
display: block;
padding: 0px 0px 0px 12px;
background: url(../images/mainlevel.gif) no-repeat 0% 50%;
color: #666;
margin: 1px 0px 1px 0px;
border-top: 1px solid #fff;
font-size: 13px;
text-decoration: none;
}

#leftcol a.mainlevel-sidenav:hover, #leftcol a.mainlevel-sidenav2:hover {
height: 20px;
line-height: 20px;
display: block;
padding: 0px 0px 0px 12px;
background: url(../images/mainlevel_over.gif) no-repeat 0% 50%;
color: #333;
margin: 1px 0px 1px 0px;
border-top: 1px solid #fff;
font-size: 13px;
text-decoration: none;
}

#leftcol a.sublevel, #leftcol a.sublevel-sidenav, #leftcol a.sublevel-sidenav2 {
line-height: 16px;
display: block;
padding: 0px 0px 2px 10px;
color: #74AC00;
margin-bottom: 1px;
background: url(../images/mainlevel_sub.gif) no-repeat 0 50%;
text-decoration: underline;
font-size: 12px;
}

#leftcol a.sublevel:hover, #leftcol a.sublevel-sidenav:hover, #leftcol a.sublevel-sidenav2:hover {
color: #333;
text-decoration: underline;
}
/* MainMenu Flat List */



#leftcol ul#mainlevel, #leftcol ul#mainlevel-sidenav, #leftcol ul#mainlevel-sidnav2, #leftcol a.mainlevel-sidenav,#leftcol a.mainlevel-sidenav2, #leftcol a.mainlevel, #leftcol a.sublevel, #leftcol a.sublevel-sidenav, #leftcol a.sublevel-sidenav2 {
font-variant: normal;
font-style: normal;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
list-style:none;
}

#leftcol ul#mainlevel li a, #leftcol ul#mainlevel-sidenav li a, #leftcol ul#mainlevel-sidenav2 li a {
height: 18px;
display: block;
padding: 5px 0px 5px 18px;
background: #eee url(../images/mainlevel.gif) no-repeat 5px 50%;
color: #666;
text-decoration: none;
border: none;
}

#leftcol ul#mainlevel li a:hover, #leftcol ul#mainlevel-sidenav li a:hover, #leftcol ul#mainlevel-sidenav2 li a:hover {
height: 18px;
display: block;
padding: 5px 0px 5px 18px;
background: #fff url(../images/mainlevel.gif) no-repeat 5px 50%;
color: #666;
text-decoration: none;
border: none;
}




/* @end */


/* Left Column Globals */

#leftcol {
width: 228px;
float: left;
_overflow: hidden;
}


#leftcol a {
color: #333;
text-decoration: underline;
}

#leftcol a:hover {
color: #74AC00;
text-decoration: underline;
}


#leftcol .moduletable,
#leftcol .moduletablegreen,
#leftcol .moduletableblue,
#leftcol .moduletablered,
#leftcol .moduletableblack,
#leftcol .moduletablegray {
padding: 10px 5px 10px 0px;
}



#mainbody {
float: right;
margin: 0;
padding: 10px 0px 0px 0px;
width: 700px;
text-align: justify;
_background: #fff;
}

#mainbody .inside {
margin: 0;
padding: 0;
}

#bottombar {
background: url(../images/footer.png) no-repeat center top;
height: 9px;
width: 976px;
}

/* @end */

/* @group Joomla Styles */

.small, .modifydate, .createdate {
color: #b6b6b6;
font: .85em/.85em "Trebuchet MS", Tahoma, Verdana, Helvetica;
}

td.createdate {
text-indent: 20px;
line-height: 20px;
background: url(../images/clock_edit.png) no-repeat left center;
}

td.modifydate {
text-indent: 20px;
line-height: 20px;
background: url(../images/page_edit.png) no-repeat left center;
border-top: 1px dotted #f2f2f2;
}

form {
padding: 0;
margin: 0;
}

a.readon {
color: #74AC00;
display: block;
float: right;
line-height: 12px;
background: url(../images/readon.gif) no-repeat left center;
text-indent: 16px;
text-decoration: underline;
}
a.readon:hover {
color: #74AC00;
display: block;
float: right;
line-height: 12px;
background: url(../images/readon.gif) no-repeat left center;
text-indent: 16px;
text-decoration: none;
}

td.contentheading {
font: 1.75em Helvetica, Arial, Verdana, serif;
letter-spacing: -1px;
color: #0093E3;
border-bottom: 1px solid #eee;
width: 100%;
overflow: hidden;
}

.componentheading {
font: 1.75em Helvetica, Arial, Verdana, serif;
letter-spacing: -1px;
color: #74AC00;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
}

a.contentpagetitle, .contentpagetitle a, .contentpagetitle a:visited {
color: #0E5199;
font: 1.25em "Trebuchet MS", Tahoma, Verdana, Helvetica;
letter-spacing: -1px;
}

a.contentpagetitle:hover, .contentpagetitle a:hover {
color: #333;
font: 1.25em "Trebuchet MS", Tahoma, Verdana, Helvetica;
letter-spacing: -1px;
}

div.syndicate div {
padding: 1px;
}

td.buttonheading a img {
padding: 0px 0px 0px 4px;
}

span.content_rating {
color: #888;
font-size: 10px;
text-transform: uppercase;
position: relative;
top: 5px;
}

label {
color: #8e8e8e;
}

div.mosimage {
border: 1px solid #eaeaea;
margin: 7px;
}

div.mosimage_caption {
padding: 2px;
background-color: #f7f7f7;
border-top: 1px solid #eee;
}

span.content_rating img {
padding-bottom: 10px;
margin: 0px;
}

div.back_button a {
color: #7f7f7f;
background-color: #eaeaea;
padding: 0px;
position: relative;
top: 10px;
float: none;
margin: 20px;
height: 16px;
display: block;
width: 50px;
text-align: center;
line-height: 16px;
text-transform: uppercase;
font-variant: small-caps;
font-size: 11px;
border: 1px solid #c0c0c0;
}

th.pagenav_prev a {
text-indent: -5000px;
display: block;
background: url(../images/next_prev.png) no-repeat 0px -44px;
width: 94px;
height: 22px;
border: none;
}

th.pagenav_prev a:hover {
text-indent: -5000px;
display: block;
background: url(../images/next_prev.png) no-repeat 0px -66px;
width: 94px;
height: 22px;
border: none;
}

th.pagenav_next a {
text-indent: -5000px;
display: block;
background: url(../images/next_prev.png) no-repeat 0px 0px;
width: 94px;
height: 22px;
border: none;
}

th.pagenav_next a:hover {
text-indent: -5000px;
display: block;
background: url(../images/next_prev.png) no-repeat 0px -22px;
width: 94px;
height: 22px;
border: none;
}

input.button {
color: #74AC00;
padding: 4px;
margin: 10px;
font-size: 10px;
background: url(../images/but_bg.png) repeat-x center center;
border:1px solid #ccc;
}

div.message {
color: #cd2800;
font-size: 18px;
font-weight: bold;
}

.inputbox {
border: 1px solid #999;
}

.moduletable .inputbox {
border: 1px solid #999;
height: 14px;
font: 11px Arial, Helvetica, Geneva, sans-serif;
color: #333;
}
/* @group Newsfeed Hacks */

form table.contentpane tbody tr td ul {
list-style: none;
}

form table.contentpane tbody tr td ul li {
background: url(../images/feed.png) no-repeat;
padding-left: 20px;
line-height: 20px;
text-decoration: none;
color: #74AC00;
}

form table.contentpane tbody tr td ul li a:hover {
color: #333;
background: #fff;
}

#mainbody .inside form table.contentpane tbody tr td {
width: auto;
}

/* @end */

/* @group Latest/Popular News Modules */

ul.latestnews,ul.mostread,
ul.latestnewsgreen,ul.mostreadgreen,
ul.latestnewsblue,ul.mostreadblue,
ul.latestnewsred,ul.mostreadred,
ul.latestnewsblack,ul.mostreadblack,
ul.latestnewsgray,ul.mostreadgray
{
list-style: none;
}

#leftcol a.latestnews, a.latestnews,
#leftcol a.latestnewsgreen, a.latestnewsgreen,
#leftcol a.latestnewsblue, a.latestnewsblue,
#leftcol a.latestnewsblack, a.latestnewsblack,
#leftcol a.latestnewsred, a.latestnewsred,
#leftcol a.latestnewsgray, a.latestnewsgray {
text-decoration: none;
background: url(../images/new.png) no-repeat 0 50%;
padding: 3px 0px 3px 20px;
line-height: 20px;
color: #666;
}
#leftcol a.mostread, a.mostread,
#leftcol a.mostreadgreen, a.mostreadgreen,
#leftcol a.mostreadblue, a.mostreadblue,
#leftcol a.mostreadred, a.mostreadred,
#leftcol a.mostreadblack, a.mostreadblack,
#leftcol a.mostreadgray, a.mostreadgray {
background: url(../images/book_open.png) no-repeat 0 50%;
padding-left: 20px;
padding: 3px 0px 3px 20px;
line-height: 20px;
text-decoration: none;
color: #666;
}
#leftcol a.latestnews:hover, a.latestnews:hover,
#leftcol a.mostread:hover, a.mostread:hover,
#leftcol a.latestnewsgreen:hover, a.latestnewsgreen:hover,
#leftcol a.mostreadgreen:hover, a.mostreadgreen:hover,
#leftcol a.latestnewsblue:hover, a.latestnewsblue:hover,
#leftcol a.mostreadblue:hover, a.mostreadblue:hover,
#leftcol a.latestnewsred:hover, a.latestnewsred:hover,
#leftcol a.mostreadred:hover, a.mostreadred:hover,
#leftcol a.latestnewsblack:hover, a.latestnewsblack:hover,
#leftcol a.mostreadblack:hover, a.mostreadblack:hover,
#leftcol a.latestnewsgray:hover, a.latestnewsgray:hover,
#leftcol a.mostreadgray:hover, a.mostreadgray:hover {
text-decoration: underline;
color: #74AC00;
}

/* @end */


/* @end */

/* @group Joomla Tables */

table.blog td {
padding: 0;
margin: 0;
}



table.contentpaneopen {
margin: 0;
padding: 0;
width: 100%;
}

table table.contentpaneopen td, table table.contentpane td {
margin: 0px 8px;
padding: 0;
width: 100%;
}

div.contentpane, div.contentpaneopen {
width: 100%;
}

table.contentpaneopen, table.contentpane, table.blog {
border-collapse: collapse;
padding: 3px;
width: 99%;
}

body.contentpane {
background: #fff;
margin: 25px;
}

td.sectiontableheader {
background: #0E5199 url(../images/sectblhdr.png) repeat-x top;
color: #FFF;
font-weight: bold;
height: 22px;
padding: 4px;
}

tr.sectiontableentry1 td {
padding: 2px;
background-color: #fbfbfb;
text-align: left;
border-bottom: 1px solid #fff;
border-top: 1px solid #dfdfdf;
}

tr.sectiontableentry2 td {
padding: 2px;
background-color: #f3f3f3;
text-align: left;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #fff;
}

td.sectiontableentry1 {
padding: 2px;
background-color: #f8f8f8;
}

td.sectiontableentry2 {
padding: 2px;
background-color: #F2F2F2;
}

.sectiontableentry2 a, .sectiontableentry1 a, .sectiontableentry2 a.category, .sectiontableentry1 a.category {
padding-left: 4px;
color: #74ac00;
}

.sectiontableentry2 a:hover, .sectiontableentry1 a:hover, .sectiontableentry2 a.category:hover, .sectiontableentry1 a.category:hover {
color: #333333;
background: none;
}

span.pagenav {
color: #ccc;
}

table.pollstableborder td {
padding: 0;
text-align: left;
}

.pollstableborder td, .pollstableborderS2 td, pollstableborderS1 td, pollstableborderS3 td {
text-align: left;
font: 0.87em/0.92em Arial, Helvetica, sans-serif;
padding: 3px 0px 3px 5px;
vertical-align: middle;
}

/* @end */


/* @group Lower Modules Display (User4/Right) */

/* MODULEWRAP */
.left .moduletable-img, .right .moduletable-img,
.left_wide .moduletable-img, .right_wide .moduletable-img {
margin: 0px auto;
padding: 0px 0px 10px 0px;
text-align: center;
}

div.modulewrap {
width: 700px;
float: right;
margin: 0;
padding: 0;
}

div.modulewrap .left {
float: left;
margin: 10px 5px;
padding: 0;
width: 335px;
background: #fff;
}

div.modulewrap .right {
float: right;
margin: 10px 5px;
padding: 0;
width: 335px;
background: #fff;
}

div.modulewrap .left_wide {
float: left;
margin: 10px 10px;
padding: 0;
background: #fff;
}

div.modulewrap .right_wide {
margin: 10px 5px;
padding: 0px;
background: #fff;
}


/* MODULEWRAP_WIDE */

div.modulewrap_wide {
width: 946px;
margin: auto;
padding: 0;
}

div.modulewrap_wide .left_wide {
width: 946px;
float: left;
}

div.modulewrap_wide .right_wide {
width: 946px;
float: right;
}

div.modulewrap_wide .left {
float: left;
margin: 10px 4px;
padding: 0;
width: 460px;
background: #fff;
}

div.modulewrap_wide .right {
float: right;
margin: 10px 4px;
padding: 0;
width: 460px;
background: #fff;
}

.right .inside {
_float: left;
margin: 0 0 5px 0;
_margin: 0;
padding: 5px 0 5px 0;
}

.left .inside {
_float: left;
margin: 0 0 5px 0;
_margin: 0;
padding: 5px 0 5px 0;
}

div.left h3, div.right h3 {
font: bold 15px/29px "Lucida Grande", Lucida, Verdana, sans-serif;
letter-spacing: normal;
margin-bottom: 12px;
}


/* GREEN */
div.moduletablegreen .contentheading a.contentpagetitle,
div.moduletablegreen .contentheading a.contentpagetitle:visited {
color: #74AC00;
font-size: .90em;
line-height: 1.25em;
padding-left: 19px;
background: url(../images/world.png) no-repeat left center;
}

div.left .moduletablegreen h3 {
background: #76a60c url(../images/left_green.png) no-repeat 0px 50%;
height: 29px;
color: #FFF;
padding-left: 30px;
}

div.right .moduletablegreen h3 {
background: #76a60c url(../images/right_green.png) no-repeat 100% 50%;
height: 29px;
color: #FFF;
padding-right: 30px;
text-align: right;
}

div.modulewrap_wide div.right_wide .moduletablegreen h3,
div.modulewrap_wide div.left_wide .moduletablegreen h3 {
background: #76a60c url(../images/left_green.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #FFF;
width: 946px;
text-indent: 30px;
position: relative;
}

div.modulewrap .right_wide .moduletablegreen h3,
div.modulewrap .left_wide .moduletablegreen h3 {
background: #76a60c url(../images/left_green.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #FFF;
text-indent: 30px;
width: 690px;
}
/* BLUE */
/* DEFAULT (BLUE)*/

div.moduletable a.contentpagetitle,
div.moduletable a.contentpagetitle:visited,
div.moduletableblue a.contentpagetitle,
div.moduletableblue a.contentpagetitle:visited {
color: #0093E3;
font-size: .90em;
line-height: 1.25em;
padding-left: 19px;
background: url(../images/package.png) no-repeat left center;
}

div.left .moduletable h3 {
background: #007AE9 url(../images/left_blue.png) no-repeat 0px 50%;
height: 29px;
color: #FFF;
padding-left: 30px;
}
div.right .moduletable h3 {
background: #007AE9 url(../images/right_blue.png) no-repeat 100% 50%;
height: 29px;
color: #FFF;
padding-right: 30px;
text-align: right;
}

div.left .moduletableblue h3 {
background: #007AE9 url(../images/left_blue.png) no-repeat 0px 50%;
height: 29px;
color: #FFF;
padding-left: 30px;
}

div.right .moduletableblue h3 {
background: #007AE9 url(../images/right_blue.png) no-repeat 100% 50%;
height: 29px;
color: #FFF;
padding-right: 30px;
text-align: right;
}

div.modulewrap_wide div.right_wide .moduletableblue h3,
div.modulewrap_wide div.left_wide .moduletableblue h3 {
background:#007AE9 url(../images/left_blue.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #FFF;
width: 946px;
text-indent: 30px;
position: relative;
}

div.modulewrap .right_wide .moduletableblue h3,
div.modulewrap .left_wide .moduletableblue h3 {
background:#007AE9 url(../images/left_blue.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #FFF;
text-indent: 30px;
width: 690px;
}
/* RED */

div.moduletablered .contentheading a.contentpagetitle,
div.moduletablered .contentheading a.contentpagetitle:visited {
color: #C23F26;
font-size: .90em;
line-height: 1.25em;
padding-left: 19px;
background: url(../images/world.png) no-repeat left center;
text-decoration: none;
}

div.left .moduletablered h3 {
background: #C23F26 url(../images/left_red.png) no-repeat 0px 50%;
height: 29px;
color: #FFF;
padding-left: 30px;
}

div.right .moduletablered h3 {
background: #C23F26 url(../images/right_red.png) no-repeat 100% 50%;
height: 29px;
color: #FFF;
padding-right: 30px;
text-align: right;
}

div.modulewrap_wide div.right_wide .moduletablered h3,
div.modulewrap_wide div.left_wide .moduletablered h3 {
background:#C23F26 url(../images/left_red.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #FFF;
width: 946px;
text-indent: 30px;
position: relative;
}

div.modulewrap .right_wide .moduletablered h3,
div.modulewrap .left_wide .moduletablered h3 {
background:#C23F26 url(../images/left_red.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #FFF;
text-indent: 30px;
width: 690px;
}

/* GRAY */

div.moduletablegray .contentheading a.contentpagetitle,
div.moduletablegray .contentheading a.contentpagetitle:visited {
color: #333;
font-size: .90em;
line-height: 1.25em;
padding-left: 19px;
background: url(../images/world.png) no-repeat left center;
}

div.left .moduletablegray h3 {
background: #CCCCCC url(../images/left_gray.png) no-repeat 0px 50%;
height: 29px;
color: #333;
padding-left: 30px;
}

div.right .moduletablegray h3 {
background: #CCCCCC url(../images/right_gray.png) no-repeat 100% 50%;
height: 29px;
color: #333;
padding-right: 30px;
text-align: right;
}

div.modulewrap_wide div.right_wide .moduletablegray h3,
div.modulewrap_wide div.left_wide .moduletablegray h3 {
background:#CCCCCC url(../images/left_gray.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #333;
width: 946px;
text-indent: 30px;
position: relative;
}


div.modulewrap .right_wide .moduletablegray h3,
div.modulewrap .left_wide .moduletablegray h3 {
background:#CCCCCC url(../images/left_gray.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #333;
text-indent: 30px;
width: 690px;
}

/* BLACK */

div.moduletableblack .contentheading a.contentpagetitle,
div.moduletableblack .contentheading a.contentpagetitle:visited {
color: #0093E3;
font-size: .90em;
line-height: 1.25em;
padding-left: 19px;
background: url(../images/world.png) no-repeat left center;
}

div.left .moduletableblack h3 {
background: #000 url(../images/left_black.png) no-repeat 0px 50%;
height: 29px;
color: #CCC;
padding-left: 30px;
}

div.right .moduletableblack h3 {
background: #000 url(../images/right_black.png) no-repeat 100% 50%;
height: 29px;
color: #CCC;
padding-right: 30px;
text-align: right;
}

div.modulewrap_wide div.right_wide .moduletableblack h3,
div.modulewrap_wide div.left_wide .moduletableblack h3 {
background:#000 url(../images/left_black.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #CCC;
width: 946px;
text-indent: 30px;
position: relative;
}

div.modulewrap .right_wide .moduletableblack h3,
div.modulewrap .left_wide .moduletableblack h3 {
background:#000 url(../images/left_black.png) no-repeat 0% 50%;
height: 29px;
line-height: 29px;
color: #CCC;
text-indent: 30px;
width: 690px;
}

div.moduletablegreen .contentheading a.contentpagetitle:hover,
div.moduletableblue .contentheading a.contentpagetitle:hover,
div.moduletablered .contentheading a.contentpagetitle:hover,
div.moduletablegray .contentheading a.contentpagetitle:hover,
div.moduletableblack .contentheading a.contentpagetitle:hover,
div.moduletable a.contentpagetitle:hover
{
color: #666;
font-size: .90em;
line-height: 1.25em;
padding-left: 19px;
}

[TomT]

You have to look at the menu.css. The elements I mentioned aren't there. But you could add a width to ul.mainlevel-nav ul ul,
ul.mainlevel-nav ul ul ul {
display: none;
position: absolute;
top: 0;
left: 168px;
}
and to some other elements.

Do you have the webdeveloper toolbar in Firefox? If not you should install it. One of it's many options is edit css. This way you can try out changes to your css files. Another essential one is: Information> Display id- and classdetails, this way you can see which classes need to be edited. It will take some time to find out which elements need to be edited in the css, but th ewebdeveloper toolbar will make it easier.

[two5chicken]

I uploaded and installed Extended Menu Module and then FTP the Son of Suckerfish template to my template folder. Now when activate the module I get this:


pat-Error Could not load module patTemplate_Reader_ (/usr/local/apache2/htdocs/libraries/pattemplate/patTemplate/Reader/.php).


What is the cause?

[UPDATE]

Nevermind, I just installed it wrong. I told to module to look in the wrong directory.

[revan]

Hello de,

I'm using extended menu, with the son-of-suckerfish vertical template, and I'm having some trouble with menus that have more than 3 depth levels.

Till 3rd level there is no problem, the subitems are only shown when mouse over but if theres a subitem that has 4th level items they are automatically shown when mouse is over 2nd level.

For better understanding, I'm including a picture showing what happens when the mouse is over the item signed by the dark arrow.

Notice that the subitems from "formação avançada" and "novidades formação" appear without passing the mousse over this options.

How can I fix this?

Best Regards

[babberoo]

I want to have multiple sections/categories that I wish to auto expand using Ext Menu(1.0.5) and Joomla 1.5.3. Unfortunately if I set it to auto expand, I get nothing so I have set it up as follows:

I have a parent item (simple content page) which when clicked I want to show the 6 or so sections I have. I have the following settings:

Source Type: Sections
Source Value: 1,2,3,4,5,6,7
Show Section: Table Section
Show Category: Table Section
Show Content Item: Content Item Link

Menu Style: Tree

This gives me the required menu structure, but instead of linking to a Section Table, or Category table, it links to a single Content Item. How can I set this up to auto expand the sections/cats as required?

[karenn1]

Hi there!

I'm using Extended Menu on the Aqualine template from JoomlaShack using Joomla 1.0. It all works fine. The only problem I'm having is when you rollover the menu (expading two levels down) and roll away, returning to that menu it displays blank entries for the sub items. To explain better, here's an image:

What it should look like:



What it does when you come back after rolling over it:





Any help would be appreciated!

Thanks!
Karen

[midwestkel]

Has anyone solved this problem below? I am having the same issue.

Hello de,

I'm using extended menu, with the son-of-suckerfish vertical template, and I'm having some trouble with menus that have more than 3 depth levels.

Till 3rd level there is no problem, the subitems are only shown when mouse over but if theres a subitem that has 4th level items they are automatically shown when mouse is over 2nd level.

For better understanding, I'm including a picture showing what happens when the mouse is over the item signed by the dark arrow.

Notice that the subitems from "formação avançada" and "novidades formação" appear without passing the mousse over this options.

How can I fix this?

Best Regards

[triffen]

I am working in Joomla 1.5 and have an issue with the Extended Menu system. It seems that I am able to create a third level, but unfortunately it does not appear in the menu. When I mouse-over the menu, the second level arrows show up, but the arrows signaling the third level do not show up, nor do the actual third level menus.

I am using fayen template from pixelsparadise, and have joomla 1.5 running on legacy mode.

I believe I have installed correctly (activated and copied over the CSS to the appropriate place), but am unable to make this appear.

Any ideas would be beneficial.

Thank you.