Guide: template_css.css modifications to create a drop down menu

[juju]

It a shame we just can not work with element...We been at this for 2 weeks and just been a headache after another...We have 10 websites to take care of and just do not have anymore time to work with this...We just change over to Vortex and it took us only a few minutes and we have everything we need...This is what we wanted and we did like the element but its to far behind and to hard to work things in....It was just a costly mistake and we will be more careful in the future because we bought the package...Now take a look at our test site:
http://cordorgaming.com/deathmatchsource/

We also just install it on www.bonofi.com

We are happy again and now can deal with other things... For people who are just starting out I would go with Vortex because  we know how to modify to a point but element was not going to let us do that...

[Dean Marshall]

juju:

I am sorry that on this occasion the JoomlaShack template you purchased didn't match your requirements.

You saw a demo of a template with a split level menu with the child menus placed in a horizontal band.
You decided to buy that template.
You then decided that you wanted to make it work differently - but you didn't have the capabilities to affect those changes.
You had the option of securing the services of a professional outfit to make those changes for you - we offer such services, as do other companies in the Joomlasphere. You chose not to take up those options.

I am not really sure what more we could do for you. Our 'support' forums are not intended as a place where people can secure free customisations from us. Rather our forums are intended primarily as a place to support people with installation difficulties and bug fixes. If our customers can help each other to affect such customisations then we applaud that and will, were reasonable, chip in and support such 'community spirit'.

If you then went and obtained a template elsewhere that had the features you required then I am glad you found a solution that worked for you. RocketTheme are a good outfit and make nice templates - that's the thing about Joomla it has the critical mass in terms of the number of developers out there adding templates, components, modules, etc. There is plenty of choice out there - but you need to pick your desired feature set before you make your purchase decisions.

Dean

[boxes]

any luck with the Down Arrows, Sle@per ?

thx 

[Eric Hayes]

Thanks for the mod! I have two issues. Well, I have several, but that is for a different type of forum! 

Please look at http://ericandbob.com/. When mousing over Readers Corner, the Fiction, Mystery and New York Times menus are supposed to be submenus of New Books & Media. I would like them to only be visible when mousing over New Books & Media.

Also, with IE6, the submenus seem to 'refresh' or 'disappear/reappear' very quickly when you mouse over them. They appear very nicely in IE7 and Firefox. Is there a solution for that?

Thanks much!

[Dean Marshall]

Your page is loading the overlib library - I'm not sure why but it is. Probably one of your modules.
Overlib and suckerfish just do not get on together - I've scoured the internet numerous times - I've found supposed fixes, but none ever seem to actually work.

Best solution I can offer is to stop the overlib library loading.
Next best solution is to stop using - and tell the rest of the world to stop using - IE6.
The quicker we get that out of circulation the better for all of us.

Dean

[Eric Hayes]

Your page is loading the overlib library - I'm not sure why but it is. Probably one of your modules.
Overlib and suckerfish just do not get on together - I've scoured the internet numerous times - I've found supposed fixes, but none ever seem to actually work.

Best solution I can offer is to stop the overlib library loading.
Next best solution is to stop using - and tell the rest of the world to stop using - IE6.
The quicker we get that out of circulation the better for all of us.

Dean

Thanks Dean. I take it this is your answer for my second point. Any idea on the first point?

[John Furr]

Hello,

I am trying to get the drop down menu to work on my site and have it to a point where I get one sub level only.  There should be a 3 or 4 sub menus in some of the drop downs.  Here are the changes that I made to the css.  I am kind of limited in the ways of css so I apologize for my ignorance in advance.

#navcontainer {
   background: url(../images/menubg2.png) repeat-x;
   height: 60px;
   padding: 0px 0px 0px 15px;
   overflow: hidden;
   position:relative;
}

#navbar {
   margin: 0;
   padding: 0;
   position: relative;
   height: 60px;
   background: url(../images/menubar.png) 0 0 no-repeat;
   padding-left: 2px;
   font: normal 12px Arial, Helvetica, sans-serif;
}

#navbar ul {
   margin: 0;
   padding: 0;
   float: left;
}

#navbar ul ul ul {
display:none;
}

#navbar li {
padding: 0;
margin: 0;
display: block;
float: left;
position: relative;
background: url(../images/menubar.png) 100% 0 no-repeat;
}

#navbar li li {
   background:none;
}

#navbar li.mainlevel_current {


}
#navbar ul ul li a {font-weight:bold;}

#navbar li ul {
width: auto;
display: none;
margin: 0;
padding: 0;
position: absolute;
top:33px;
min-height: 20px;
left: 0;
background:#333 url(../images/navbar_over.png) bottom repeat-x;
   
}

#navbar a {
   color: #fff;
   text-decoration: none;
   cursor: pointer;
}

#navbar a:hover {
color: #ccc;

}
#navbar ul#mainlevel li a:hover {
background:#000 url(../images/navbar_over.png) right center no-repeat;
color:#fff;
}

#navbar ul#mainlevel li a:hover, #navbar ul#mainlevel li:hover a {
background:none;
color:#0081BF;
}

#navbar a, #navbar ul#mainlevel li:hover ul li a? {
color: #fff;
text-decoration: none;
cursor: pointer;
}




#navbar ul#mainlevel li:hover ul li a {
background: none;
}
#navbar ul#mainlevel ul {
/* left: auto; */
white-space: nowrap;
}
*html #navbar ul#mainlevel ul {
width: 1px;
}


