MiniDoc: Creating a CSS Drop-down Menu

Discuss the FAQ's here, and get in touch with the FAQ Team.
sherm
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Wed Jun 07, 2006 1:29 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby sherm » Wed Jun 07, 2006 1:37 am

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

User avatar
adec
Joomla! Explorer
Joomla! Explorer
Posts: 365
Joined: Sat Sep 03, 2005 8:56 pm
Location: UK
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby adec » Wed Jun 07, 2006 11:37 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Wed Jun 07, 2006 1:29 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby sherm » Wed Jun 07, 2006 4:14 pm

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

ddmobley
Joomla! Intern
Joomla! Intern
Posts: 90
Joined: Thu Jun 15, 2006 2:18 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby ddmobley » Thu Jun 15, 2006 4:30 am

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
Joomla! Intern
Joomla! Intern
Posts: 90
Joined: Thu Jun 15, 2006 2:18 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby ddmobley » Sat Jun 17, 2006 10:57 pm

de wrote: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
Joomla! Intern
Joomla! Intern
Posts: 90
Joined: Thu Jun 15, 2006 2:18 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby ddmobley » Sat Jun 17, 2006 11:51 pm

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

User avatar
carsten888
Joomla! Ace
Joomla! Ace
Posts: 1198
Joined: Sat Feb 11, 2006 8:32 am
Location: Tilburg, Holland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby carsten888 » Fri Jun 23, 2006 12:11 pm

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.
http://www.pages-and-items.com
Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, Access-Manager, Redirect-on-Login, Pages-and-Items, module Admin-Messages, module Logged-in-Users, plugin load module in article, plugin pure css tooltip and more...

moun
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Jul 02, 2006 3:13 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Postby moun » Sun Jul 02, 2006 3:51 pm

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:


  • Home


    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.
  • Last edited by moun on Sun Jul 02, 2006 3:54 pm, edited 1 time in total.

    User avatar
    carsten888
    Joomla! Ace
    Joomla! Ace
    Posts: 1198
    Joined: Sat Feb 11, 2006 8:32 am
    Location: Tilburg, Holland
    Contact:

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby carsten888 » Sun Jul 02, 2006 5:46 pm

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

    (and you might also want to start a new tread)
    http://www.pages-and-items.com
    Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, Access-Manager, Redirect-on-Login, Pages-and-Items, module Admin-Messages, module Logged-in-Users, plugin load module in article, plugin pure css tooltip and more...

    Alfredo Tester
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Mon Jul 03, 2006 1:59 am

    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
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Mon Jul 03, 2006 8:25 pm

    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.  :o

    Alfredo Tester
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Mon Jul 03, 2006 11:32 pm

    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!  ;D  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.
    Last edited by Alfredo Tester on Tue Jul 04, 2006 12:04 am, edited 1 time in total.

    north
    Joomla! Apprentice
    Joomla! Apprentice
    Posts: 32
    Joined: Sun Mar 19, 2006 8:41 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby north » Thu Jul 06, 2006 4:16 am

    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
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Thu Jul 06, 2006 4:31 am

    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
    Joomla! Apprentice
    Joomla! Apprentice
    Posts: 32
    Joined: Sun Mar 19, 2006 8:41 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby north » Thu Jul 06, 2006 4:51 am

    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
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Thu Jul 06, 2006 1:56 pm

    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
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Sun Jul 09, 2006 12:45 am

    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.

    User avatar
    carsten888
    Joomla! Ace
    Joomla! Ace
    Posts: 1198
    Joined: Sat Feb 11, 2006 8:32 am
    Location: Tilburg, Holland
    Contact:

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby carsten888 » Sun Jul 09, 2006 7:03 am

    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.
    http://www.pages-and-items.com
    Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, Access-Manager, Redirect-on-Login, Pages-and-Items, module Admin-Messages, module Logged-in-Users, plugin load module in article, plugin pure css tooltip and more...

    Alfredo Tester
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Thu Jul 13, 2006 11:57 pm

    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. 
    Last edited by Alfredo Tester on Fri Jul 14, 2006 2:20 am, edited 1 time in total.

    Alfredo Tester
    Joomla! Enthusiast
    Joomla! Enthusiast
    Posts: 103
    Joined: Thu Jun 29, 2006 7:31 pm

    Re: MiniDoc: Creating a CSS Drop-down Menu

    Postby Alfredo Tester » Fri Jul 14, 2006 2:43 am

    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. 
    Last edited by Alfredo Tester on Fri Jul 14, 2006 5:46 am, edited 1 time in total.