MiniDoc: Creating a CSS Drop-down Menu
- Casey Lee
- Joomla! Explorer
- Posts: 312
- Joined: Sat Sep 03, 2005 10:22 pm
- Location: AL
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Discussion thread for the FAQ: MiniDoc located at http://forum.joomla.org/index.php/topic,22023.0.html
BRILLIANT!!!
Thanks so much...cntrl+D this one for sure.
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.
- boesh
- Joomla! Explorer
- Posts: 388
- Joined: Tue Aug 23, 2005 9:14 pm
- Contact:
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Excellent Les!!
Thank you so much for explaining this in detail.
This thread's a keeper
Thank you so much for explaining this in detail.
This thread's a keeper
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
For the life of me I just can't get this to work
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
I've been doing it locally on my WAMP install,
It just won't work
It just won't work
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Dunno Compass I'll try it
Can you also just explain where #twocols and #leftcol go in the index.php file?
Can you also just explain where #twocols and #leftcol go in the index.php file?
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
wahay!! I got it working
I forgot to add the menu suffix in the module admin
I forgot to add the menu suffix in the module admin
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
-
- Joomla! Enthusiast
- Posts: 153
- Joined: Fri Aug 26, 2005 6:14 pm
- Location: United Kingdom
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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!
Is it possible for the admin to pin this topic at all please?
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)
Meanwhile Zetahelp.net continues...
(Unavailable end of Sept/start of Oct)
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
I just made this a transparent drop down menu
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
-
- Joomla! Ace
- Posts: 1477
- Joined: Thu Aug 18, 2005 9:06 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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).
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).
- guilliam
- Joomla! Virtuoso
- Posts: 4181
- Joined: Thu Aug 18, 2005 10:27 am
- Location: Sunny City Cebu, Philippines!
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
will check thru later.. added in the "to do list".
thanks for putting this up.
- g
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
http://www.joomlaconsultancy.net
- kenmcd
- Joomla! Champion
- Posts: 5672
- Joined: Thu Aug 18, 2005 2:09 am
- Location: California
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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)
Good info.
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
-
- Joomla! Apprentice
- Posts: 21
- Joined: Mon Nov 28, 2005 12:05 pm
MiniDoc: Creating a CSS Drop-down Menu
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.
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.
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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.
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Apprentice
- Posts: 21
- Joined: Mon Nov 28, 2005 12:05 pm
MiniDoc: Creating a CSS Drop-down Menu
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
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
- compass
- Joomla! Ace
- Posts: 1347
- Joined: Fri Aug 26, 2005 1:31 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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
www.compassdesigns.net - Get get free templates and news for Joomla
simplweb.com/joomla-hosting - Fully Managed Joomla Hosting - Unlimited Support
-
- Joomla! Ace
- Posts: 1477
- Joined: Thu Aug 18, 2005 9:06 am
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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).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.
- TheSaint
- Joomla! Ace
- Posts: 1256
- Joined: Sat Aug 20, 2005 4:15 am
- Location: California, USA
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Two other handy menu options are:
http://www.swonline.biz/
http://www.menu4mambo.com/
Both offer free and paid options.
http://www.swonline.biz/
http://www.menu4mambo.com/
Both offer free and paid options.
█ 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
█ http://www.gamehostingreviews.com - In development
█ The only thing necessary for the triumph of evil is for good men to do nothing. - Edmund Burke
- Casey Lee
- Joomla! Explorer
- Posts: 312
- Joined: Sat Sep 03, 2005 10:22 pm
- Location: AL
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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.
-
- Joomla! Apprentice
- Posts: 21
- Joined: Mon Nov 28, 2005 12:05 pm
MiniDoc: Creating a CSS Drop-down Menu
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...
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...
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
Hey knassygroll,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...
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
-
- Joomla! Apprentice
- Posts: 21
- Joined: Mon Nov 28, 2005 12:05 pm
MiniDoc: Creating a CSS Drop-down Menu
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!
Thanks to all again!
-
- Joomla! Apprentice
- Posts: 21
- Joined: Mon Nov 28, 2005 12:05 pm
MiniDoc: Creating a CSS Drop-down Menu
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.
-
- Joomla! Apprentice
- Posts: 39
- Joined: Mon Nov 21, 2005 9:33 pm
MiniDoc: Creating a CSS Drop-down Menu
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
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
-
- Joomla! Apprentice
- Posts: 28
- Joined: Mon Aug 29, 2005 4:17 pm
- Location: Jamestown, RI USA
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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
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
Advance Web Marketing
AdvanceWebMarketing.com
-
- Joomla! Apprentice
- Posts: 6
- Joined: Sun Dec 25, 2005 9:37 pm
MiniDoc: Creating a CSS Drop-down Menu
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
I myself got the menu working fine, now I am trying to figure out how to style the menus once they've dropped down
-
- Joomla! Apprentice
- Posts: 28
- Joined: Mon Aug 29, 2005 4:17 pm
- Location: Jamestown, RI USA
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
I think that the z-index is OK,
I set the containing DIV to be z-index 1000. The styles are:
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
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;
}
I did find that Opera works OK, but still not IE or FireFox???
Thanks -- Tony
Tony Lush
Advance Web Marketing
AdvanceWebMarketing.com
Advance Web Marketing
AdvanceWebMarketing.com
- htsolutions
- Joomla! Intern
- Posts: 50
- Joined: Tue Dec 27, 2005 3:31 pm
- Location: Michigan
- Contact:
MiniDoc: Creating a CSS Drop-down Menu
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
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.