MiniDoc: Creating a CSS Drop-down Menu

de · Post by de » Wed Dec 28, 2005 5:44 pm

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).

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 · Post by **htsolutions** » Thu Dec 29, 2005 3:31 am

de wrote:
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).
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.

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

de · Post by de » Thu Dec 29, 2005 9:23 am

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.

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 · Post by **htsolutions** » Fri Dec 30, 2005 12:36 am

de wrote:
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.
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.

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.

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!

quiquedcode · Post by **quiquedcode** » Sun Jan 08, 2006 2:29 am

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

htsolutions · Post by **htsolutions** » Sun Jan 08, 2006 9:02 pm

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

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.

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

quiquedcode · Post by **quiquedcode** » Mon Jan 09, 2006 4:58 pm

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

htsolutions · Post by **htsolutions** » Mon Jan 09, 2006 6:35 pm

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

When you say that IE doesn't like it are you still having problems with the JS code doing drop downs in IE?

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 · Post by **Spheric** » Tue Jan 10, 2006 11:00 pm

"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.

compass · Post by **compass** » Wed Jan 11, 2006 12:01 am

yeah, I knew that, just not where the fish came into it, lol

Spheric · Post by **Spheric** » Wed Jan 11, 2006 1:32 am

like your work. regards.

raymond · Post by **raymond** » Tue Jan 31, 2006 11:35 am

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!

de · Post by de » Tue Jan 31, 2006 12:41 pm

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!

For this you will probably have to use a patTemplate file (menu.html)...
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 · Post by **ugsmi0** » Fri Feb 03, 2006 6:42 pm

How to get rid of the bullets in the menu links ?

i thought list-style: none takes care of that ? they still appear

tonyl09 · Post by **tonyl09** » Fri Feb 03, 2006 6:47 pm

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

Try list-style-type: none;

Cheers -- Tony

ugsmi0 · Post by **ugsmi0** » Fri Feb 03, 2006 7:10 pm

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

Waseem Sadiq · Post by **Waseem Sadiq** » Fri Feb 03, 2006 11:12 pm

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

ugsmi0 · Post by **ugsmi0** » Fri Feb 03, 2006 11:26 pm

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

bobthebob01 · Post by **bobthebob01** » Wed Mar 29, 2006 8:49 am

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

bobthebob01 · Post by **bobthebob01** » Wed Mar 29, 2006 7:00 pm

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

AmyStephen · Post by **AmyStephen** » Wed Mar 29, 2006 7:26 pm

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

bobthebob01 · Post by **bobthebob01** » Wed Mar 29, 2006 7:54 pm

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?

bobthebob01 · Post by **bobthebob01** » Wed Mar 29, 2006 8:14 pm

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

bobthebob01 · Post by **bobthebob01** » Wed Mar 29, 2006 8:19 pm

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

bobthebob01 · Post by **bobthebob01** » Wed Mar 29, 2006 8:48 pm

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

AmyStephen · Post by **AmyStephen** » Thu Mar 30, 2006 12:38 am

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

AmyStephen · Post by **AmyStephen** » Thu Mar 30, 2006 12:42 am

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

bobthebob01 · Post by **bobthebob01** » Thu Mar 30, 2006 3:21 am

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

AmyStephen · Post by **AmyStephen** » Thu Mar 30, 2006 7:30 am

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

soakedintea · Post by **soakedintea** » Fri Mar 31, 2006 7:01 am

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!

The Joomla! Forum™