You could have a look at the JavaScript which is part of my "menu templates". It collects the to be patched uls/lis according to their class name... it may be a little bit slower but then I also did not want to have a JavaScript code written for a certain id or collection of ids.htsolutions wrote: Update 12-28-05: Food For Thought While I was trying to discover what was wrong in IE I figured out what was happening. I was trying to use the example for two instances of suckerfish menus on my page. That meant that two HTML elements with the same name (mainlevelmainnav) were being used. So that is an error on my part since the Javascript (getElementByID) only finds the first instance of an HTML element. My goal (maybe I can get some help) is to make an update so that you can reuse the same CSS code with mutiple instances of a suckerfish menu on a web page for IE. According to w3.org you are suppose to use unique IDs (Behavior is not defined if more than one element has this id).
MiniDoc: Creating a CSS Drop-down Menu
-
- Joomla! Ace
- Posts: 1477
- Joined: Thu Aug 18, 2005 9:06 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
- htsolutions
- Joomla! Intern
- Posts: 50
- Joined: Tue Dec 27, 2005 3:31 pm
- Location: Michigan
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
de wrote:You could have a look at the JavaScript which is part of my "menu templates". It collects the to be patched uls/lis according to their class name... it may be a little bit slower but then I also did not want to have a JavaScript code written for a certain id or collection of ids.htsolutions wrote: Update 12-28-05: Food For Thought While I was trying to discover what was wrong in IE I figured out what was happening. I was trying to use the example for two instances of suckerfish menus on my page. That meant that two HTML elements with the same name (mainlevelmainnav) were being used. So that is an error on my part since the Javascript (getElementByID) only finds the first instance of an HTML element. My goal (maybe I can get some help) is to make an update so that you can reuse the same CSS code with mutiple instances of a suckerfish menu on a web page for IE. According to w3.org you are suppose to use unique IDs (Behavior is not defined if more than one element has this id).
Ok, I have updated my site to use extendend menus with your horizontal template. This worked out great so far. However, another issue with IE. The menus go behind the text. Could someone give me a hint..... I've tried using z-index but not luck.
http://www.homtechsol.com
-
- Joomla! Ace
- Posts: 1477
- Joined: Thu Aug 18, 2005 9:06 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Should actually work with z-index I think... but if you were happy with the previous CSS you could leave it as it was... and just use the other JavaScript. The only difference is that it uses the class "over" (which I will change to "hover") while the other JavaScript uses the class "sfover"... but this is easily changed either in the JavaScript or the CSS.htsolutions wrote: Ok, I have updated my site to use extendend menus with your horizontal template. This worked out great so far. However, another issue with IE. The menus go behind the text. Could someone give me a hint..... I've tried using z-index but not luck.
- htsolutions
- Joomla! Intern
- Posts: 50
- Joined: Tue Dec 27, 2005 3:31 pm
- Location: Michigan
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
OH YEAH! Your javascript worked.... BIG THANKS! I made a choice in your script to change code from "over" to "sfover" just to keep CSS template intact. I had to make one change in the extended menus module. There needed to have the class/module suffixes to have a name with "menu" in it. I made the suffixes as "mainmenu". So my code now is "Frankensteined!" Anyhow it works great both in IE and it FF.de wrote:Should actually work with z-index I think... but if you were happy with the previous CSS you could leave it as it was... and just use the other JavaScript. The only difference is that it uses the class "over" (which I will change to "hover") while the other JavaScript uses the class "sfover"... but this is easily changed either in the JavaScript or the CSS.htsolutions wrote: Ok, I have updated my site to use extendend menus with your horizontal template. This worked out great so far. However, another issue with IE. The menus go behind the text. Could someone give me a hint..... I've tried using z-index but not luck.
Recap - I followed the instructions at the top of this forum to get started. I used the CSS code from the top of this forum to get my drop down CSS menu code setup (I did not use the javascript). I installed extended menus module like the top of this forum states. However, instead of using "mainnav" as the suffix I used "mainmenu" instead. Then I used the javascript code off daniel's site @ http://de.siteof.de/extended-menu-templates.html. (see http://www.homtechsol.com ->view sourse to see actual javascript code).
Why - Well the info at the top of the forum works great. However, I need to have multiple menus in different locations. daniel's javascript allowed this to happen for me.
Again Much thanks!
-
- Joomla! Ace
- Posts: 1378
- Joined: Thu Aug 18, 2005 10:11 pm
- Location: San Juan - Argentina
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Hi guys
I was trying to make this suckerfish tutorial work in my template:
I got extended menu, installed, set suffix as mainnav, set menu style as tree list, expand menu = yes
I placed the IE Js code in my template's and i pasted the CSS code into the end of my template_css.css file...
Don't know what is the z-index stuff, but well, I see the menu, but only vertical, without sublevels, etc.
I'm testing @ my localhost... does any1 know what could I try to make this work ?
Thanks
I was trying to make this suckerfish tutorial work in my template:
I got extended menu, installed, set suffix as mainnav, set menu style as tree list, expand menu = yes
I placed the IE Js code in my template's and i pasted the CSS code into the end of my template_css.css file...
Don't know what is the z-index stuff, but well, I see the menu, but only vertical, without sublevels, etc.
I'm testing @ my localhost... does any1 know what could I try to make this work ?
Thanks
- htsolutions
- Joomla! Intern
- Posts: 50
- Joined: Tue Dec 27, 2005 3:31 pm
- Location: Michigan
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
First answer is that the z-index allows you to set components into the foreground and background. So if your dropdown menu was behind a picture you could set the z-index to bring the dropdown menu in front of the picture on your website.quiquedcode wrote: Hi guys
I was trying to make this suckerfish tutorial work in my template:
I got extended menu, installed, set suffix as mainnav, set menu style as tree list, expand menu = yes
I placed the IE Js code in my template's and i pasted the CSS code into the end of my template_css.css file...
Don't know what is the z-index stuff, but well, I see the menu, but only vertical, without sublevels, etc.
I'm testing @ my localhost... does any1 know what could I try to make this work ?
Thanks
As for your problem you should check somethings. Try running your new menus in Firefox. If you can't get it to work in irefox (which is the easiest) then you will have to look at other issues. If you have tested it out in Firefox and it works then you need to look at the sfover javascript or maybe there is an error in the CSS not calling the sfover script.
If all looks well then here is the problem that i had. I started out with too many nested css classes. So I made my css as simple as possible with the least amount of nested classes.
Without seeing the code I cannot give you any more advice.
Note: once you have gotton the suckerfish to work you can take a look at my site and check out an updated javascript code. Which will allow you place more menus on a single page that you can make different sytles with. (Of couse it means more tweaking of css)
http://www.homtechsol.com
-
- Joomla! Ace
- Posts: 1378
- Joined: Thu Aug 18, 2005 10:11 pm
- Location: San Juan - Argentina
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
I got it working
I read instructions again and I noticed a little "and" in bold... and well, I checked and I forgot to put the menu suffix...
Now it is working, but:
- IE, doesn't like. I've put the JS code in my template.
- Which is the "hover" css code for level 0 ? I could change hover color but only for sublevel 1...
Thanks 4 helping
I read instructions again and I noticed a little "and" in bold... and well, I checked and I forgot to put the menu suffix...
Now it is working, but:
- IE, doesn't like. I've put the JS code in my template.
- Which is the "hover" css code for level 0 ? I could change hover color but only for sublevel 1...
Thanks 4 helping
- htsolutions
- Joomla! Intern
- Posts: 50
- Joined: Tue Dec 27, 2005 3:31 pm
- Location: Michigan
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
When you say that IE doesn't like it are you still having problems with the JS code doing drop downs in IE?quiquedcode wrote: I got it working
I read instructions again and I noticed a little "and" in bold... and well, I checked and I forgot to put the menu suffix...
Now it is working, but:
- IE, doesn't like. I've put the JS code in my template.
- Which is the "hover" css code for level 0 ? I could change hover color but only for sublevel 1...
Thanks 4 helping
Your top level is covered by #mainlevelmainmenu a{}
You can change the text, backgorund color, etc.
Your sub-menus are covered by #mainlevelmainmenu li ul a{}
Your hover submenus by
#mainlevelmainmenu li ul a:hover{}
Your hover top level by
#mainlevelmainmenu a:hover{}
Then you have the :sfover class that runs your javascript hack for hover drop downs.
Note: Took me sometime to get this going but once you spend sometime at it you'll get it. Post some code too so that I can help you out when you are stuck.... Remember also to get it working in Firefox first then IE second
- Spheric
- Joomla! Enthusiast
- Posts: 114
- Joined: Thu Nov 24, 2005 3:24 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
"The menu is what has been coined “suckerfish” (don’t ask me why)"
patrick griffins and dan web contributed the Suckerfish drop down to Alist back in '03.
http://www.alistapart.com/articles/dropdowns
that is why we call them suckerfish dropdowns. why they called them suckerfish is another matter.
patrick griffins and dan web contributed the Suckerfish drop down to Alist back in '03.
http://www.alistapart.com/articles/dropdowns
that is why we call them suckerfish dropdowns. why they called them suckerfish is another matter.
The trouble with knowing everything is that you don't.
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
yeah, I knew that, just not where the fish came into it, lol
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
- Spheric
- Joomla! Enthusiast
- Posts: 114
- Joined: Thu Nov 24, 2005 3:24 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
like your work. regards.
The trouble with knowing everything is that you don't.
- raymond
- Joomla! Enthusiast
- Posts: 245
- Joined: Tue Jan 24, 2006 3:24 pm
- Location: Philippines
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Compass,
Is there a way to add more functionality to this suckerfish menu? Like, say, adding an image that appears on toplevel menu items when they have lowerlevel menu items? If so, how do I edit the code? Thanks a million!
Is there a way to add more functionality to this suckerfish menu? Like, say, adding an image that appears on toplevel menu items when they have lowerlevel menu items? If so, how do I edit the code? Thanks a million!
█ http://raymond.santosestrella.net
█ Santos Estrella Personal Site
█ http://www.thecorpusjuris.com
█ The online repository of Philippine law, jurisprudence, administrative issuances and legal research tools.
█ Santos Estrella Personal Site
█ http://www.thecorpusjuris.com
█ The online repository of Philippine law, jurisprudence, administrative issuances and legal research tools.
-
- Joomla! Ace
- Posts: 1477
- Joined: Thu Aug 18, 2005 9:06 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
For this you will probably have to use a patTemplate file (menu.html)...raymond wrote: Is there a way to add more functionality to this suckerfish menu? Like, say, adding an image that appears on toplevel menu items when they have lowerlevel menu items? If so, how do I edit the code? Thanks a million!
Have a look there: http://de.siteof.de/extended-menu-templates.html
The menu template puts an element with the "expanded" class around it... which is styled for sub menu items (like Moslate->howtos)... but could be styled in the same way for main level menu items (like it is for my site template).
You could combine the CSS+JS mentioned here with the menu.html+expanded styling of the menu templates you will find on my site.
- ugsmi0
- I've been banned!
- Posts: 90
- Joined: Fri Jan 13, 2006 8:22 pm
MiniDoc: Creating a CSS Drop-down Menu
How to get rid of the bullets in the menu links ?
i thought list-style: none takes care of that ? they still appear
i thought list-style: none takes care of that ? they still appear
-
- Joomla! Apprentice
- Posts: 28
- Joined: Mon Aug 29, 2005 4:17 pm
- Location: Jamestown, RI USA
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Try list-style-type: none;ugsmi0 wrote: How to get rid of the bullets in the menu links ?
i thought list-style: none takes care of that ? they still appear
Cheers -- Tony
Tony Lush
Advance Web Marketing
AdvanceWebMarketing.com
Advance Web Marketing
AdvanceWebMarketing.com
- ugsmi0
- I've been banned!
- Posts: 90
- Joined: Fri Jan 13, 2006 8:22 pm
MiniDoc: Creating a CSS Drop-down Menu
list-style-type: none; doesn't work either still shows the bullets in the link ?
Why is it that ext menu seems to be the only thing on the page that shows a list bullet next to each link ?
try several ways to turn it off with no luck, is it be default somewhere in the mod file ?
I'm using it to pull in the main menu
Why is it that ext menu seems to be the only thing on the page that shows a list bullet next to each link ?
try several ways to turn it off with no luck, is it be default somewhere in the mod file ?
I'm using it to pull in the main menu
Last edited by ugsmi0 on Fri Feb 03, 2006 10:07 pm, edited 1 time in total.
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
This could be something as simple as teh order in which you have declared your "ul" and "li"'s in your css file. If you post a link it would be easy enough to spot 

