MiniDoc: Creating a CSS Drop-down Menu

[bobthebob01]

hello there,

is there a simple way to make this good CSS drop down menu vertical and not horizontal?
or does anybody knows if there is already a CSS menu module that makes a vertical menu with drop down?

cheers

julien

[Waseem Sadiq]

Hey bobthebeb,

You'll find a vertical menu template on the menu module author's website. The one you want is suckerfish vertical

[bobthebob01]

thank you haaris

but i saw this one already but this is not a module, isn't it.

What i am looking for a the same menu but that can be automatically updated when adding/removing a page like other menu module.
have you seen one?

cheers

julien

[Waseem Sadiq]

That's EXACTLY how this works Julien

When you install the module the menu items are still added through the regular menu manager, all you need to do is go to modules> site modules>exmenu and in the paremeters select which menu you want it to use from the dropdown list.

Then, unplublish the mainmenu module (again in modules>site modules) and publish exmenu in its place.

You still add, edit and remove menu items in the menu manager as normal

[bobthebob01]

Haaris

sorry for my stupidity, i on't think i quite follow you on that one.

do you mean that i ahve to install Extended Menu and make a link of the CSS style sheet and javascript of the link you gave me, adn that will make the drop down working?

i tried very fast to see if it works but it did not work, i'll give some more time and try again unless you tell me that i am on the wrong track.

thanks again for your help

ps: i like you philosophy:"If you don't know the answer ask someone who does"

[Waseem Sadiq]

Hey Julien,

Here's a very quick how to on installing and using exmenu

What you'll need to download
Grab a copy of mod_exmenu and a copy of the suckerfish vertical menu template from Daniel's site

Step 1
Install mod_exmenu as you would any other module

Step 3
Unzip the files from the suckerfish template and upload them to your template/your_template folder (just keep the same file structure)

Step 4
In your site admin go to modules>site modules and click on Extended Menu

Step 5
For menu position select where you want the menu to appear (eg left if your current main menu is in position left)
In the menu's parameter's:
For "Menu Name" select the menu you want to use (eg main menu)
For "Source Type" select "Menu"
For "Enable Menu Template" select "Yes"
For "Template Name" enter "menu.css"

Then click save

Step 6
Unpublish your Joomla main menu

Step 7
Publish Extended Menu

Hopefully with any luck that should be you

You'll have to play around with menu.css to get the colour/look you want for your menu items but otherwise it should work no problem

ps: i like you philosophy:"If you don't know the answer ask someone who does"

That's exaclty how I learned my friend

[bobthebob01]

haaris,

i followed your instruction, but it nothing shows up. I read very carefully to make sure i was doing as you said. the module title shows up but no link in my menu. I even tried with a different default template (rhuk_solarflare_ii) to make sure it has nothing to do with my template (for any rerason) and it does the same.
Actully, it makes the main content desapear 

i tried to play around different setting like mixing compass tutorial with your info but nothing.

just to make sure of one thing, when you said to put unzip the suckerfish vertical menu in my template folder, do you mean:

-menu.css in the css folder of my template or just in the tempate folder

also, do i have to change the setting of menu style? and do i have to write something ni the Menu Class Suffix and Module Class Suffix ?

thanks again

[Waseem Sadiq]

Hi Julien,

Yeah you put menu.css in the the css folder of your template.

If using my method above you shouldn't need to fill in any other parameters as the menu.ini file supercedes anything you'd put in there anyway.

I can tell that this is really starting to p**s you off by now lol..... if you want you can PM me a temporary Superadmin username and password and I'll set it up for you

Haaris

[bobthebob01]

Hi haaris,

thank you for the offer, but if you don't mind i want to give first another good try on saturday when i will have more time and not after long days of work.

Not that i don't want help, but i am the kind of person who does not like to loose and get stock in front of  a computer or lines of code 

But if i have to get on my knees and aknowledge my weakness, i hope you'll be able to explain me what went wrong with me.

i swear i am not on any medication !  ....well no yet!

and you were right, it was starting to p**s me off the other night 

julien

[de]

For "Template Name" enter "menu.css"

Just a tiny correction... it should point to the menu.html... and you should still be required to copy the menu.css to the template_css.css or reference to it.
(Even though I never tried to set it to "menu.css" I would be suprised if that works)

[Waseem Sadiq]

daniel's right that was a typo on my post 

Cheers for the correction Daniel

[bobthebob01]

thank you so much daniel and haaris,

haaris you are responsable for me having al white hair, being exhausted and divorced, i have spend so much time to try this and all this because of a typo

just kidding, it's all good as i actually learn about other things while trying. and i still believe that exprience is only the sum of our mistakes.

All i have left to do is to play around with the css to change the color etc..., no problem.

but one thing though, i was able to make it work perfectly on the default template rhuk_solarflare_ii or my template but with a clean install, but when i activate it with my template on the existing site, it does not show up and stop everything after the menu module to load on the page, that is the main content.

