Page 28 of 34

Re: Extended Menu

Posted: Tue Jul 22, 2008 6:39 am
by TomT
ul.submenu li ul needs a height: auto. (to begin with, i'm not sure if this will fix the problem)

Re: Extended Menu

Posted: Tue Jul 22, 2008 4:38 pm
by Chead1
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

Re: Extended Menu

Posted: Tue Jul 22, 2008 9:34 pm
by kai920
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

Re: Extended Menu

Posted: Wed Jul 23, 2008 7:33 am
by TomT
Hi Kai, i used the webdeveloper extension in FF. You can make it outline the elements.

Re: Extended Menu

Posted: Fri Aug 01, 2008 1:19 pm
by black mamba
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

Image

IE

Image



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?

Re: Extended Menu

Posted: Tue Aug 19, 2008 9:43 am
by ashar
Are there any known issues of Extended Menu with Joomla 1.5.5 and IE 8

Re: Extended Menu

Posted: Tue Sep 02, 2008 6:29 pm
by ocilya42
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.

Re: Extended Menu

Posted: Thu Sep 04, 2008 8:59 am
by kadded
Congratz on the mod.

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

Re: Extended Menu

Posted: Fri Sep 12, 2008 6:48 pm
by Patitas
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.

Re: Extended Menu

Posted: Sun Sep 21, 2008 12:36 am
by niczoom
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.

Re: Extended Menu

Posted: Wed Sep 24, 2008 3:38 pm
by pancu
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?

Re: Extended Menu

Posted: Mon Oct 13, 2008 9:31 am
by pancu
anyone can you help me?? :( :(

Re: Extended Menu

Posted: Wed Oct 15, 2008 1:04 pm
by Napalm
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

Image

I would really appreciate help.

Re: Extended Menu

Posted: Wed Oct 22, 2008 2:03 pm
by Ronze
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?

Re: Extended Menu

Posted: Wed Oct 22, 2008 7:42 pm
by kadded
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.

Re: Extended Menu

Posted: Thu Oct 23, 2008 9:05 am
by Ronze
No, I mean that the Extended Menu simply doesn't output any active class or id no matter what I do

Re: Extended Menu

Posted: Fri Oct 24, 2008 6:58 pm
by jonleshark
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....

Re: Extended Menu

Posted: Sat Oct 25, 2008 10:06 am
by Ronze
Thats typically a CSS thing, not the Extended Menu itself :-)

Re: Extended Menu

Posted: Tue Nov 04, 2008 7:34 pm
by jonleshark
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

:)

Re: Extended Menu

Posted: Mon Nov 17, 2008 1:32 am
by devilyn
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;
}

Re: Extended Menu

Posted: Tue Nov 25, 2008 6:58 pm
by jonleshark
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.

Re: Extended Menu

Posted: Tue Nov 25, 2008 7:01 pm
by roots_man
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;
}

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

Posted: Wed Dec 03, 2008 12:04 pm
by alexanderfrese
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?

Re: Extended Menu

Posted: Thu Dec 04, 2008 7:39 am
by kadded
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...

(solved) Extended Menu 3rd Submenu Auto Opening

Posted: Mon Dec 08, 2008 8:01 pm
by dplavoie
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 :laugh:


/* 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 */

Re: Extended Menu

Posted: Wed Dec 17, 2008 4:48 am
by klialbal
de : Thank you very much for the wonderful Trg and the introduction

Re: Extended Menu

Posted: Wed Dec 17, 2008 5:36 am
by kadded
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.

Re: Extended Menu

Posted: Wed Dec 17, 2008 12:59 pm
by lord_fornax
@ 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?

Drop Down using images

Posted: Tue Feb 03, 2009 11:47 pm
by kadded
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

Re: Extended Menu

Posted: Sun Feb 15, 2009 1:50 am
by deslim80
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!