MiniDoc: Creating a CSS Drop-down Menu

[sherm]

yeah this doesn't work for me at all.

it tries to display something but it's definitely not a menu.  all the directions are far too vague.  maybe someone can look at the site and let me know whats wrong:

http://www.thesuiteonline.com/joomla

[adec]

sherm  i see you have fixed it ..... it works for me... blog seems to be the only one with a 'Temp' dropdown menu...

adec

[sherm]

yeah, i have fixed it.  is there anyway to use images for the backgrounds instead of background-colors?

[ddmobley]

Would it be possible for someone to repost the CSS portion of the tutorial showing how to do a vertical navigation with flyout secondary and tertiary menu items?  I am a CSS idiot and I was still able to install the setup listed in the tutorial and get it working with no problem. 

Now what I would like to do is create a left hand vertical navigation menu that shows only the active links for the current document tree using the "active_menu" class id.  But like I said, I am a CSS idiot and even though I got the second copy of extmenu installed and showing the full menu tree, I can't get any of the flyouts working because I can't get the CSS right. 

I'll never be able to get the "active_menu" portion working right until I get the vertical dropdown part figured out.

[ddmobley]

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.

I downloaded your extended menu module and installed it.  I too would like to put target a navigation link that has children beneath it with the "expanded" class. 

Your extended menu zip file contained a "menu.html" pat file.  Did Joomla install it with the rest of the module?  I can't see it on the server, and I looked in the template directory.  Does the "menu.html" that comes with your extended menu archive have the "expanded" class in it?  If I need to upload it, what directory does it go into, the root template directory, or the directory of the template you are using?

[ddmobley]

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.

I have read and followed this tutorial and had great success.  It is right on the money.  I notice Barrie ("compass") didn't use the "menu.html" file in his tutorial and that was because he styled the output of the extended menu module with his own CSS without needing special considerations coded into the UL's and LI's.

You can see my results at: http://www.debt-option.net.  Hover over the FAQ's link for the dropdowns.

The only other thing I would like to do is be able to add an "arrow" graphic to the background of the hovered links when there are children documents available, such as when you hover over "FAQ's", you see the list "FAQ1, FAQ2, FAQ3" come up.  If you hover over "FAQ1" you can see the list of children documents come up, but it would be nice to put the "arrow" graphic in the background of "FAQ1" when hovering over the parent "FAQ's" so you would know there are sub-documents there.

I see where Daniel accomplished this using the Suckerfish horizontal files, which introduces another level of Javascript code to your site, and probably with a modified "menu.html" file to tag the populated parent documents with an "extended" class.  I take it there is no other way than use the Suckerfish method, the associated Javascript and a modified "menu.html"?  I liked the simplicity of what Barrie did -- I only wished there were a way to build on that simplicity and not introduce more code just to define an "extended" class.

Thoughts?  Daniel?  Barrie?

[carsten888]

how to show sub-menu as well as unfold menu?

I trying to get a dropdown-menu which does not just show the top-level of navigation and then pops all which is underneath.

I'm using ext. menu with suckerfish vertical: how to show sub-menu as well as unfold menu

say this is my menu structure (its just an example) :

things
shapes
  round
      circle
      oval
  square
colors

so when I'm on page 'shapes' this is what i want to be visible:

things
shapes
  round   
  square
colors

when hover over 'round' 'circle' and 'oval' should pop.

[moun]

Hi, out there. First I hope, that's the good thread and sorry for my relative poor english.
Here is my mess. I follow the barrie tuto for css dropdown menu and it works, but i can't
get my active/current menuitem highlighted. My output source looks like that:




I've tried to style the mainlevel_currentmainnav class and the active_menumainnav id in my
css but i still not got my active menu highlighted. Does someone knows why or how i could
solve this. Thank you.

Regards.

[carsten888]

you might also want to post your css for that particular id and class.

(and you might also want to start a new tread)

[Alfredo Tester]

I am really stuck with this drop down menu.  I followed the example posted on Barrie Norths template tutorial. 

It works great in firefox.  Doesn't work in IE at all.  So I'm guessing that I'm doing something wrong with the javascript.  I copied the javascript posted on the tutorial and pasted it into my index.php.  I then cut and posted the css styling and put it into my template.css.css. 

I am new to css so maybe i missed a step that is obvious to everyone else.  Would love your help.  And If i need to post more details just let me know what I should put.

Thanks so much.

[Alfredo Tester]

Actually it does appear to be working in IE.  Either I made some change while messing around with it that caused it to work.  Or it was there all along.

It just happens to be floating off the side of my main page.  Way to the right and only part of it can be seen.  I'm guessing I need to make some modifications in my css.  I will read back through the thread and try to see how to fix this.  If anyone has suggestions would love them.  I have found myself over my head here and am trying to figure it out. 

[Alfredo Tester]

