MiniDoc: Creating a CSS Drop-down Menu

Discuss the FAQ's here, and get in touch with the FAQ Team.
User avatar
Casey Lee
Joomla! Explorer
Joomla! Explorer
Posts: 312
Joined: Sat Sep 03, 2005 10:22 pm
Location: AL
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby Casey Lee » Wed Nov 30, 2005 10:46 pm

Discussion thread for the FAQ: MiniDoc located at [b]http://forum.joomla.org/index.php/topic,22023.0.html[/b]



BRILLIANT!!!

Thanks so much...cntrl+D this one for sure.
Last edited by technopuzzle on Wed Jan 24, 2007 3:00 am, edited 1 time in total.

User avatar
boesh
Joomla! Explorer
Joomla! Explorer
Posts: 388
Joined: Tue Aug 23, 2005 9:14 pm
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby boesh » Wed Nov 30, 2005 10:53 pm

Thanks a lot !!
Met vriendelijke groet,
- Harry -

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Wed Nov 30, 2005 10:59 pm

Excellent Les!!

Thank you so much for explaining this in detail.

This thread's a keeper ;)
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Wed Nov 30, 2005 11:50 pm

For the life of me I just can't get this to work :(
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby compass » Thu Dec 01, 2005 12:57 am

:-\
Its not the easiest of CSS. Got a link and maybe I can help...
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Thu Dec 01, 2005 1:00 am

I've been doing it locally on my WAMP install,

It just won't work :(
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby compass » Thu Dec 01, 2005 1:08 am

ahh, I made a typo. The suffixes should be mainnav not mainmenu. Was that it?
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Thu Dec 01, 2005 2:58 am

Dunno Compass I'll try it

Can you also just explain where #twocols and #leftcol go in the index.php file?
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Thu Dec 01, 2005 3:21 am

wahay!! I got it working :)

I forgot to add the menu suffix in the module admin  :-[
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

mosey
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 153
Joined: Fri Aug 26, 2005 6:14 pm
Location: United Kingdom
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby mosey » Thu Dec 01, 2005 3:32 am

I feel so lucky to have stumbled upon this via the Turnstiles thread in Site Showcase. Thank you very much compass! I did read your SEF/SEO article with interest - and was feeling quite put-down yesterday as it seemed the available menu options (apart from Extended Menu) appeared to go towards a direction *away* from your article. This really does turn things around! :D

Is it possible for the admin to pin this topic at all please?
Joomla site in development...
Meanwhile Zetahelp.net continues...

(Unavailable end of Sept/start of Oct)

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Thu Dec 01, 2005 3:56 am

I just made this a transparent drop down menu :)
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

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

MiniDoc: Creating a CSS Drop-down Menu

Postby de » Thu Dec 01, 2005 6:40 am

Just came along this and recognized that with version 0.3.2 I also made patTemplates available where one is the suckerfish in either horizontal or vertical. The patTemplate file does not really differ from what "Tree List" would otherwise render... but there is also a CSS and the JavaScript provided... the menu.ini also automagically overwrites the extend and class-suffix parameter so that when it is integrated in a template there should not be much to do beside just installing the module... maybe that makes things easier?
Mine is based on http://www.alistapart.com/articles/dropdowns/ (made it support 3 levels by myself... recognized the followup article too late)... the CSS got a bit longer because I realized some weirdness with my IE (at least in Wine)... See them live there: http://de.siteof.de/extended-menu-templates.html
maybe that helps and let me know if there are any issues (I don't have all browsers available).

User avatar
guilliam
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4180
Joined: Thu Aug 18, 2005 10:27 am
Location: Sunny City Cebu, Philippines!
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby guilliam » Thu Dec 01, 2005 8:11 am

will check thru later.. added in the "to do list".

thanks for putting this up.

- g
"I was one of those who wondered why people would pay so much $$$$ to do something that was so much fun!" -R. Harkrider, Fortran Code Engr.

http://www.joomlaconsultancy.net

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby kenmcd » Fri Dec 02, 2005 12:23 am

Compass,

I pinned this and have changed the title to reflect that this is a MiniDoc.

I ran the CSS code through the TopStyle StyleSweeper to make it easier to read.
Would you like to replace the code in the first post with this?  (or some variant)

Code: Select all

 
 
#twocols{
   z-index: 20; /*the columns that gets dropped down over yours might be different*/
}

