Joomla! Forum - community, help and support

Posted: **Tue Jul 22, 2008 6:39 am**

ul.submenu li ul needs a height: auto. (to begin with, i'm not sure if this will fix the problem)

Posted: **Tue Jul 22, 2008 4:38 pm**

Thank you so much for your help, TomT! I didn't think of trying the "auto" setting as opposed to actually putting in a pixel number. I edded the "heigh: auto" to ul. sebmenu li on the stylesheet, and that did the trick. Thanks again for your help!
- Jeremy

Posted: **Tue Jul 22, 2008 9:34 pm**

TomT wrote: Hi Kai, it ís very strange. The second level actualy does seem to disappear. There is a an empty element without a class or id. Maybe you have to try if changing parameters in the extended menu module helps. I'm sorry, but i don't know which parameter needs to be set differently. I hope someone else can help.

Hi Tom, which element are you referring to with the empty class/id? I did not see it using Firebug...
Thanks

Posted: **Wed Jul 23, 2008 7:33 am**

Hi Kai, i used the webdeveloper extension in FF. You can make it outline the elements.

Posted: **Fri Aug 01, 2008 1:19 pm**

hello...

I have problem with my drop down menu.

In Firefox everything works OK, but in IE not. My menu is on right side, and looks like this:

Firefox

IE

In HEAD of my index.php i put link to menu.js

Code: Select all

    // based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
    if ((document.all) && (document.getElementById)) {
       function MenuListElementHoverFix() {
          var _this   = this;
          
          if (typeof(Array.prototype.push) == 'undefined') {
             // IE < 5.5 does not support push/pop
             function push() {
                var j = this.length;
                for (var i = 0; i < push.arguments.length; ++i) {
                   this[j] = push.arguments[i];
                   j++;
                }
             }
             function pop() {
                var i = this[this.length - 1];
                this.length--;
                return i;
             }
             Array.prototype.push   = push;
             Array.prototype.pop      = pop;
          }
          
          this.className            = 'hover';   // change the class name to use here if you are not happy with it
          this.classNameSuffix      = ' ' + this.className;
          this.removeClassNameRegExp   = new RegExp("\\b ?" + this.className + "\\b");
          this.hoverElementStack      = new Array();
          
          this.onmouseover   = function() {
             if (!_this.isHover(this)) {
                if (this.getAttribute('is_hover_class_removing') != 'true') {
                   this.className   += _this.classNameSuffix;
                }
                this.setAttribute('is_hover', 'true');
             }
          }
          this.isHover   = function(element) {
             return (element.getAttribute('is_hover') == 'true');
          }
          this.checkNonHoverState   = function(element) {
             if (!_this.isHover(element)) {
                element.className   = element.className.replace(_this.removeClassNameRegExp, '');
             }
             element.removeAttribute('is_hover_class_removing');
          }
          this.checkLastNonHoverState   = function() {
             var hoverElement   = null;
             if (_this.hoverElementStack.length > 0) {
                hoverElement   = _this.hoverElementStack.pop();
             }
             for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
                // we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
                var o = _this.hoverElementStack[i];
                while (o != null) {
                   o   = o.offsetParent;
                   if (o == hoverElement) {
                      _this.checkNonHoverState(_this.hoverElementStack[i]);
                      break;
                   }
                }
             }
             if (hoverElement != null) {
                _this.checkNonHoverState(hoverElement);
             }
          }
          this.onmouseout      = function() {
             // all this mess to not change the class immediately (which would cause flickering in the IE)
             this.setAttribute('is_hover', 'false');
             if (this.getAttribute('is_hover_class_removing') != 'true') {
                this.setAttribute('is_hover_class_removing', 'true');
                _this.hoverElementStack.push(this);
                window.setTimeout(_this.checkLastNonHoverState, 100);
             }
          }
          this.fixElement      = function(elementRoot) {
             for (var i=0; i < elementRoot.childNodes.length; i++) {
                var node = elementRoot.childNodes[i];
                if (node.nodeName == "LI") {
                   node.onmouseover   = this.onmouseover;
                   node.onmouseout      = this.onmouseout;
                }
                this.fixElement(node);
             }
          };
          this.findElement   = function(elementRoot) {
             for (var i=0; i< elementRoot.childNodes.length; i++) {
                var node = elementRoot.childNodes[i];
                if (node.nodeName == "UL") {
                   if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
                      this.fixElement(node);
                      continue;   // do not iterate through children of already fixed element
                   }
                }
                this.findElement(node);
             }
          };
          this.fix         = function() {
             var node = document.body;
             if (node) {
                _this.findElement(node);
             }
          }
          this.addOnLoad      = function() {
             if (window.attachEvent) {
                window.attachEvent("onload", this.fix);
             } else {
                window.onload   = this.fix;
             }
          }
       }
       (new MenuListElementHoverFix()).addOnLoad();
    }