me again.  I switched to the css that was posted in this thread instead of the one posted on Barrie North's Template Tutorial.  Now it drops down on both ie and firefox right below the top menu item like it should.  However it put my links in absolute position and not in my document.  got rid of the absolute position and it goes back to the old way of the drop downs messed up.  so now its just finding a compromise between the two.  Getting it to drop down right below in IE but not using absolute positioning.  The site is http://www.ontariopharmacyinc.com


I realize tht i'm posting mutliple times.  Just trying to figure it out and hopefully if someone comes across then maybe somone will see share what i need to do in my css.  think i've isolated it to that.  And hopefully this will help someone that runs into the same problem that I have.

Thanks 

got it solved!    Used the css on this thread.  Thanks to Kenmcd and compass for their work.  And everyone else posting in this.  it has helped seeing other peoples posts.

[north]

I'm trying miserably to create a horizontal menu, like http://www.gene.com.

Can someone please can take a look at my site, and help me turn this "extended vertical menu" into a horizontal drop down menu?

http://deth.cocoonworks.com/

Cheers,
NORTH

[Alfredo Tester]

I found the template tutorial by Barrie North to be very helpful.  It describes an approach to drop down menus towards the bottom of the page.  It gets the basics of the horizontal drop down menu using suckerfish.  Then you could edit it to look different in your css.

http://dev.joomla.org/content/view/1136/79/1/10/

I ended up using the css posted earlier in this thread.  Worked great for me in ff.  Took a bit of work in IE but i'm new to joomla and css.

Best of luck. 

[north]

Hmmmm... ok, so where do I put the HTML and CSS?

I assume I have to modify the HTML to be my menu options?  If so, then do I use the JOOMLA admin to add the links to the menu options I added in HTML?

[Alfredo Tester]

your going to need to go into the folder "templates".  Looks like your using the folder template called "made your web" so you actually need to go into this folder.  The javascript and html will go into the file called index.php.  For the css you need to click on the folder "Css" and then work with the file called template.css.css.  You will actually add the menu items in the admin backend once you get the extended menu published.  Publish it and unpublish the regular menu.  It inserts the links for you.   

I would highly recommend reading through the template tutorial all the way.  It will give you an idea of what is going on with the templates and might make it easier to modify an existing template. 
http://dev.joomla.org/content/view/1136/79/

I was new to editing templates and built a new one and found this highly helpful.  I think it might give you insight how to modify an existing template and how it is working.

I suggest backing up and just playing around with it. that is what I had to do.  I was new to css and just found that it was trial and error for me.

I have to run so this is just a start.  I will check back later and hopefully I can add some more details if you have some questions.  Or someone with more experience will weigh in on this and be a little more clear and helpful.

[Alfredo Tester]

Is it possible to have two seperate drop down menu systems going.  I'm building a site for someone and they want a horizontal drop down menu which I have created.  they also would like a vertical menu that has the ability to have drop downs(or pop out sideways).  I have searched and haven't seen anyone doing this.  Is it even possible?  I would really love to know.  I'm guessing not from what I have seen but maybe I haven't looked in the right place.

[carsten888]

check this:
http://de.siteof.de/extended-menu-templates.html
you can have different templates. You probably already know this because you already implemented a horizontal drop-down. now do the same thing for the vertical dropdown. In the module-manager put the setting of the submenu-extended-menu of the template file (suckerfish vertical) to use as a template (default menu.html) on another name (example. submenu.html) and rename corresponding file. don't forget to do the same for css, because they probably interfere.

[Alfredo Tester]

Thanks Carsten888.  I was able to get it to work partially.  Found a way to do it and didn't know if it followed what you were trying to describe or not.  Just made a copy of the extended menu.  have different css going for it.

The only problem is that my Latest News module is trying to follow the css of the menu now.  They are both located in the left area.  However my login and syndicate that are located there aren't impacted by the css for the menu. 

trying to figure out how to get the latest news to not be impacted by the menu css.  Figure I need to do something different with my index.php but can't seem to get it.  Any advice would be helpful.

You can see my index.php by looking at the site http://www.oprx.brianfischer74.com

I can get the horizontal menu to pop out but then it messes up the appearance of the latest news. I have messed around so that it now appears properly.  but upon fixing that the vertical menu no longer has drop down functionality.  Everything is automatically dropped down and appearing. 

I'm leaving it as is because it looks closer to what I ultimately want.  now I need to figure out how to get the css for vertical suckerfish to work properly.  maybe someone with more css knowledge can tell me the mistake I'm making.  Probably something stupid. 

[Alfredo Tester]

It comes down to moving my .  In one place the apperance looks great, the drop downs don't work for the vertical.  I move the the drop downs work but the appearance goes to crap.  At a total loss on how to fix this.  Will keep giving it a try.  Obviously i'm missing something simple with the calls to the css or the css. 

Hope someone can help.  I will keep experimenting.

I'm definitely doing something wrong with my css.  After messing around for a long time that is all I can determine. 

[Alfredo Tester]