ul#mainlevel li {
position: relative;
}


#navbar ul#mainlevel ul li, #navbar ul#mainlevel ul li a {
display: block;
float: none;
}
#navbar ul#mainlevel ul li a.sublevel {
width: auto;
}
#navbar ul#mainlevel li ul li a:hover {
background:none;
color:#CC3300;
}

#navbar li ul a:hover,
#navbar li.mainlevel_current ul a:hover {
   color: #000;
}

#navbar li:hover ul, #navbar li.sfhover ul {
   display: block;
   z-index: 6000;
}

#navbar li a {
   display: block;
   float: left;
   padding: 0 15px;
   height: 33px;
   line-height: 33px;
}

#navbar li:hover a,
#navbar li.over a {
}
/* sub level links */

#navbar ul li {
   border-right: 0;

}
#navbar li ul a, #navbar li.mainlevel_current-navmenu ul a {
   display: block;
   float: left;
   color: #fff;
   font-weight: normal;
   padding: 0 10px;
   background: none;
   height: 25px;
   line-height: 25px;
}
.designer, .designer a, .designer a:visited {text-align:center; text-decoration:none; margin-bottom:10px; font:11px normal Arial, Helvetica, sans-serif; color:#666;}

[iakram]

Hi everyone,

I did a search but couldn't find a solution, maybe someone can help.

Basically, i have a menu with submenus. I would like it to work so that parent menu item isnt 'clickable', only the submenus are. I.e. when the mouse hovers over the menu, submenus are displayed, but the user cant click on the parent menu item but has to select one of the submenus.

Thank you.

ps. sorry if this question is already answered.

[rromei]

Hi everyone,

I did a search but couldn't find a solution, maybe someone can help.

Basically, i have a menu with submenus. I would like it to work so that parent menu item isnt 'clickable', only the submenus are. I.e. when the mouse hovers over the menu, submenus are displayed, but the user cant click on the parent menu item but has to select one of the submenus.

Thank you.

ps. sorry if this question is already answered.

Look I read this thread at least 10 times and tried all the solution supplied... no luck.
Then I went to the "source".

Have a look here:
http://www.htmldog.com/articles/suckerfish/dropdowns/

It tells you all!

[golffinder]

hi

ive got the submenu drop down working ok now,  thanks to everyone for that.  would anyone know how to get sub menus of sub menus working,  so as when you float over home, drop down appears below,  then float over golf news, sub menu appears to the right.

hopefully can see what i mean on my site: www.golf-finder.net

Thanks

Dave

[golffinder]

hi

added this to the css as taken from suckerfish,  but it dosen't seem to work, any 2 level sub menus appear in the dropdown sub menu,  anyone got any pointers, as i don't know what all this means

dave


#nav li ul ul {
   margin: -1em 0 0 10em;
}
#nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
   line-height: 1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
   left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
   left: auto;
}

[morktron]

Hi people, thanks for all the great work you've posted here. I've got my menu working now, but I don't suppose anyone has managed to work out how to include sub sub level items in the drop down?

As you can see there are lots of us asking the same question so it would be much appreciated.


--------------

Got it working now but the sub sublevel is called 'sublevel' in the CSS the same as the actual sublevel so how can you style it to be different?

[bjf123]

Thanks to the help and sample files here, I was able to get the drop down working on my site with one exception.  Once a menu item is clicked, it turns red.  Also, when you hover over the items on the drop down, they're red, too.  You can see what I mean at www.cincinnatidiving.com/devsite and look at the Travel menu item (it has the most submenu items).  I've tried changing what I think will correct it, but all I've done for the last half hour is screw it up to the point of having to repaste the copied css.  Help!

[Eric Hayes]

#navbar ul#mainlevel li ul li a:hover (line 462)

{
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
color: #cc3300;
}

#navbar ul#mainlevel li a#active_menu (line 462)

{
color: #cc3300;
cursor: default;
}

[AK_Homesteaders]

I made the css changes and it works very well, but I'd like 1 or 2 more submenu levels. Is there an extension that would work with Elements --- like the JoomlaArt transmenu?  Would I need to undo the css changes before installing it?

Thanks,

Jenny

[Brian James]

It looks like there has been a lot of work done on this one...and I thank those that have contributed...but my question is...has there been a final resolution to the following....

Create a vertical dropdown menu with submenus and submenus from those? like below..

MainMenu
   Submenu1
   Submenu2
        FlyoutSubmenu2.1
        FlyoutSubmenu2.2
   Submenu3

Thanks for your responses in advance!!

bjames

[bjf123]

I really like the look with the drop down menus, but have run into a problem.  I was testing out adding a forum to a site, so I added a menu item using a wrapper.  I'm not ready to go live with the forum, but I can't seem to get rid of it from the menu on the site.  I've tried both unpublishing and deleting it from the Main Menu module, but it's still there.  Any ideas why?  The site is here.

[pasomers1]

www.agristar.com/element/template_css.css

Thank you for the link to this file.  The menus are working, hooray!  However, I have two parent items that each have children and these are showing up, but are laying on top of one another.  Could someone please point me to the code where the sub-levels are set so I can modify the offset?  I am sure that this is doable, I just cannot find it in the CSS file.  Thank you!

Test site:  http://materia.tombuel.com (I have the child menus turned off at present)

Carol Hepburn
http://www.acewebpromotions.com