#leftcol{
   z-index: 10; /*the columns that gets dropped down over yours might be different*/
}

.moduletablemainnav{
   position: absolute; /* I have absolutely positioned the module, you might have a different scheme*/
   top: 187px;
   left: 20px;
   z-index: 100;
   font: 0.9em Verdana, Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
}

#mainlevelmainnav,#mainlevelmainnav ul{
   float: left;
   list-style: none;
   line-height: 1em;
   background: transparent;
   font-weight: 700;
   margin: 0;
   padding: 0;
}

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

#mainlevelmainnav li{
   float: left;
   padding: 0;
}

#mainlevelmainnav li ul{
   position: absolute;
   left: -999em;
   height: auto;
   width: 11em;
   font-weight: 400;
   background: #3366FF;
   border: #0000CC 1px solid;
   margin: 0;
}

#mainlevelmainnav li li{
   width: 11em;
}

#mainlevelmainnav li ul a{
   width: 11em;
   color: #FFFFFF;
   font-size: 0.9em;
   line-height: 1em;
   font-weight: 400;
}

#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
   left: -999em;
}

#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
   left: auto;
   z-index: 6000;
}

#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
   background: url(../images/soccerball.gif) #003399 98% 50% no-repeat;
}



Good info.
:)
Last edited by kenmcd on Fri Dec 02, 2005 1:04 am, edited 1 time in total.
██ LibreTraining

knassygroll
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Mon Nov 28, 2005 12:05 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby knassygroll » Sun Dec 18, 2005 12:28 pm

Hi, Firstly this tutorial looks cool, exactly what I need. I'm looking to use dropdowns on my site however don't want to use transmenu or tiagra.

I've installed the extend-menu module no problems. And changed those couple of settings.

This is where I kind of get lost... When you say 'So put the menu where you want it' do you mean in terms of a location on a template? Or is this referring to a file somewhere?

I've put the css in template_css and the js in the header of the index.php. The menu appears fine but I'm unsure of how to add the sub levels.

My questions are pretty noobish I know but I've read through the posted links and I can work it out. I'd appreciate If someone could break it down for me.

If someone can help me get it working then I'll do a complete idiots guide thats broken down in to painfully small steps that some people like I need.

Cheers.

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby compass » Sun Dec 18, 2005 1:30 pm

Do you have a link?

I don't think the CSS on this currently extends to submenus. Its doable though. Go check out the original suckerfish link I posted and I thinks its there.
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

knassygroll
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Mon Nov 28, 2005 12:05 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby knassygroll » Mon Dec 19, 2005 3:56 am

Sorry I dont have a link I'm developing the site locally.