http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
- ugsmi0
- I've been banned!
- Posts: 90
- Joined: Fri Jan 13, 2006 8:22 pm
MiniDoc: Creating a CSS Drop-down Menu
it's on localhost,
all I did was follow the instructions copied the css into the template css, turned on extended mod and pulled in main menu
the css is towards the top so not sure how that could effect it. According to the instructions should have worked like magic
Here I thought this was going to be an easy plug and play menu
all I did was follow the instructions copied the css into the template css, turned on extended mod and pulled in main menu
the css is towards the top so not sure how that could effect it. According to the instructions should have worked like magic
Here I thought this was going to be an easy plug and play menu

- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
is there still someone in this thread.
I followed the instruction but can not make it work, i get a simple tree list with bullet, i checked and recheck each step of the tutorial and i still get nowhere.
someone has any idea.
i really would like to use a CSS horizontal dropdown menu for my website.
thanks in advance.
julien
I followed the instruction but can not make it work, i get a simple tree list with bullet, i checked and recheck each step of the tutorial and i still get nowhere.
someone has any idea.
i really would like to use a CSS horizontal dropdown menu for my website.
thanks in advance.
julien
- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
Eureka !!
now it's working but not in IE.
can someone explain the z-index, i mean , what happen when you increase the value vs decrease the value.
does:
increase = going further
and
decrease = going closer
or the other way around?
cheers
julien
now it's working but not in IE.
can someone explain the z-index, i mean , what happen when you increase the value vs decrease the value.
does:
increase = going further
and
decrease = going closer
or the other way around?
cheers
julien
Re: MiniDoc: Creating a CSS Drop-down Menu
The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.
Love the hat, BobTheBob01. Nice!
Amy
Love the hat, BobTheBob01. Nice!
Amy
- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
thanks for the compliment on the hat ( it started as a joke since i am in vietnam)
i try playing around with this z-index, but IE still does not show the sub-level menus, everything works well in FF
haahaahhaha F%%#$$@^@&@*king bill gates!!!
the js seems ok.
i am confused?
i try playing around with this z-index, but IE still does not show the sub-level menus, everything works well in FF
haahaahhaha F%%#$$@^@&@*king bill gates!!!
the js seems ok.
i am confused?

- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
ha..it's getting better, i finaly got to make it appear on my page, that's a start
so no it's align horizontaly but i can not find a way to bring it up right under the main level menu, right now it's show way under it, alsmot at the half of the page.
thanks for your help again
cheers
julien
so no it's align horizontaly but i can not find a way to bring it up right under the main level menu, right now it's show way under it, alsmot at the half of the page.
thanks for your help again
cheers
julien
- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
well Amy,
i don't know what you did , but you have been a great source of insiration, i finaly got it, i had to had the value "top", to bring it where it should be.
i guess i should wear my hat more often !!!!!! :P

ciao
julien
i don't know what you did , but you have been a great source of insiration, i finaly got it, i had to had the value "top", to bring it where it should be.
i guess i should wear my hat more often !!!!!! :P


ciao
julien
- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
hooooo twilight zone!!!
now that i have spent 30 minutes to fix it so it works in IE, it no longer work in FF
it's too much for me at this time 4am.
anybody have an idea on how to make it work for these 2.
cheers
julien
now that i have spent 30 minutes to fix it so it works in IE, it no longer work in FF
it's too much for me at this time 4am.
anybody have an idea on how to make it work for these 2.
cheers
julien
Re: MiniDoc: Creating a CSS Drop-down Menu
Julien - are you talking to yourself? lol to be honest, i am best helping with css by NOT helping with css. i am such a newbie there. This IS the group that could help you, though. Many are pro's. Maybe they are not around right now? You appear offline now. 4 AM???? I suspect THAT was your problem. I hope you are now resting! ttyl......Amy
Re: MiniDoc: Creating a CSS Drop-down Menu
Julien -
I think I know why you were not able to get any help. Next time, maybe post in the Templates forum http://forum.joomla.org/index.php/board,42.0.html . That is where the CSS talk is, I believe. This thread is more to discuss the FAQ for the menu (like were the FAQ instructions correct, complete, helpful, important.)
Give it a try if you need more help in the templates area - I'll bet that will work better.
Good luck!
Amy
I think I know why you were not able to get any help. Next time, maybe post in the Templates forum http://forum.joomla.org/index.php/board,42.0.html . That is where the CSS talk is, I believe. This thread is more to discuss the FAQ for the menu (like were the FAQ instructions correct, complete, helpful, important.)
Give it a try if you need more help in the templates area - I'll bet that will work better.
Good luck!
Amy
- bobthebob01
- Joomla! Enthusiast
- Posts: 195
- Joined: Fri Oct 07, 2005 1:02 am
Re: MiniDoc: Creating a CSS Drop-down Menu
Amy
thanks a lot, yes i know i was talking to myself, and i think one major problem is that it was 4am and my head was not there anymore. That's what happen when you stay late and eat too many springroles
:P you remember what the singer Seal said:" we never gonna survive unless... we get a litlle all crazy"