and .css

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: #93c9e9;
	color: #504e4e;
	
	
}

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

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: #c4e1f3;
	color: #504e4e;
}

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

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: #2586d7;
	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: blue;
}

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


/** 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: bold;
	font-size: 13px;
	text-align: left;
	text-indent: 5px;
	text-decoration: none;
	display: block;
	background-color: #c4e1f3;
	border-top: 2px solid #93c9e9;
	border-bottom: 2px solid #79a8c5;
	border-right: 5px solid #93c9e9;
	border-left: 15px solid #93c9e9;
	padding: 15px 0.5em 0.3em 0.5em;	/* top, right, bottom, left */
    
	height: 25px;
	width: 170px;
	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: 12px;
}

#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;
	background-image: url("../images/menu_image.jpg");
	background-position: center center;
	background-repeat: no-repeat;

}

ul.mainlevel-suckerfish-vertical, .mainlevel-suckerfish-vertical ul {
	padding: 0;
	margin-right: 0;
	list-style-type: 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 {
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: right;
	clear: right;
	position: relative;
	width: 10em;
}

ul.mainlevel-suckerfish-vertical li li {
}

ul.mainlevel-suckerfish-vertical ul {
	display: none;
	position: absolute;
	top: 10px;
	margin-left: 7em;
}

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

What is wrongly? Where is mistake?

Posted: **Tue Aug 19, 2008 9:43 am**

Are there any known issues of Extended Menu with Joomla 1.5.5 and IE 8

Posted: **Tue Sep 02, 2008 6:29 pm**

Hey there,

I want to create drop-down list menus. I plan to use some for two purposes:

1) a top "Jump to" menu similar to the one you can see on this site, in which I will include most, but not all of the site's pages.

2) "contextual" menus in some sections, which would be displayed within the very articles and would provide links to all of my articles in a given category. If those lists can be created automagically, it'll be great, else, this won't be essentially needed...

No need for Javascript here, on the contrary, I'd like my menus to be plain HTML lists with an OK button close to them for the user to validate his/her choice.

My questions are:
- can Extended Menu do this for me?
- do I get to insert the menus I created within the articles?

Thank you.

Posted: **Thu Sep 04, 2008 8:59 am**

Congratz on the mod.

Is it possible to combine it with mootools? Suckerfish is rather easy, what about mootools slide effects?

Posted: **Fri Sep 12, 2008 6:48 pm**

ashar wrote:Are there any known issues of Extended Menu with Joomla 1.5.5 and IE 8

Ashar, there are some issues with Extended Menu and Joomla! 1.5. One of them I resolved and the solution is here: http://forum.joomla.org/viewtopic.php?f=472&t=325037.

ocilya42 wrote:Hey there,

I want to create drop-down list menus. I plan to use some for two purposes:

1) a top "Jump to" menu similar to the one you can see on this site, in which I will include most, but not all of the site's pages.

2) "contextual" menus in some sections, which would be displayed within the very articles and would provide links to all of my articles in a given category. If those lists can be created automagically, it'll be great, else, this won't be essentially needed...

No need for Javascript here, on the contrary, I'd like my menus to be plain HTML lists with an OK button close to them for the user to validate his/her choice.

My questions are:
- can Extended Menu do this for me?
- do I get to insert the menus I created within the articles?

Thank you.

You can do both:

1) In the module parameters, change Menu Style to Select List.
Change Select List Submit Text to whatever you like, and Hide Submit Button to Never.

2) To generate the menus:

Read my fix at: http://forum.joomla.org/viewtopic.php?f=472&t=325037.
Use the Tree List or Flat List Menu Style (you can use any, but these are plain list suitable to CSS formatting) and create one link to the desired Section/Category (Blog or List).
This will automatically generate links for all articles in a given Section/Category.

