MiniDoc: Creating a CSS Drop-down Menu
-
- Joomla! Enthusiast
- Posts: 103
- Joined: Thu Jun 29, 2006 7:31 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Sorry i can't be much help. But have you tried messing with the z-indexs at all. When I've been working with the suckerfish there has been lots of references to the z-index as far as placement. Thats my only idea.
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Z-index does not appear to apply as far as I can tell.
-
- Joomla! Enthusiast
- Posts: 103
- Joined: Thu Jun 29, 2006 7:31 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Wish I knew more. I took a look at my suckerfish and it does something similar to yours. Appears a bit above the line. http://www.ontariopharmacyinc.com I don't have the border so its not as noticeable.
You might want to try posting in the template sections of the forums. I saw someone write that this area is more for a discussion of the dropdowns or something or other. Doesn't seem to be a lot of responses going on in here. Just a thought.
You might want to try posting in the template sections of the forums. I saw someone write that this area is more for a discussion of the dropdowns or something or other. Doesn't seem to be a lot of responses going on in here. Just a thought.
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
I decided to use a suckerfish menu I had used with a non-joomla site (the css was adapted from the original list apart css). I changed some class names, and voila, I fixed the problem. For anyone interested in a super simple piece of CSS to go with extended menu, here's my css:
Code: Select all
/*Main Navigation Container*/
#buttons {
float: left !important;
border-bottom: 1px solid #006699;
border-top: 1px solid #006699;
background: #E5E5E5;
height: 25px;
width: 750px;
margin: 5px 0px 5px 0px;
padding: 0px 0px 0px 5px;
z-index:1000;
}
/*Main Top Navigation*/
#mainlevelmainnav, #mainlevelmainnav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#mainlevelmainnav a {
display: block;
color: #016699;
text-decoration: none;
font-weight: bold;
font-size: 12px;
text-align: center;
line-height: 25px;
}
#mainlevelmainnav li {
float: left;
background-image: none;
/*border-right: #C5C5C5 1px solid;*/
}
#mainlevelmainnav li a:hover {
color: #993300;
}
#mainlevelmainnav li ul {
position: absolute;
width: 10em;
left: -999em;
margin: 0px;
border: 1px solid #016699;
background-color: #E5E5E5;
}
#mainlevelmainnav li ul a {
text-align: left;
font-weight: normal;
border: none;
color: #016699;
font-size: 11px;
padding-left: 5px;
padding-right: 5px;
line-height: 20px;
width: 100px;
}
#mainlevelmainnav li ul a:hover {
color: #993300;
}
#mainlevelmainnav li:hover ul, #mainlevelmainnav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index:1000;
}
#mainlevelmainnav li:hover > ul {
display: block;
}
Last edited by latristesse on Fri Oct 20, 2006 1:05 am, edited 1 time in total.
-
- Joomla! Enthusiast
- Posts: 103
- Joined: Thu Jun 29, 2006 7:31 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Thanks for sharing. I'm new to this and its nice to see what others have. Greatly appreciate it.
- carsten888
- Joomla! Ace
- Posts: 1224
- Joined: Sat Feb 11, 2006 8:32 am
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
same here!
here's mine for submenu's.
note: I named the ext.menumodule module-suffix "Submenu".
note: work until 4 navigation levels deep (but easy to adept that).
here's mine for submenu's.
note: I named the ext.menumodule module-suffix "Submenu".
note: work until 4 navigation levels deep (but easy to adept that).
Code: Select all
/* MENUS */
div.moduleSubmenu{
padding-top: 40px;
}
ul#mainlevel, ul#mainlevel ul, ul#mainlevel ul ul, ul#mainlevel ul ul ul, ul#mainlevel ul ul ul ul{
margin: 0px;
padding: 0px;
}
ul#mainlevel li{
list-style-type: none;
border-top: 1px solid #999999;
}
ul#mainlevel a{
display: block;
text-decoration: none;
padding: 3px 3px 3px 10px;
}
#mainlevel a:link, #mainlevel a:visited{
color: black;
background: #cccccc;
}
#mainlevel a:active, #mainlevel a:hover{
background: white;
color: red;
}
/*padding-left for all subitems*/
#mainlevel ul li.sublevel a.sublevel, #mainlevel ul li.sublevel_current a#active_menu, #mainlevel ul li.sublevel_active a.sublevel{
padding-left: 20px;
}
/*padding-left for all sub-subitems*/
#mainlevel ul ul li.sublevel a.sublevel, #mainlevel ul ul li.sublevel_current a#active_menu, #mainlevel ul ul li.sublevel_active a.sublevel{
padding-left: 40px;
}
/*padding-left for all sub-sub-subitems*/
#mainlevel ul ul ul li.sublevel a.sublevel, #mainlevel ul ul ul li.sublevel_current a#active_menu, #mainlevel ul ul ul li.sublevel_active a.sublevel{
padding-left: 60px;
}
/*active*/
a#active_menu:link, a#active_menu:visited{
background: white;
font-weight: bold;
color: red;
}
http://www.pages-and-items.com my extensions:
User-Private-Page, Redirect-on-Login, Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, plugin load module in article, plugin pure css tooltip and more...
User-Private-Page, Redirect-on-Login, Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, plugin load module in article, plugin pure css tooltip and more...
- konczal
- Joomla! Explorer
- Posts: 271
- Joined: Mon Mar 13, 2006 9:35 pm
- Location: New Jersey, US
Re: MiniDoc: Creating a CSS Drop-down Menu
In my Module properties, I do not get the "Menu Style" option of "Tree list." Am I missing a module, or (worse) is my Joomla! installation too old? We're running Joomla! 1.0.3 Stable.
-
- Joomla! Enthusiast
- Posts: 103
- Joined: Thu Jun 29, 2006 7:31 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
I don't know if it should be in there or not. I started with joomla 1.0.8 so unsure.
I would highly recommend upgrading to the latest version of 1.0.10 . Maybe this will fix your problem that your faciing and update some serious security stuff. This according to the frontpage of joomla.org if you scroll to the bottom.
I would highly recommend upgrading to the latest version of 1.0.10 . Maybe this will fix your problem that your faciing and update some serious security stuff. This according to the frontpage of joomla.org if you scroll to the bottom.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Fri Aug 18, 2006 5:05 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
I'm having this exact problem right now.ugsmi0 wrote: list-style-type: none; doesn't work either still shows the bullets in the link ?
Why is it that ext menu seems to be the only thing on the page that shows a list bullet next to each link ?
try several ways to turn it off with no luck, is it be default somewhere in the mod file ?
I'm using it to pull in the main menu
Did anyone find out how to have this resolved?
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
It's "list-style: none;" and also set the "background-image: none;" This should work.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Fri Aug 18, 2006 5:05 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
I tried that and still the bullet points appear
Any other suggestions??
Any other suggestions??
-
- Joomla! Fledgling
- Posts: 4
- Joined: Fri Aug 18, 2006 5:05 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Here's my CSS code :
#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;
list-style: none;
}
#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: #ffffff;
text-decoration: none;
margin-right: 35px;
margin-left: 10px;
padding: .6em;
list-style: none;
}
#mainlevelmainnav a:hover{
display: block;
color: #f1ffa1;
text-decoration: none;
margin-right: 35px;
margin-left: 10px;
padding: .6em;
list-style: none;
}
#mainlevelmainnav li{
float: left;
padding: 0;
list-style: none;
}
#mainlevelmainnav li ul{
position: absolute;
left: -999em;
height: auto;
width: 11em;
font-weight: 400;
background: #ff3c10;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
border: #313031 1px solid;
margin: 0;
list-style: none;
}
#mainlevelmainnav li li{
width: 11em;
list-style: none;
}
#mainlevelmainnav li ul a{
width: 11em;
color: #FFFFFF;
font-size: 1em;
line-height: 1em;
font-weight: 700;
list-style: none;
}
#mainlevelmainnav li ul a:hover{
width: 11em;
color: #000000;
font-size: 1em;
line-height: 1em;
font-weight: 700;
list-style: none;
}
#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-image: none;
background: #ff0000 98% 50% no-repeat;
}
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
You need to use background-image in li like so:
Code: Select all
#mainlevelmainnav li {
float: left;
background-image: none;
}
Last edited by latristesse on Fri Aug 18, 2006 5:50 pm, edited 1 time in total.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Fri Aug 18, 2006 5:05 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Ah that did the trick.latristesse wrote:Code: Select all
List-style none goes in #mainlevelmainnav ul, and then try this for li styling: #mainlevelmainnav li { float: left; background-image: none; }
Many thanks latristesse
- lilqhgal
- Joomla! Enthusiast
- Posts: 150
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Ohio
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
I too am getting a javascript error in IE. it says 'document.getEleentById(...)' is null or ot an oject ... any ideas on how to fix this problem? Works fine in FF.
Ramsey
---------
"You can take the Cowgirl out of the West but you can't take the West out of the Cowgirl, or the Expressions out of her Designs!"
---------
"You can take the Cowgirl out of the West but you can't take the West out of the Cowgirl, or the Expressions out of her Designs!"
- carsten888
- Joomla! Ace
- Posts: 1224
- Joined: Sat Feb 11, 2006 8:32 am
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
maybe becasue of the typo?
getEleentById > getElementById()it says 'document.getEleentById(...)' is null or ot an oject
http://www.pages-and-items.com my extensions:
User-Private-Page, Redirect-on-Login, Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, plugin load module in article, plugin pure css tooltip and more...
User-Private-Page, Redirect-on-Login, Admin-Help-Pages, Dynamic-Menu-Links, Admin-Menu-Manager, plugin load module in article, plugin pure css tooltip and more...
- lilqhgal
- Joomla! Enthusiast
- Posts: 150
- Joined: Thu Aug 18, 2005 5:53 pm
- Location: Ohio
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Oops that was my typo on the forum, but it's not actually that way in the script code. (This keyboard is horrible that I type on, it misses letters so many times, even if I hit them really hard. anyway) .. here's the actual code i have:
Code: Select all
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Ramsey
---------
"You can take the Cowgirl out of the West but you can't take the West out of the Cowgirl, or the Expressions out of her Designs!"
---------
"You can take the Cowgirl out of the West but you can't take the West out of the Cowgirl, or the Expressions out of her Designs!"
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Is the script after your CSS link but before the end of the head section?
-
- Joomla! Fledgling
- Posts: 4
- Joined: Fri Dec 02, 2005 10:23 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Hey everyone,
Great menu, by the way - tho i am having some problems!
I got everything installed and working, but for some reason, when i hover over a sub-menu item, the new color as a result of the hover, appears over the original, and is shifted right, about 10px. It looks really sloppy.
I'm using a firefox browser. and i changed nothing in the css code provided in the tutorial except:
- i'm using a suffix '-mainnav'
- i removed the soccer gif reference.
Any help would be great.. it's for a good cause!!
Great menu, by the way - tho i am having some problems!
I got everything installed and working, but for some reason, when i hover over a sub-menu item, the new color as a result of the hover, appears over the original, and is shifted right, about 10px. It looks really sloppy.
I'm using a firefox browser. and i changed nothing in the css code provided in the tutorial except:
- i'm using a suffix '-mainnav'
- i removed the soccer gif reference.
Code: Select all
/* EXTENDED MENU */
#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
#mainleveltopnav li{
display:inline;
list-style-type:none;
padding-right:5px;
}
a.mainleveltopnav,a.mainleveltopnav:link,
a.mainleveltopnav:visited{
color:#fff;
}
.moduletable-mainnav{ /* I have absolutely positioned the module, you might have a different scheme*/
position:absolute;
top:187px;
left:20px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevel-mainnav,#mainlevel-mainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevel-mainnav a{
display:block;
color:#fff;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevel-mainnav li{
float:left;
padding:0;
}
#mainlevel-mainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevel-mainnav li li{
width:11em;
}
#mainlevel-mainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevel-mainnav li:hover ul ul,#mainlevel-mainnav li:hover ul ul ul,#mainlevel-mainnav li.sfhover ul ul,#mainlevel-mainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevel-mainnav li:hover ul,#mainlevel-mainnav li li:hover ul,#mainlevel-mainnav li li li:hover ul,#mainlevel-mainnav li.sfhover ul,#mainlevel-mainnav li li.sfhover ul,#mainlevel-mainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevel-mainnav li li:hover,#mainlevel-mainnav li li.sfhover{
background:#069;
}
/* END EXT MENU */
-
- Joomla! Apprentice
- Posts: 13
- Joined: Thu Sep 22, 2005 10:24 pm
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Great menu and instructions ... and it works like a charm!
I was looking to format the submenus and found some info that worked... I added the following to the .css file and it provides a nice structure for the submenus. Hope it helps somebody out there and saves a little time searching for the answer!
#mainlevelmainnav li ul ul{ /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
I was looking to format the submenus and found some info that worked... I added the following to the .css file and it provides a nice structure for the submenus. Hope it helps somebody out there and saves a little time searching for the answer!
#mainlevelmainnav li ul ul{ /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
My suckerfish menus are still working beautifully except over forms. For some reason, the drop-down menu drops behind the fields of the form - very ugly! This only happens with a form, so I'm not sure what's going on here.
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Apprentice
- Posts: 13
- Joined: Thu Sep 22, 2005 10:24 pm
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Have you tried using a z-index in your style sheets to force the menus to the top?
-
- Joomla! Explorer
- Posts: 270
- Joined: Mon Dec 12, 2005 9:59 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
I put the z-index into the container of the navigation but I didn't think that was causing the problem since it was only appearing on forms. However, I decided to give it a shot anyway and found that when I changed the li:hover ul to have a z-index of 1000, the problem resolved. Thanks.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Tue Oct 17, 2006 10:43 am
Re: MiniDoc: Creating a CSS Drop-down Menu
Hi, I am using the rockettheme - jw_inetgazette template with expose4 and I find that my suckerfish dropdown menu drops behind the expose4 flash element - I feel I need to change or add a Z index somewhere and have tried a few places in the CSS and as yet have had no success - any ideas where I bring the mainmenu (horizintal) to the front so it sits on top of the expose4 flash element?
Thaks in advance!
Baz
Thaks in advance!
Baz
- Waseem Sadiq
- Joomla! Ace
- Posts: 1441
- Joined: Mon Sep 12, 2005 7:41 pm
- Location: Glasgow - Scotland
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
Do you have wmode=transparent enabled on your expose4 flash movie?
http://www.bulletprooftemplates.com/ - Joomla Templates and Consultancy
-
- Joomla! Fledgling
- Posts: 4
- Joined: Tue Oct 17, 2006 10:43 am
Re: MiniDoc: Creating a CSS Drop-down Menu
Thanks for the reply.haaris wrote: Do you have wmode=transparent enabled on your expose4 flash movie?
I have checked in manager.html and wmode is transparent.
further examination of the problem makes me believe that the menu is dropping behind the iframe..
I have attached a screenshot.
i was hoping I would find a way of changing the z-index of the menu so it sat over the iframe but no such luck as yet
Again - thanks for your help, it's really appreciated!
You do not have the required permissions to view the files attached to this post.
- rsphaeroides
- Joomla! Ace
- Posts: 1369
- Joined: Sun Aug 21, 2005 2:57 pm
- Location: Colorado, USA
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
I've got the standard minidoc version installed and working beautifully (although IE7 seems to ignore the on mouseout and leaves the menu pulled down until you mouse over another menu item) so of course I started trying to break it.
Been trying to adjust this so that instead of stacking vertically the dropdowns fill the row below horizontally
eg. when you mouse over topitem2 you get
topitem1 topitem2 topitem3
2subitem1 2subitem2 2subitem3 2subitem4
and when you mouse over topitem3 you get
topitem1 topitem2 topitem3
3subitem1 3subitem2 3subitem3
Any suggestions (obviously the ideal would be "grab the style from htpp.... but I'm willing to work at it if someone can get me started.)
thanks
Been trying to adjust this so that instead of stacking vertically the dropdowns fill the row below horizontally
eg. when you mouse over topitem2 you get
topitem1 topitem2 topitem3
2subitem1 2subitem2 2subitem3 2subitem4
and when you mouse over topitem3 you get
topitem1 topitem2 topitem3
3subitem1 3subitem2 3subitem3
Any suggestions (obviously the ideal would be "grab the style from htpp.... but I'm willing to work at it if someone can get me started.)
thanks
¡Pura Vida!
Ray,
joomla in testing at Costa Rica Travel: http://costaricamap.net
http://costa-rica-guide.com
Ray,
joomla in testing at Costa Rica Travel: http://costaricamap.net
http://costa-rica-guide.com
- rsphaeroides
- Joomla! Ace
- Posts: 1369
- Joined: Sun Aug 21, 2005 2:57 pm
- Location: Colorado, USA
- Contact:
Re: MiniDoc: Creating a CSS Drop-down Menu
I figured out what's causing the problem with IE7. There is something in the overlibmini.js that is interfering with the sfHover script required for the IE fix.
Anyone run across this or a solution?
Anyone run across this or a solution?
¡Pura Vida!
Ray,
joomla in testing at Costa Rica Travel: http://costaricamap.net
http://costa-rica-guide.com
Ray,
joomla in testing at Costa Rica Travel: http://costaricamap.net
http://costa-rica-guide.com
-
- Joomla! Apprentice
- Posts: 13
- Joined: Fri Dec 01, 2006 3:44 pm
Re: MiniDoc: Creating a CSS Drop-down Menu
Hi, I've done as you said in your post here: http://forum.joomla.org/index.php/topic,22023.0.html. And a problem occurs:
First when I install extended menu and publish it, everything is ok, I still can't get drop down menu (of course).
When I put your CSS and javascript code in my files, the extended menu fly out of the content, becoming horizontal. And I doesn't uses the style of my template.
The menu is in a vertical order, so I want to have the submenu drop out to the right or left of it. How can I modify the code?
Please help. Thanks.
My site is here: http://www.kitovua.tuhu.net
First when I install extended menu and publish it, everything is ok, I still can't get drop down menu (of course).
When I put your CSS and javascript code in my files, the extended menu fly out of the content, becoming horizontal. And I doesn't uses the style of my template.
The menu is in a vertical order, so I want to have the submenu drop out to the right or left of it. How can I modify the code?
Please help. Thanks.
My site is here: http://www.kitovua.tuhu.net
Last edited by Misatran on Fri Dec 08, 2006 12:32 pm, edited 1 time in total.
-
- Joomla! Apprentice
- Posts: 5
- Joined: Mon Dec 11, 2006 7:29 am
Re: MiniDoc: Creating a CSS Drop-down Menu
I have followed this but how do I create the submenus and display them??