any idea why? can another module create a problem or something like that. i am just curius, otherwise i'll just switch everything on that new install, but i always like to know why something is wrong.

once again, thank you very much guys

and haaris, i'll send you my bill of group therapy and lawyer! 

julien

[bobthebob01]

just a thought,

wouldn't be nice to suggest compass to add this to his tutorial, as he is explaining how to make a horizontal we just went through the set up of vertical or is it getting too existed by a simple thing.
i would not be surprised that other people like me and newbies will face the same situation

even though there are many menu system to do this, most of them are not really SEF by puting all the link in a javascript.

what do you think

[Waseem Sadiq]

and haaris, i'll send you my bill of group therapy and lawyer! 
julien

Haaris needs to double check his code before posting bobthebob.... sue the a$$ off him lol

Sorry mate!!

[north]

Ok, I'm so glad I found this thread/tool, cause it is EXACTLY what I am looking for... and I'm so SAD that I have no idea how to get it to work.  I've been reading the thread, experimenting, scratching my head...

I can't even figure out where to set the suffix navmenu or whatever... I'll wash you car if you can help me figure this out.

http://deth.cocoonworks.com is the site.

Cheers,
NORTH

[bobthebob01]

haaris: no worries mate, thanks again !

NORTH: i checked your site and you seems to want to make a vertical menu, right?
now there is no suffix to add in the parameters of the extended menu module. if you follow haaris's  instruction with the spelling correction ,isn't it haaris  , you should not have any trouble:

What you'll need to download
Grab a copy of mod_exmenu and a copy of the suckerfish vertical menu template from Daniel's site

Step 1
Install mod_exmenu as you would any other module

Step 3
Unzip the files from the suckerfish template and upload them to your template/your_template folder (just keep the same file structure)

Step 4
In your site admin go to modules>site modules and click on Extended Menu

Step 5
For menu position select where you want the menu to appear (eg left if your current main menu is in position left)
In the menu's parameter's:
For "Menu Name" select the menu you want to use (eg main menu)
For "Source Type" select "Menu"
For "Enable Menu Template" select "Yes"
For "Template Name" enter "menu.html"

Then click save

Step 6
Unpublish your Joomla main menu

Step 7
Publish Extended Menu

If using my method above you shouldn't need to fill in any other parameters as the menu.ini file supercedes anything you'd put in there anyway

also if you do a vertical drop down menu, you have to forget about the begining of the thread explaining how to make a horizontal drop down menu.
i would suggest to start from scratch and follow the 7 step tutorial from haaris.

i don't know that if this could help you, but when i tried this on my own template it created a little problem that i am trying to figure out. but when i tried it with the rhuk_solarflare_ii template coming with the joomla install, it worked great, and you are just left with customizing the .css file to suite your colors.

hope this will help you.

cheers

bob

[north]

Hey!  Thanks!

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

Maybe your steps will get me somewhere though... I'll see if there is a horizontal templace on suckerfish, right?

Cheers,
NORTH

[chikurt]

Greetings-

I'm following these instructions on a clean Joomla! install with the default rhuk_solarflare_ii template.  Per Daniel, I would add this to what haaris outlined:

STEP 8
Add the following two lines between the tags of the index.php file in your template's directory.

/templates/your_template/css/menu.css">
/templates/your_template/js/menu.js" type="text/javascript">

I have done this and everything seems functional for both Firefox and IE, BUT, my vertical menu is stuck at about 115 pixels wide.

Any ideas?

[mochw]

Damnit, im trying to do the simplest thing.

I´m using the extended menu with Select list. And ive named the Menu Class Suffix, menu.
My Css file got the

#menu {
font-family     :  Verdana;
font-size        : 10px;
color             : #000000;
}

But no alteration?! Whats wrong?

[floatingworld]

I'm sorry I can't help anyone here, I've got my own question:

I've been trying to edit Daniels menu.css (comes as part of Suckerfish zip from his site)

He has styles such as:

"a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited {
background-color: green;"

I've never seen words such as "green" to designate colors before. I've tried to change it to a Hex color number but this just causes the menu to display no color at all...

Does anyone know What I'm doing wrong?

Thanks in advance

[floatingworld]

Whoops! It was cause I forgot to put a "#" before the hex color number! 

[jeremy217]

This may seem like a stupid question, but how do you make a z-index?

Isn't this dynamic menu instead of a static menu?

I have the menu working except for the sub menus.
I need help making the sub nav...

[gladstone]

Thanks to Barrie for this code (and all his other helpful stuff).

I've followed all the instructions and have got a horizontal drop-down menu working fine, except for one thing.

The top level iterms are all clickable and send you back to home. I want them to do nothing. I just want the drop down items to be clickable, not the ones you see before you hover.

I've tried setting them to 'seperator/place-holder' and that does stop them being clickable. But I just can't figure out how to style them. The 'placeholder' items are a few pixels too high AND the wrong colour.

