Extended Menu
- TomT
- Joomla! Ace
- Posts: 1323
- Joined: Thu Aug 18, 2005 5:50 am
- Location: Amsterdam
- Contact:
Re: Extended Menu
ul.submenu li ul needs a height: auto. (to begin with, i'm not sure if this will fix the problem)
-
- Joomla! Fledgling
- Posts: 2
- Joined: Mon Jul 21, 2008 11:28 pm
Re: Extended Menu
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
- Jeremy
- kai920
- Joomla! Guru
- Posts: 542
- Joined: Sun Sep 04, 2005 3:59 pm
- Location: Hong Kong
Re: Extended Menu
Hi Tom, which element are you referring to with the empty class/id? I did not see it using Firebug...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.
Thanks
- TomT
- Joomla! Ace
- Posts: 1323
- Joined: Thu Aug 18, 2005 5:50 am
- Location: Amsterdam
- Contact:
Re: Extended Menu
Hi Kai, i used the webdeveloper extension in FF. You can make it outline the elements.
- black mamba
- Joomla! Apprentice
- Posts: 18
- Joined: Sun Dec 02, 2007 7:38 pm
Re: Extended Menu
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
and .css
What is wrongly? Where is mistake?
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();
}
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;
}
- ashar
- Joomla! Enthusiast
- Posts: 122
- Joined: Wed Sep 12, 2007 5:55 am
- Location: Pakistan
- Contact:
Re: Extended Menu
Are there any known issues of Extended Menu with Joomla 1.5.5 and IE 8
-
- Joomla! Apprentice
- Posts: 10
- Joined: Wed Aug 13, 2008 6:20 pm
Re: Extended Menu
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.
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.
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: Extended Menu
Congratz on the mod.
Is it possible to combine it with mootools? Suckerfish is rather easy, what about mootools slide effects?
Is it possible to combine it with mootools? Suckerfish is rather easy, what about mootools slide effects?
- Patitas
- Joomla! Fledgling
- Posts: 2
- Joined: Wed Sep 10, 2008 10:03 pm
- Location: Belo Horizonte, Brazil
Re: Extended Menu
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.ashar wrote:Are there any known issues of Extended Menu with Joomla 1.5.5 and IE 8
You can do both: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.
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.
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat Sep 20, 2008 8:59 pm
Re: Extended Menu
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.
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.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Sep 24, 2008 12:06 pm
Re: Extended Menu
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?
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?
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Sep 24, 2008 12:06 pm
Re: Extended Menu
anyone can you help me??
-
- Joomla! Apprentice
- Posts: 40
- Joined: Wed Oct 17, 2007 10:24 am
Re: Extended Menu
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.
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.
- Ronze
- Joomla! Explorer
- Posts: 394
- Joined: Thu Jan 17, 2008 7:31 pm
Re: Extended Menu
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?
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?
Read developer tips & and tricks about Joomla on my blog:
http://www.youcanjoomla.com
http://www.youcanjoomla.com
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: Extended Menu
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
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.
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;
}
- Ronze
- Joomla! Explorer
- Posts: 394
- Joined: Thu Jan 17, 2008 7:31 pm
Re: Extended Menu
No, I mean that the Extended Menu simply doesn't output any active class or id no matter what I do
Read developer tips & and tricks about Joomla on my blog:
http://www.youcanjoomla.com
http://www.youcanjoomla.com
-
- Joomla! Apprentice
- Posts: 35
- Joined: Thu Jan 18, 2007 4:55 pm
- Location: Iowa US
Re: Extended Menu
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....
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....
- Ronze
- Joomla! Explorer
- Posts: 394
- Joined: Thu Jan 17, 2008 7:31 pm
Re: Extended Menu
Thats typically a CSS thing, not the Extended Menu itself :-)
Read developer tips & and tricks about Joomla on my blog:
http://www.youcanjoomla.com
http://www.youcanjoomla.com
-
- Joomla! Apprentice
- Posts: 35
- Joined: Thu Jan 18, 2007 4:55 pm
- Location: Iowa US
Re: Extended Menu
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
http://forum.joomla.org/viewtopic.php?f=42&t=324483
-
- Joomla! Fledgling
- Posts: 1
- Joined: Mon Nov 17, 2008 1:16 am
Re: Extended Menu
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:
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;
}
-
- Joomla! Apprentice
- Posts: 35
- Joined: Thu Jan 18, 2007 4:55 pm
- Location: Iowa US
Re: Extended Menu
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.
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.
-
- Joomla! Fledgling
- Posts: 1
- Joined: Tue Nov 25, 2008 6:48 pm
Re: Extended Menu
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 :
Here my code Javascript :
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();
}
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;
}
-
- Joomla! Apprentice
- Posts: 5
- Joined: Fri Apr 14, 2006 3:38 pm
- Contact:
Bug if a string in a pat-template has "url(xyz)" ??
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:
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:
This happens anytime a string "url" is followed by brackets containing any characters.
when I write
anywhere (!) in the exmenu template file, output is
Anyone?
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;">
…
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');
…
when I write
Code: Select all
url(something)
Code: Select all
url('/something')
Alexander Frese
http://www.quarum.de
http://www.quarum.de
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: Extended Menu
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...
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...
-
- Joomla! Apprentice
- Posts: 6
- Joined: Sat Sep 13, 2008 3:25 pm
(solved) Extended Menu 3rd Submenu Auto Opening
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 */
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 */
-
- Joomla! Apprentice
- Posts: 14
- Joined: Wed Dec 17, 2008 2:39 am
Re: Extended Menu
de : Thank you very much for the wonderful Trg and the introduction
Signature rules http://forum.joomla.org/viewtopic.php?f=8&t=65
only exact urls allowed
only exact urls allowed
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: Extended Menu
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.
I had to assign individual id's to the ul en li's to align it the way it is now.
-
- Joomla! Apprentice
- Posts: 12
- Joined: Fri Feb 09, 2007 10:51 pm
Re: Extended Menu
@ 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?
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?
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Drop Down using images
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
Thanks
-
- Joomla! Apprentice
- Posts: 5
- Joined: Wed Oct 03, 2007 8:47 pm
Re: Extended Menu
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!
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!