I guess what I really dont understand what to do is how to add items to the dropdown menu. The menu (mainmenu in my case appears as css and now id like to add some dropdown items but havent a clue what to do.

That is unless I'm thinking about this in the wrong terms :S

User avatar
compass
Joomla! Ace
Joomla! Ace
Posts: 1347
Joined: Fri Aug 26, 2005 1:31 am
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby compass » Mon Dec 19, 2005 4:33 am

Have you dont this bit?

Now, you might have noticed that you need your menu outputted as a good clean list. Well it just so happens that there is a module out there to do this, and we’ll need it. Its called extended_menu, you can find it here:
de.siteof.de/detree/extended-menu.html

So, grab the module and install. Now let’s set it up. It’s easiest if you give it a menu and module class suffix. I used “mainnav” (you’ll see in the CSS below). A couple of other settings you will need:
Menu style: Tree List
Expand Menu: Yes
Follow me on Twitter @compassdesign
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support

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

MiniDoc: Creating a CSS Drop-down Menu

Postby de » Mon Dec 19, 2005 8:08 am

knassygroll wrote:I guess what I really dont understand what to do is how to add items to the dropdown menu. The menu (mainmenu in my case appears as css and now id like to add some dropdown items but havent a clue what to do.

Just create sub menu items like you would in any other case... not anything special for drop-downs (this is just a matter of appearance)... you can use the parent of each menu item for this (but you will find a few threads with people asking the question "how to create sub menu items" (or sub menues) as well).

User avatar
TheSaint
Joomla! Ace
Joomla! Ace
Posts: 1256
Joined: Sat Aug 20, 2005 4:15 am
Location: California, USA
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby TheSaint » Mon Dec 19, 2005 8:55 pm

Two other handy menu options are:

http://www.swonline.biz/
http://www.menu4mambo.com/

Both offer free and paid options. :)
[size=70] Paul
http://www.gamehostingreviews.com - In development
The only thing necessary for the triumph of evil is for good men to do nothing. - Edmund Burke

User avatar
Casey Lee
Joomla! Explorer
Joomla! Explorer
Posts: 312
Joined: Sat Sep 03, 2005 10:22 pm
Location: AL
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby Casey Lee » Tue Dec 20, 2005 4:52 am

I've always liked using SWmenu as well. It offers some really robust options for menus BUT I have never been able to get them to validate.

knassygroll
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Mon Nov 28, 2005 12:05 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby knassygroll » Tue Dec 20, 2005 12:26 pm

Hey thanks for those other couple of options. Gave Lxmenu a try and it seems to work no problems at all.

I stilll havent given up on the suckerfish though. One problem I had is I didnt know where to add the submenu items. Is it correct to think I just do this through joomlas menu manager? ie just hook up a new menu item to a parent item? If this is the case I hope ill be able to get it working. Time will tell though... :D

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

MiniDoc: Creating a CSS Drop-down Menu

Postby Waseem Sadiq » Tue Dec 20, 2005 12:31 pm

knassygroll wrote:Hey thanks for those other couple of options. Gave Lxmenu a try and it seems to work no problems at all.

I stilll havent given up on the suckerfish though. One problem I had is I didnt know where to add the submenu items. Is it correct to think I just do this through joomlas menu manager? ie just hook up a new menu item to a parent item? If this is the case I hope ill be able to get it working. Time will tell though... :D


Hey knassygroll,

that's EXACTLY how the submenu items work - just set them iup in your joomla menu manager
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy

knassygroll
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Mon Nov 28, 2005 12:05 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby knassygroll » Tue Dec 20, 2005 1:32 pm

Ahhh, such an obvious thing but for the life of me it took a good hr or two of chin stroking to make that connection. Menu works now, having a few probs with positioning but I'll hopefully ice them myself.

Thanks to all again!

knassygroll
Joomla! Apprentice
Joomla! Apprentice
Posts: 21
Joined: Mon Nov 28, 2005 12:05 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby knassygroll » Tue Dec 20, 2005 6:11 pm

Anyone have any ideas where the dots next to the first letters of each menu item are coming from? They have nothing to do with list-style in the css (I dont think) but I cant work out their origin. As you can aslo see they disappear under the hover color but also appear on the submenu items.
You do not have the required permissions to view the files attached to this post.

MrMoney
Joomla! Apprentice
Joomla! Apprentice
Posts: 39
Joined: Mon Nov 21, 2005 9:33 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby MrMoney » Fri Dec 23, 2005 2:02 pm

Hi,
I was wondering if someone could lend me a hand in this.
I have implemented Suckerfish dropdowns before without trouble, but not in Joomla. I am having a problem where the drop-down list is hidden behind the containing element. I have tried z-indexes all over the place, but cannot seem to solve the problem.
Here is my basic layout:

html > body > div#bodyBox > div#body > div#topBox > div#top > div.moduletablemainnav > ul#mainlevelmainnav

I cant seem to get it to hover over the #top or #topBox, and instead is stuck contained therein. Through my attempts I have been able to get it so that that box stretches to provide extra room for the drop down, or there is always a scroll bar attached.

Any ideas?

Thanks
MikeM

tonyl09
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Mon Aug 29, 2005 4:17 pm
Location: Jamestown, RI USA
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby tonyl09 » Fri Dec 23, 2005 8:36 pm

I am running into a similar problem as MrMoney described. You can see what is happening at: http://tiny url.com/bn8kj

The dropdowns are falling below the content area below. Could that be an issue of code order?

Thanks -- Tony
Tony Lush
Advance Web Marketing
AdvanceWebMarketing.com

mgroot
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sun Dec 25, 2005 9:37 pm

MiniDoc: Creating a CSS Drop-down Menu

Postby mgroot » Sun Dec 25, 2005 9:47 pm

I'd say it's more likely an issue of the z-index. Have you tried changing them in the CSS?



I myself got the menu working fine, now I am trying to figure out how to style the menus once they've dropped down  ???

tonyl09
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Mon Aug 29, 2005 4:17 pm
Location: Jamestown, RI USA
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby tonyl09 » Mon Dec 26, 2005 3:38 pm

I think that the z-index is OK,

I set the containing DIV to be z-index 1000. The styles are:

Code: Select all

/* containing div  */
#buttons {
   margin: 0;
   padding: 0;
   width: 100%;
   text-align:left; /* added to get IE to go left??  */
   z-index:1000;
}