Can anyone tell me what to put in the 'menu.css' (or elsewhere) which would sort this out?

Francis Gladstone

[gladstone]

I eventually figured it out.  Actually the solution is quite simple . . . 
(but why I didn't look at the 'source' of my rendered pages sooner? )

With "menu style" = treelist, Extended Menu outputs non-linked items in exactly the same
unorderd list format as linked ones. But because you canl't use the 'a' attribute, it puts a "span"
around the unlinked name. So you can use this to select the unlinked items.

A brief HOW-TO for anyone else struggling with this issue

In Menu Manager - New Item    Create 'top' menu items as

"Miscellaneous"  Separator / Placeholder

In the menu.css you find the third declaration which reads

#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}

You copy this, replace "a" with "span" and paste it immediately afterwards,  so that declaration
four becomes

#mainlevelmainnav span{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}

And away you go.  But thanks again to Barrie North for a truly  elegant solution.

[jeremy217]

I don't see how this answers my question?

[gladstone]

Jeremy, I'm sorry, I wasn't trying to answer your question - I was asking one of my one - then figured it out and answered it myself. I guess often the effort of formulating your question points you towards a fresh angle.

A z-index is a property used for box elements in cascading style sheets.
It is crucial when boxes overlap (because of absolute positioning).
By default every time an overlapping box is declared it gets put IN FRONT of the previous ones.
So if this is not what you want you use a z-index.
High z-indexed boxes appear in front of low (and you can have negative indexes)
Syntax is z-index:# where # is any interger

For more details try

http://www.brainjar.com/css/positioning/
http://www.yourhtmlsource.com/
and the bible: http://www.w3.org/TR/REC-CSS2/visuren.html#q1

This all happens in the menu.css file

Hope that helps!

FG

[jeremy217]

Ok, that's what I thought they were.

Now do I make the menus in menu.css or in joomla?

Is there a more complete tutorial for actually creating the drop down menus, not just installing and setting up the drop down menu scripts?
If you could list the steps that would be great.


And yes I did read the 7 steps he posted above, but he did not have a step for creating the drop down menus in joomla or menu.css..

[gladstone]

Is there a more complete tutorial for actually creating the drop down menus, not just installing and setting up the drop down menu scripts?    No

Now do I make the menus in menu.css or in joomla? And yes I did read the 7 steps he posted above, but he did not have a step for creating the drop down menus in joomla or menu.css.. 

If you could list the steps that would be great. 

Here goes: 

First you must install the extended menu module - see Joomla extensions page: http://extensions.joomla.org/component/ ... Itemid,35/

Second configure it as Barrie North suggests. In the backend (Joomla Admin) select MODULES/SITE MODULES and click on EXTENDED MENU.  Change parameters as he suggests

Third. PUT YOUR MENU where you want it.  THIS MEANS in whatever template you are using you need to edit your template index.php to load modules where you want them to appear.  PLUS in STEP 2 you need to specify THIS "position" as where EXTENDED MENU loads

Fourth. You need to create the menu.css file (you could use any simple text editor like Windows Notepad) and save it in your template css directory.  You also need to change template_css.css to import menu.ss.  Just add the line

@import url("menu.css");

Fifth.  You need to edit the template index.php file to include the javascript as the minidoc says.

Sixth. You have to fiddle around with other css declarations to get it looking how you want.

Seventh . . .  No that's it really.  The hard bits to understand are (1) its all in the template  (2) what a "position" is  - or at least that's what I found hard to understand.

Hope this helps 

FG

[adec]

damm have a css problem with suckerfish, driving me mad ... its when you try to use separators as a top level menu item... i saw this in the menu.css ..

/** separator */
span.mainlevel-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
border-width: 0px;
padding: 5px;
}

and altered it so border-width = 1px, and changed the padding, so now it works on my menu :

http://www.vincenttreacey.com

but if you go to say Reviews in the Gigs / Reviews section ... now the Gigs / Reviews separator has lost all styling ...

i did try adding every variant into that section :

span.mainlevel-suckerfish-horizontal, span.mainlevel_current-suckerfish-horizontal, span.mainlevel_active-suckerfish-horizontal, span.mainlevel_current-suckerfish-horizontal:link, span.mainlevel_current-suckerfish-horizontal:visited, span.mainlevel-suckerfish-horizontal:link, span.mainlevel-suckerfish-horizontal:visited, span.mainlevel_active-suckerfish-horizontal:link, span.mainlevel_active-suckerfish-horizontal:visited

and then the same for sublevel, but thats not the solution

can someone point me in the right direction... thanks

solved it ... just trial and error with the css file...

adec

[adec]

i've got the extended menu / suckerfish all working ok here http://www.vincenttreacey.com  but the page is showing a javascript error :

'document.getElementById(...)' is null or not an object

anyone have any hints how to solve this ? ..or should I just ignore it and not be concerned as it is actually working ?

thanks

adec