If you want to hide the Section/Category Link and just show its children, change Show Section or Show Category to you likings in the module parameters.

To show this module only inside some specific section, you can use some template code or change Menu Assignment in the module parameters to the link to that section in you MAIN menu.

Hope this helps.

Posted: **Sun Sep 21, 2008 12:36 am**

I am new to joomla 1.5 and have been looking into in for a couple of weeks. I currently have a YOOtheme (template) installed along with the YOOtools, I am impressed with both Joomla and these particlular tools/templates.

I was looking into creating a menu to display Section's and/or Categories, as far as I can tell the 'Extended Menu' module is the only one which supports this. Anyway, I have the Extended Menu installed and displaying my menus ok, but it doesn't produce the same nice hover style links as the YOOtheme uses? How can I get 'Extended Menu' to look exactly the same and take on the same styling characteristics as any instlled template/theme?

I have seen and tried to use some of the class options but to no avail?

Any help appreciated?

Thanks, Nic.

Posted: **Wed Sep 24, 2008 3:38 pm**

Hi!
I have an issue regarding Joomla! 1.5 and the Extended Menu module.
When I click on any button of my mainmenu (extended_menu) it works well and on the new page the menu item is active. But if within that page I click on a new link, which is always the same mainmenu, the menu item is no longer active.
Can you help me?

Posted: **Mon Oct 13, 2008 9:31 am**

anyone can you help me??

Posted: **Wed Oct 15, 2008 1:04 pm**

Hi.

I'm trying to setup a menu. The topmenu will be full images not background images, and the 2nd level will be text. No dropdowns, only a split between level 1 and 2

I would really appreciate help.

Posted: **Wed Oct 22, 2008 2:03 pm**

Hey

I'm trying to get my heads around this hightlighting thing, but I can't get it to work.

If you see this link then my menu to the left has 1 menu item.

It is an extended Menu showing content items. When I click it, the content item shows, but there is no active highlighting.

I have played around with the parameters for an hour now, but I simply can't figure it out.

What can I do to make the highlighting work?

Posted: **Wed Oct 22, 2008 7:42 pm**

If you mean that you want the color to change if you hover over the menu item, than that's done in the css of your template.

Look at something that is similar to

Code: Select all

#ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus {
	background: url(../images/arrow2.png) no-repeat bottom center #555555;
	color: #FFFFFF;
}

This should help on your way. This css is from the ja-purity, you should check the one you use and change the css according to your prefs.

Posted: **Thu Oct 23, 2008 9:05 am**

No, I mean that the Extended Menu simply doesn't output any active class or id no matter what I do

Posted: **Fri Oct 24, 2008 6:58 pm**

I have been struggling with the extended menu for far too long now!

I have installed it and it looks and works fine with exception to the fact the sublevel menu items appear ontop of the first level when I mouse over. Surely this should be simple to fix???? Any words of advice... help....

Posted: **Sat Oct 25, 2008 10:06 am**

Thats typically a CSS thing, not the Extended Menu itself :-)

Posted: **Tue Nov 04, 2008 7:34 pm**

Correct! CSS conflicts.. went back to basics and disabled everything that could of been effecting it and bobs your uncle got it going in a jiffy using the son_of_suckerfish_horizontal template

http://forum.joomla.org/viewtopic.php?f=42&t=324483

Posted: **Mon Nov 17, 2008 1:32 am**

Hi, noobish type question here.
I've been going over the Suckerfish Extended Menu tutorial from http://docs.joomla.org/Creating_a_CSS_Drop_down_Menu and using it as a basis to get the pill menu from the rhuk_milkyway template to have a drop down style to it.
I've gotten some results to work so far in Firefox (still nothing in IE, but that's not fully the question at the moment, though suggestions would nice if anyone's got any

).. however those results are still not the correct ones. When I hover over the menu item that's supposed to have a drop down menu, I receive the drop down menu but over top of the menu item, not "dropping" / displaying below it as one would expect.
Anyone have any comments or ideas on what I may be doing wrong here, it would be greatly appreciated. Thanks ahead of time.

Here's the adjusted code from the CSS file:

Code: Select all

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

table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

td.pill_l {
  background: url(../images/mw_menu_cap_l.png) no-repeat;
  width:  20px;
  height: 32px;

}

td.pill_m {
  background: url(../images/mw_menu_normal_bg.png) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}