/* Styling for menu  */
#mainlevel-sh,#mainlevel-sh ul{
   float: left;
   list-style: none;
   line-height: 1em;
   background: #446883;
   font-weight: normal;
   margin: 0;
   padding: 0;
}

#mainlevel-sh a{
   display: block;
   color: #fff;
   text-decoration: none;
   font-weight: normal;
   padding: 0.3em 15px 0.3em 15px;
}

#mainlevel-sh li{
   float: left;
   border-right: 1px solid #afafaf;
   padding-left: 0;
}

#mainlevel-sh li ul{
   position: absolute;
   left: -999em;
   height: auto;
   width: 140px;
   font-weight: normal;
   background-color: #e6efe7;
   border: 0px solid #afafaf; 
   margin: 0;
   padding-left: 0;
}

#mainlevel-sh li li{
   width: 140px;
   border: 0;
   background-color: #e6efe7;
}

#mainlevel-sh li ul a{
   width: 140px;
   color: #446883;
   background-color: #e6efe7;
   font-size: 1em;
   line-height: 1.5em;
   font-weight: normal;
   border: 1px solid #afafaf;
}

#mainlevel-sh li:hover ul ul,#mainlevel-sh li:hover ul ul ul,#mainlevel-sh li.sfhover ul ul,#mainlevel-sh li.sfhover ul ul ul{
   left: -999em;
}

#mainlevel-sh li:hover ul,#mainlevel-sh li li:hover ul,#mainlevel-sh li li li:hover ul,#mainlevel-sh li.sfhover ul,#mainlevel-sh li li.sfhover ul,#mainlevel-sh li li li.sfhover ul{
   left: auto;
   z-index: 6000;
   background-color: #829aac;
}

#mainlevel-sh li li:hover,#mainlevel-sh li li.sfhover{
   background-color: #d1ddd3;
}


The container below I made z-index 1, with its two columns z-index 2 and 3.

I did find that Opera works OK, but still not IE or FireFox???

Thanks -- Tony
Tony Lush
Advance Web Marketing
AdvanceWebMarketing.com

User avatar
htsolutions
Joomla! Intern
Joomla! Intern
Posts: 50
Joined: Tue Dec 27, 2005 3:31 pm
Location: Michigan
Contact:

MiniDoc: Creating a CSS Drop-down Menu

Postby htsolutions » Tue Dec 27, 2005 3:40 pm

OK I have implemented the suckerfish menus on our site.  This is an excellent menu system for us.  However, under FF everything is running just as it should.  In IE I can't even get the submenu to drop down. 

Site:  http://www.homtechsol.com
Problem:  Menu "Home Division" & "Technical Division" have sub menus that don't drop down under IE.

If anyone has an idea I appreciate it.





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

Thanks
ht-solutions
Last edited by htsolutions on Wed Dec 28, 2005 4:50 pm, edited 1 time in total.


Return to “FAQ Discussion Board”

Who is online

Users browsing this forum: No registered users and 0 guests