was reading through this thread and realized that i'm probably posting in the wrong area.  Not trying to post in multiple places.  Just going to go where it seems more appropriate and might get some help.

[carsten888]

Alfredo Tester:
yes, thats a goodidea.

to solve your news-layout question.
check which css is messing up your layout , do this by taking away in turn the css for your vertical and horizontal menu and see if that solves the layout. when you know which css is messing it up you might want to make the css more specific so it only applies to the submenu (if its the submenu that is the prob, lets say it is, which is probably so.) you can do that by giving the module a specific name (class-suffix in the module). then in the css you have to change each class so it becomes specific for only elements within that particular id.

Code: Select all

ul li{

becomes

Code: Select all

div#submenu ul li

etc.

but before you do all that work you might want to check in the module for your news-thing to see if changing the class-suffix for that might solve it instantly.

[Alfredo Tester]

Wanted to thank you so much for attempting to help me with this.  I posted in the template section with my css info for it.

It is strange.  If i post the "latest news" module in anything but the left location it works perfectly.  All the other modlues i'm running in left work fine.  For some reason once i put latest news in there it goes wacky.  I have my menu running on seperate css using the # like you mentioned.  But for some reason it picks up the latest news also.  Even if I put it below other modules.  totally perplexes me.  Look at the source and it shows it running off of moduletable like the rest of my modules over there.  Is definitely due to my menu css.  I take it off and latest news goes back to normal.  I probably have something stupid that I'm missing.

Thank you so much for your suggestions and tips. 

[Alfredo Tester]

went and made a seperate for my news item.  assigned it the suffix in the backend.  Still picks up the css for the menu stuff.  ugh. 

Have decided to start over with the vertical menu.  Ditched it.  Went with some other code for the vertical suckerfish from the extended menu page.  Have it in and the css is impacting the menu like it should and not messing with the latest news.  Drop downs don't work but at least I only have one thing to work on instead of two:) 

Thanks again.

I got it working for the most part. 

Thanks for your help carsten888.  I went through and redid it using the template package from the extended menu page.  It now works for the most part.  Issue of appearance in firefox and I need to work on overall appearance with the css but feeling much better about thi. I found a thread talking about the extended menu that looks promising so I'm going to go through that tomorrow.  Need a break from this.  My head is all fuzzy.  Thanks for taking the time to offer suggestions.  Greatly appreciated..

[tulemon]

I'm trying to get the dropdown to work and it works fine in Firefox, but in IE whenever I mouse over the menu items it switches from Horizontal to vertical; you can see an example here:
http://rightwork.merrigantech.com/index.php
I'm using the css and javascript from compass, but can't for the life of me figure it out. I setup the extended menu as
MenuClass suffix: mainnav
Module class Suffix: mainnav
Menu style: Tree List
Expand Menu: Yes

Any ideas would be greatly appreciated. I'm going crazy trying to figure this out.

[wilded1]

Hi.

I've managed to create a verticle menu successfully on a site im building.
The problem is i am trying to increase the drop menu levels to 5, with no luck so far.
The additional level are there but are already extended.
Take a look http://www.glass.anynet.co.uk
i have been trying for a while to edit the css but without success.
Any pointers would be helpful..

Regards

[Alfredo Tester]

Hey tulemon.  I looked at it in firefox and also in IE.  Both of them drop below the menus.  When I hover over "services" the menu item appears below.  maybe you have done some work. 

I have run into frustration dealing wtih this also.  It works great on my testing site but when I move the template over to my real site the drop downs don't behave the same. 

I know when I first started with it my dropdown in IE was way out of place.  I ended up going with some different css that was posted in the earlier part of this thread.  I had something not working right and that seemed to help.

Also it seems like the z-indexes have quite a bit to do with placement.

Wish I knew more.    Hopefully someone with more experience knows how to deal with this.  Also might want to search the forums under templates.  I found more suckerfish postings there.

[Alfredo Tester]

wilded1 have you looked at http://www.htmldog.com/articles/suckerf ... owns/  I'm guessing you will have to add to your css to add another level.  It shows code up to 4 but maybe you can see how to extend the code to include a fifth level.  Best of luck. 

[Alfredo Tester]

Tulemon.  I came across this thread.  Sounds like your problem but with firefox instead of IE.  Has a solution so maybe it will help you.

http://forum.joomla.org/index.php/topic,74255.0.html

I'm stuck with mine.  in firefox if the title is too long it hides behind the next menu item in the drop downs.  If you guys had issues with this and have a solution I would any thoughts.  Its http://www.ontariopharmacyinc.com

[latristesse]

I've got this all installed and everything is working fine but the drop-down appears slightly above where it should be, which looks quite odd.  If you stick a margin-top or top correction into #mainlevelmainnav li ul, the drop-down is positioned correctly but disappears when the user tries to click on a drop-down item.  Here's what it looks like without the correction:

This has been pretty much driving me insane for hours and I'm doing a project for an NPO, so any help would be greatly appreciated.