td.pill_r {
  background: url(../images/mw_menu_cap_r.png) no-repeat;
  width:  19px;
  height: 32px;
}

#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}

#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}

#pillmenu li {
	float: left;
	background: url(../images/mw_menu_separator.png) top right no-repeat;
	margin: 0;
	padding: 0;
}

#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
	float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
}

#pillmenu a#active_menu-nav {
	margin-top:2px;
	height: 21px;
	line-height: 21px;
	background-position: 0 0;
}

#pillmenu li ul  {
  position:absolute;
  left:-999em;
  height:auto;
  width:11em;
  font-weight:400;
  background:#c5c5c5;
  border:#4f4f4f 1px solid;
  margin:0;
}

#pillmenu li li {
  width:11em;
}

#pillmenu li ul a {
  width:11em;
  color:#f1f1f1;
  font-size:0.9em;
  line-height:1em;
  font-weight:400;
}
 
#pillmenu li:hover ul ul,#pillmenu li:hover ul ul ul,#pillmenu li.sfhover ul ul,#pillmenu li.sfhover ul ul ul{
  left:-999em;
}
 
#pillmenu li:hover ul,#pillmenu li li:hover ul,#pillmenu li li li:hover ul,#pillmenu li.sfhover
  l,#pillmenu li li.sfhover ul,#pillmenu li li li.sfhover ul {
  left:auto;
  z-index:6000;
}

#pillmenu li li:hover,#pillmenu li li.sfhover {
  background:#ebebeb 98% 50% no-repeat;
}
#leftcolumn {
	padding: 0;
	margin: 0;
	width: 20%;
	float:left;
}

#maincolumn,
#maincolumn_full {
	margin-left: 20%;
	padding-left: 15px;
	width: 75%;
}

#maincolumn_full {
	margin-left: 0;
	padding: 0;	
	width: 100%;
}

table.nopad {
	width: 100%;
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}

table.nopad td.middle_pad {
	width: 20px;
}

Posted: **Tue Nov 25, 2008 6:58 pm**

Not an expert but I had similar issues..

It sounds like a CSS conflict. I would suggest removing the parameters and test to find the conflicting code that way.

Working backwards from tested code like...

http://www.compassdesigns.net/tutorials ... -menu.html

.... saved me a lot of time and effort.

Posted: **Tue Nov 25, 2008 7:01 pm**