thanks for the advise, i will check that forum to get some help.
But i think my problem has to do with the positioning of my module, i had to tweak too much to have it placed somewhere using one css trick for FF and another for IE. so i'll go get help there.
nice talking to myself...heu....i mean to you.
cheers Amy
julien
thanks a lot, yes i know i was talking to myself, and i think one major problem is that it was 4am and my head was not there anymore. That's what happen when you stay late and eat too many springroles









thanks for the advise, i will check that forum to get some help.
But i think my problem has to do with the positioning of my module, i had to tweak too much to have it placed somewhere using one css trick for FF and another for IE. so i'll go get help there.
nice talking to myself...heu....i mean to you.
cheers Amy
julien
Re: MiniDoc: Creating a CSS Drop-down Menu
i don't code so well at 4 am, either. my typing is not so good at 2 am, either. good night! hope you found answers -- either from inside of your own head or someone was able to help!
good luck!
amy
good luck!
amy
-
- Joomla! Apprentice
- Posts: 9
- Joined: Mon Jan 16, 2006 6:23 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Daniel's templates for the Extended Module employ a menu.ini file to override the class suffix fields in the Extended Module administrator panel. Is the menu.ini loaded when the Extended Module loads the menu.html file? What files loads the menu.ini so that it overrides the class suffix fields?
Please correct my understanding of how to apply one of Daniel's templates to his Extended Module if I am mistaken...
Suppose that the rhuk_solarflare_ii template is the default or assigned Joomla! template. The menu.ini and menu.html files packaged in Daniel's template for the Extended Module must be copied to the /www/templates/rhuk_solarflare_ii directory. The "js" directory provided by Daniel's template must be copied to /www/templates/rhuk_solarflare_ii. The menu.css file must be copied to the /www/templates/rhuk_solarflare_ii/css directory. To include the template's styles, the $mosConfig_live_site variable must be included in the tag that links the index.php file to the menu.css file. For example, place the following line between the and tags inside your index.php file in the rhuk_solarflare_ii directory:
/templates/rhuk_solarflare_ii/css/menu.css">.
To include the JavaScript file, place the following line between and :
/templates/rhuk_solarflare_ii/js/menu.js" type="text/javascript">.
If you have styles for drop-down menus for the solarflare template's top menu, please consider posting them.
Please refer me to a patTemplate tutorial if you know of one. Thanks!
Please correct my understanding of how to apply one of Daniel's templates to his Extended Module if I am mistaken...
Suppose that the rhuk_solarflare_ii template is the default or assigned Joomla! template. The menu.ini and menu.html files packaged in Daniel's template for the Extended Module must be copied to the /www/templates/rhuk_solarflare_ii directory. The "js" directory provided by Daniel's template must be copied to /www/templates/rhuk_solarflare_ii. The menu.css file must be copied to the /www/templates/rhuk_solarflare_ii/css directory. To include the template's styles, the $mosConfig_live_site variable must be included in the tag that links the index.php file to the menu.css file. For example, place the following line between the and tags inside your index.php file in the rhuk_solarflare_ii directory:
/templates/rhuk_solarflare_ii/css/menu.css">.
To include the JavaScript file, place the following line between and :
/templates/rhuk_solarflare_ii/js/menu.js" type="text/javascript">.
If you have styles for drop-down menus for the solarflare template's top menu, please consider posting them.
Please refer me to a patTemplate tutorial if you know of one. Thanks!