MiniDoc: Creating a CSS Drop-down Menu

Discuss the FAQ's here, and get in touch with the FAQ Team.
Post Reply
User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Mon Apr 10, 2006 1:14 am

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

User avatar
Waseem Sadiq
Joomla! Ace
Joomla! Ace
Posts: 1441
Joined: Mon Sep 12, 2005 7:41 pm
Location: Glasgow - Scotland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Waseem Sadiq » Mon Apr 10, 2006 9:36 pm

Hey bobthebeb,

You'll find a vertical menu template on the menu module author's website. The one you want is suckerfish vertical :)
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Tue Apr 11, 2006 1:21 am

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

User avatar
Waseem Sadiq
Joomla! Ace
Joomla! Ace
Posts: 1441
Joined: Mon Sep 12, 2005 7:41 pm
Location: Glasgow - Scotland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Waseem Sadiq » Tue Apr 11, 2006 2:10 am

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 :)
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Tue Apr 11, 2006 1:03 pm

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"

User avatar
Waseem Sadiq
Joomla! Ace
Joomla! Ace
Posts: 1441
Joined: Mon Sep 12, 2005 7:41 pm
Location: Glasgow - Scotland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Waseem Sadiq » Tue Apr 11, 2006 11:54 pm

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 :)
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Wed Apr 12, 2006 1:28 am

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

User avatar
Waseem Sadiq
Joomla! Ace
Joomla! Ace
Posts: 1441
Joined: Mon Sep 12, 2005 7:41 pm
Location: Glasgow - Scotland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Waseem Sadiq » Thu Apr 13, 2006 1:30 am

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
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Fri Apr 14, 2006 1:50 am

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 !  ;D ....well no yet!

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

julien

de
Joomla! Ace
Joomla! Ace
Posts: 1477
Joined: Thu Aug 18, 2005 9:06 am
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by de » Thu Apr 20, 2006 10:09 pm

haaris wrote: 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)

User avatar
Waseem Sadiq
Joomla! Ace
Joomla! Ace
Posts: 1441
Joined: Mon Sep 12, 2005 7:41 pm
Location: Glasgow - Scotland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Waseem Sadiq » Thu Apr 20, 2006 11:48 pm

daniel's right that was a typo on my post  :-[ :-[

Cheers for the correction Daniel :)
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Fri Apr 21, 2006 1:01 am

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 >:( ;D ;D ;)

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!  ;D ;D ;D ;D ;)

julien

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Fri Apr 21, 2006 1:09 am

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

User avatar
Waseem Sadiq
Joomla! Ace
Joomla! Ace
Posts: 1441
Joined: Mon Sep 12, 2005 7:41 pm
Location: Glasgow - Scotland
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by Waseem Sadiq » Fri Apr 21, 2006 2:25 am

bobthebob01 wrote: and haaris, i'll send you my bill of group therapy and lawyer!  ;D ;D ;D ;D ;)
julien
Haaris needs to double check his code before posting bobthebob.... sue the a$$ off him lol ;)

Sorry mate!!
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

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

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by north » Fri Apr 21, 2006 4:30 am

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

User avatar
bobthebob01
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 195
Joined: Fri Oct 07, 2005 1:02 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by bobthebob01 » Sat Apr 22, 2006 5:31 am

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

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by north » Sat Apr 22, 2006 3:30 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Mar 18, 2006 2:51 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by chikurt » Mon Apr 24, 2006 10:14 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Thu Apr 06, 2006 3:25 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by mochw » Tue Apr 25, 2006 1:14 pm

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?
Last edited by mochw on Tue Apr 25, 2006 4:05 pm, edited 1 time in total.

User avatar
floatingworld
Joomla! Guru
Joomla! Guru
Posts: 595
Joined: Tue Mar 07, 2006 3:42 pm
Location: Salt Spring Island, BC, Canada
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by floatingworld » Mon May 08, 2006 6:22 pm

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
http://www.mygreenhosting.com Greenhouse Gas/ Carbon Free Joomla Web Hosting!
http://www.floatingworld.ca ; - Joomla project management and support

User avatar
floatingworld
Joomla! Guru
Joomla! Guru
Posts: 595
Joined: Tue Mar 07, 2006 3:42 pm
Location: Salt Spring Island, BC, Canada
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by floatingworld » Mon May 08, 2006 6:37 pm

Whoops! It was cause I forgot to put a "#" before the hex color number!  :-[
http://www.mygreenhosting.com Greenhouse Gas/ Carbon Free Joomla Web Hosting!
http://www.floatingworld.ca ; - Joomla project management and support

User avatar
jeremy217
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Mon Apr 24, 2006 10:49 pm
Location: Tulsa, Oklahoma
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by jeremy217 » Wed May 31, 2006 7:05 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun May 14, 2006 9:26 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by gladstone » Wed May 31, 2006 9:20 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun May 14, 2006 9:26 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by gladstone » Wed May 31, 2006 10:56 pm

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.  :D :D :D But thanks again to Barrie North for a truly  elegant solution.

User avatar
jeremy217
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Mon Apr 24, 2006 10:49 pm
Location: Tulsa, Oklahoma
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by jeremy217 » Thu Jun 01, 2006 2:04 am

I don't see how this answers my question?

gladstone
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun May 14, 2006 9:26 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by gladstone » Fri Jun 02, 2006 8:45 pm

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

User avatar
jeremy217
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Mon Apr 24, 2006 10:49 pm
Location: Tulsa, Oklahoma
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by jeremy217 » Fri Jun 02, 2006 9:18 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun May 14, 2006 9:26 am

Re: MiniDoc: Creating a CSS Drop-down Menu

Post by gladstone » Sat Jun 03, 2006 12:15 am

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

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

Post by adec » Sun Jun 04, 2006 9:16 am

damm have a css problem with suckerfish, driving me mad :D ... 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
Last edited by adec on Sun Jun 04, 2006 10:52 am, edited 1 time in total.

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

Post by adec » Mon Jun 05, 2006 6:03 pm

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


Post Reply

Return to “FAQ Discussion Board”