Hello everybody... First sorry for my english, I speak normally french! but I think my question must be in this topic and I hope somebody can help me. I use extended menu with the Suckerfish dropdown menu (http://de.siteof.de/extended-menu-templates.html) --> suckerfish-vertical-1.0.1.zip

And It's all ok but I have got one last problem. I want to change the backgroundcolor of the item of the menu (father) when i'm with the mouse on it's son.

Example : On this website (http://de.siteof.de/extended-menu-templ ... h_vertical). When I'm with the mouse on the menu 3.1 or 3.2, i want that the backgroundcolor of Menu 3 change.

Thank you very much for your help

Here under my code CSS :

Code: Select all

// based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/
if ((document.all) && (document.getElementById)) {
	function MenuListElementHoverFix() {
		var _this	= this;
		
		if (typeof(Array.prototype.push) == 'undefined') {
			// IE < 5.5 does not support push/pop
			function push() {
				var j = this.length;
				for (var i = 0; i < push.arguments.length; ++i) {
					this[j] = push.arguments[i];
					j++;
				}
			}
			function pop() {
				var i = this[this.length - 1];
				this.length--;
				return i;
			}
			Array.prototype.push	= push;
			Array.prototype.pop		= pop;
		}
		
		this.className				= 'hover';	// change the class name to use here if you are not happy with it
		this.classNameSuffix		= ' ' + this.className;
		this.removeClassNameRegExp	= new RegExp("\\b ?" + this.className + "\\b");
		this.hoverElementStack		= new Array();
		
		this.onmouseover	= function() {
			if (!_this.isHover(this)) {
				if (this.getAttribute('is_hover_class_removing') != 'true') {
					this.className	+= _this.classNameSuffix;
				}
				this.setAttribute('is_hover', 'true');
			}
		}
		this.isHover	= function(element) {
			return (element.getAttribute('is_hover') == 'true');
		}
		this.checkNonHoverState	= function(element) {
			if (!_this.isHover(element)) {
				element.className	= element.className.replace(_this.removeClassNameRegExp, '');
			}
			element.removeAttribute('is_hover_class_removing');
		}
		this.checkLastNonHoverState	= function() {
			var hoverElement	= null;
			if (_this.hoverElementStack.length > 0) {
				hoverElement	= _this.hoverElementStack.pop();
			}
			for (var i = _this.hoverElementStack.length - 1; i >= 0; i--) {
				// we need to apply the "non-hover" class to the children first - else the result is mixed in the IE
				var o = _this.hoverElementStack[i];
				while (o != null) {
					o	= o.offsetParent;
					if (o == hoverElement) {
						_this.checkNonHoverState(_this.hoverElementStack[i]);
						break;
					}
				}
			}
			if (hoverElement != null) {
				_this.checkNonHoverState(hoverElement);
			}
		}
		this.onmouseout		= function() {
			// all this mess to not change the class immediately (which would cause flickering in the IE)
			this.setAttribute('is_hover', 'false');
			if (this.getAttribute('is_hover_class_removing') != 'true') {
				this.setAttribute('is_hover_class_removing', 'true');
				_this.hoverElementStack.push(this);
				window.setTimeout(_this.checkLastNonHoverState, 100);
			}
		}
		this.fixElement		= function(elementRoot) {
			for (var i=0; i < elementRoot.childNodes.length; i++) {
				var node = elementRoot.childNodes[i];
				if (node.nodeName == "LI") {
					node.onmouseover	= this.onmouseover;
					node.onmouseout		= this.onmouseout;
				}
				this.fixElement(node);
			}
		};
		this.findElement	= function(elementRoot) {
			for (var i=0; i< elementRoot.childNodes.length; i++) {
				var node = elementRoot.childNodes[i];
				if (node.nodeName == "UL") {
					if ((node.id != '') && ((node.id.indexOf("menu") >= 0) || (node.id.indexOf("nav") >= 0))) {
						this.fixElement(node);
						continue;	// do not iterate through children of already fixed element
					}
				}
				this.findElement(node);
			}
		};
		this.fix			= function() {
			var node = document.body;
			if (node) {
				_this.findElement(node);
			}
		}
		this.addOnLoad		= function() {
			if (window.attachEvent) {
				window.attachEvent("onload", this.fix);
			} else {
				window.onload	= this.fix;
			}
		}
	}
	(new MenuListElementHoverFix()).addOnLoad();
}

Here my code Javascript :

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 {
	color: black;
}

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: #CCCCCC;
	color: black;
}

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: #CCCCCC;
	color: black;
}

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"); tactis.net - Barnabé pour enlevé l'affichage des flèche s'il existe des sous-menu*/
	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{
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	text-decoration: none;
	display: block;
	border: 0px solid silver;
	padding: 0.3em 0.5em 0.3em 0.5em;	/* top, right, bottom, left */
	line-height: 1em;
}

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: none;
	display: block;
	border: 1px solid silver;
	padding: 0.3em 0.5em 0.3em 0.5em;	/* top, right, bottom, left */
	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;
	background-color: #E0E0E0;
}

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: 10em;
}

ul.mainlevel-suckerfish-vertical li li {
}

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

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

Posted: **Wed Dec 03, 2008 12:04 pm**

I am completely blocked by the follwong issue:
I try to set up a picture-oriented menu with exmenu.
I have done this before on a joomla 1.0.something site.
It was some fuzzing with some nested spans, some background-picture-attributes set by the ex-menu’s template file and some clever hiding/showing css-attributes for the nested spans. But it worked.
I have a similar task now on joomla 1.5.8.
Began to set up the template file this morning, got stuck, got confused and finally found:

I write:

Code: Select all

<a href="{URL}" title="{CAPTION}" style="background-image: url(../bilder/{ITEM_ID}.jpg); background-position: center; background-repeat: no-repeat;">
…

to set up a link styled with a bg image.

Whatever I do, the text inside the brackets after the "url" for the bg image is returned with some characters added when displayed in the frontend. Output is:

Code: Select all

…
style="background-image: url('/../bilder/0.jpg'); 
…

This happens anytime a string "url" is followed by brackets containing any characters.
when I write

Code: Select all

url(something)

anywhere (!) in the exmenu template file, output is

Code: Select all

url('/something')

Anyone?

Posted: **Thu Dec 04, 2008 7:39 am**

Can someone help me with reproducing the following menu:
http://metaneva.org/index.php

I stumbled on this website and that's the kind of menu I would like to have. Howto? Should I enable 'elementid', or...

Posted: **Mon Dec 08, 2008 8:01 pm**

I have been looking for an answer to my issue on this forum and other and have not been able to find a definitive fix to not make the 3rd submenu auto Open when I click on the 1st submenu. I was able to ask the question to the developer of Extended Menu, Daniel Ecer, and he gave me guidance on what to look for in the CSS. I am new to Joomla and CSS, so it took me a little while to try all the combinations till I finally reached what worked. Not sure if it could have been done in a more streamlined manner, yet it works and I have learned so much in the process. Just add the following css code to the css for the menu. It could be adapted for further levels. I intended to include this to help anybody else that may have had the same issue and did not know what to include in the css to fix it.

Enjoy and have fun with CSS Menus. I know I am

/* dplavoie 12/07/2008 Fix issue with 3rd level submenu auto opening */

/* make 3rd submenu level open when the 2nd submenu level is clicked */
ul.mainlevel-son-of-suckerfish-horizontal li ul li ul li:hover li,
ul.mainlevel-son-of-suckerfish-horizontal li ul li ul li:hover li{
left: auto;
}

/* hide 3rd submenu so it does not auto expand when clicking on the 2nd submenu */
ul.mainlevel-son-of-suckerfish-horizontal li:hover ul li li li,
ul.mainlevel-son-of-suckerfish-horizontal li.hover ul li li li{
left: -999em;
}

/* dplavoie 12/07/2008 end of mod */

Posted: **Wed Dec 17, 2008 4:48 am**

de : Thank you very much for the wonderful Trg and the introduction

Posted: **Wed Dec 17, 2008 5:36 am**

Just to let you know, I created a drop down menu, with a horizontal submenu. Check http://www.metaneva.org to see the result (if interested).

I had to assign individual id's to the ul en li's to align it the way it is now.

Posted: **Wed Dec 17, 2008 12:59 pm**

@ dplavoie: Seems to work, but it doesn't do the job 100% correctly.

The third level doensn't open, that's great, but i encountered the following:

In the second level i have multiple menu items with a third level.
When i go to the third level of the first button, it shows fine, but when i go down to the next in this sub-level, it shows me the sub-items of the second button.

Structure in my test environment:

Home
-> Test1
.|--> test1-1
.|.|---> Test1-1-1
.|.|---> Test1-1-2
.|--> test1-2
...|---> test1-2-1

So, when i hover over test1-1, test 1-1-1 comes out.
When i want to hover to test 1-1-2, test1-2-1 gets visible.
So, it seems that the system thinks i hover over test1-2, and shows me test1-2-1.

I hope my story is clear..
Any ideas?

Posted: **Tue Feb 03, 2009 11:47 pm**

How can one create a image drop down using extended menu? I have the css working, but the images are gone now, and I would like an image only menu.

Thanks

Posted: **Sun Feb 15, 2009 1:50 am**

I am using EEM to display a dropdown select list for my sections, with the desired effect.

However, some of my articles have long titles and the default display of the select list will follow that of the length of the longest title of my articles.

Problem: The display of the module becomes unnecessarily too long and overflows the template.

I tried playing around with the module parameters but to no avail. I suspect that I might have to alter the css or php file but am unsure of how to.

Question: Is there a way to fix the width of the default display of the select list so that it does not become too long and overflow the template?

You can find an example of what I am trying to say at this website:
http://www.mangafox.com/

If you see the select down list ('select a manga'), you can see that the initial width of the select list bar is short but when you click on it, the width increases and there is also a scrolling bar for all the manga series.

I have tried it with the Extended Menu Module but I was unable to achieve the same desired effect as I am unable to adjust the width as well as insert a scrolling bar.

I think I may have to edit the selectlist.menuview.class but I am unsure how to.

Hope that someone can help me out!

Joomla! Forum - community, help and support

Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Bug if a string in a pat-template has "url(xyz)" ??

Re: Extended Menu

(solved) Extended Menu 3rd Submenu Auto Opening

Re: Extended Menu

Re: Extended Menu

Re: Extended Menu

Drop Down using images

Re: Extended Menu