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

[Sle@per]

Hi all,

After being completely frustrated and fed up with my menu (I'm sorry it was just too figity for me), a good friend of mine helped my modify the code to create drop down menu's for the top menu in Elements.

Here is the code that was modified to create the effect seen at www.belton.co.nz . Please note the width is auto and will depend on the largest child item in the menu.

************************************************************************************

add this stuff (change existing) match colour for your site


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


#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 ul#mainlevel li a:hover, #navbar ul#mainlevel li:hover a {




#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;
}

****************************************************************
Should be all of it. Feel free to correct me if you can do it better.

Please note I check with Barrie and he was more than happy for me to post here, even though Joomlashack is a business and makes money from modding work. Big ups.

[boxes]

Thanks so much, looks nice

Would there be any way to add Down Arrows in top menu items that contain sub items?

The down arrow should not appear in all top items, just those with sub items.

Thanks again

[Sle@per]

Hey boxes,

there is .. but I have no idea how .. Good news is a good friend of mine is looking into for me as we speak. I'll post an update when I have one.

[boxes]

Super! Thanks

[ijames]

Hello Good Sir!

I love the drop down menus. I've added them to a site I'm building. I've noticed that menus don't expand to fit the text in firefox 1.5 for mac. I'm wondering if anybody knows why that might be.

Thanks,
James

[Sle@per]

Hi,

we checked this and it seems to work fine .. anyone else having this problem .. with firefoxx on mac and dropdowns?

[Weseal]

Hello,
Thank you so much for the great information.  Although i am having one small problem with the above.  I did as told but i only get one of the sub links to show up even if i have many under the one top level link.  is there something i am missing.  thanks for  any help inadvance.
Rich

ps am i suppose to just add (cut and paste) the above code or modify the exsisting code?  sorry for such a newbie question
thanks

[ijames]

Hmmmm. And you tried with the pre 2.0 version? That's odd. I'll double check.

James

[Weseal]

i think i may not be editing the code correctly do i just add to the exisiting css code or do i need to modifiy the exisiting code?  Part of the problem may be i am just not doing it correctly.  alittle more instruction probably would get the issue fixed.
thanks

[camelx99]

Sorry for our ignorance but we tried to apply it on our website without success. 
We are not technical skilled (limited to copy and paste) therefore we would appreciate if somebody could explain in detail what we need to do to get this up and running. The Element template is great and the topmenu is nice but not practical. Therefore we would like to get a little more information to apply the changes.

Thanks a lot, Rik

[Sle@per]

you need to modify the existing code to look like the code pasted here.

[Detlef Eric Hinz]

Hi,

I don't know which code I have to add and which I have to replace. Could you publish the whole part of the css here? That would be very nice, I love your alterations!

Thanks a lot, best wishes
Eric

Hi all,

After being completely frustrated and fed up with my menu (I'm sorry it was just too figity for me), a good friend of mine helped my modify the code to create drop down menu's for the top menu in Elements.

Here is the code that was modified to create the effect seen at www.belton.co.nz . Please note the width is auto and will depend on the largest child item in the menu.

************************************************************************************

add this stuff (change existing) match colour for your site


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


#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 ul#mainlevel li a:hover, #navbar ul#mainlevel li:hover a {




#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;
}

****************************************************************
Should be all of it. Feel free to correct me if you can do it better.

Please note I check with Barrie and he was more than happy for me to post here, even though Joomlashack is a business and makes money from modding work. Big ups.

[camelx99]

Is there sombody who can help newbie's a step further. I tried it several times without success and it looks I'm not the only one....

Thanks a lot, Rik

[Dean Marshall]

After you change the StyleSheet code and re-upload your modified file(s) (always keep backups of the originals)
you will need to force your browser to load the updated stylesheets rather than the previously stored version.
Load your site in your favourite browser (Firefox hopefully - but IE will just about work too).
Hold down the shift key on your keyboard and with your mouse click on the reload or refresh button on the browser's toolbar.

That should do it - as long as the stylesheets are correct.

On A Related Note

A note on IE7 - this browser no longer requires the suckerfish javascript in order to function - in fact the old javascript causes problems with IE7. The problem is that a lot of users still have IE6 so we can't just disregard or throw away the javascript.

Instead we have to make it load conditionally - only for IE versions before version 7.
If your copy of the template has the following code within it:

Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
navHover = function() {
var lis = document.getElementById("navbar").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" sfhover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
//--><!]]>
</script>

Remove the above code from the template - Place the following code in a new .js file at /templates/<name-of-template>/js/iehover.js

Code:

navHover = function() {
var lis = document.getElementById("navbar").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" sfhover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);

For your convenience - This code is now attached to this message as a separate file

Now we will load this code conditionally upon the browser being Internet Explorer and the version being less than 7.
Place the following code in before the </head> code in the template's index.php file

Code:

<!--[if lt IE 7]>
  <script type="text/javascript" language="javascript" src="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $mainframe->getTemplate();?>/js/iehover.js"></script>
<![endif]--> 

Dean

[Barrie North]

Stickied!

[eddifr]

Hi all,

After being completely frustrated and fed up with my menu (I'm sorry it was just too figity for me), a good friend of mine helped my modify the code to create drop down menu's for the top menu in Elements.

Here is the code that was modified to create the effect seen at www.belton.co.nz . Please note the width is auto and will depend on the largest child item in the menu.

************************************************************************************

add this stuff (change existing) match colour for your site


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


#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 ul#mainlevel li a:hover, #navbar ul#mainlevel li:hover a {




#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;
}

****************************************************************
Should be all of it. Feel free to correct me if you can do it better.

Please note I check with Barrie and he was more than happy for me to post here, even though Joomlashack is a business and makes money from modding work. Big ups.

Hi mate, do you think it would it be possible for you, to upload the entire css, instead of only some code rows?
I tried a lot to change it with your code rows, but after a lot of tries I'm still here.
Please help me because I also need a drop down menu, i have many items to publish.
Thank you very much and best regards!! 

[Brik182]

i got this working BUT ... i have a flash rotator underneath the menu and the hover submenu appears under it. Any ideas?

[Kelly Paradis]

I tried modifying mine too, and in the end, I just ended up downloading the actual file from
 http://www.belton.co.nz and loading it and now it works great.  But since I didn't ask permission to grab it off the site, I've loaded it onto my work site so those of you that want it can download it from there instead of hitting the belton site.

Here you go! This is the complete working template_css.css file (I haven't read the IE7 fixes, so those aren't in here if that was an issue in this file.)

www.agristar.com/element/template_css.css

Just put it in your browser URL bar and it should pop up a message asking you if you want to download this file and where you'd like to save it. 

Save it locally (and as someone else mentioned, make a backup of your original, just in case) and then just replace your file in your \css folder.

Thanks so much for all the help in this forum...this is my first post, but I have really learned a lot reading through these forums.

Kelly

[eddifr]

I tried modifying mine too, and in the end, I just ended up downloading the actual file from
 http://www.belton.co.nz and loading it and now it works great.  But since I didn't ask permission to grab it off the site, I've loaded it onto my work site so those of you that want it can download it from there instead of hitting the belton site.

Here you go! This is the complete working template_css.css file (I haven't read the IE7 fixes, so those aren't in here if that was an issue in this file.)

www.agristar.com/element/template_css.css

Just put it in your browser URL bar and it should pop up a message asking you if you want to download this file and where you'd like to save it. 

Save it locally (and as someone else mentioned, make a backup of your original, just in case) and then just replace your file in your \css folder.

Thanks so much for all the help in this forum...this is my first post, but I have really learned a lot reading through these forums.

Kelly

Thanks a lot Kelly!!!
You was much precious!!!   

[TJ]

Thanks Kelly for providing the help....

I've attached the file with the changes to this post, if anyone still needs it....

I must say, thanks to everyone for all of your input and for helping each other!  After all, that's what a forum is all about, eh!

peace,

tj

[TJ]

i got this working BUT ... i have a flash rotator underneath the menu and the hover submenu appears under it. Any ideas?

You need to add a z-index to your navbar.....

peace,

tj

[deadlydave]

Well I finally sorted it,  thanks for your post on this guys!! 


One think I can't seem to find in my css template to fix now since I uploaded yours...  where on earth is the 'current page' text colour on the menu bar?

www.dx2promotions.com/fanela


I seem to have it stuck in Red and I can't find it anywhere...  is it stored in a different file?

[TJ]

Hello,

Look for the following code in your template_css.css file, toward the bottom of the file:

Code:

#navbar ul#mainlevel li a#active_menu {
color: #c30;
cursor: default;
}

Change your color there......

peace,

tj

[Claus Egholm Nielsen]

Although i am having one small problem with the above.  I did as told but i only get one of the sub links to show up even if i have many under the one top level link.  is there something i am missing.  thanks for  any help inadvance.
Rich

I had the same problem. You can fix it by changing the #navcontainer. Change "overflow: hidden;" to "overflow:visible;".
Like this:

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

I have no idea if this is propper code, but hey! - it works...
**Claus

[juju]

Think its a bunch of hog wash or someone is leaving something out because it does not work even putting your own color in.
Back to the drawing board with me...Sheeeeeeee Yea, I can get a drop down but only one level and across...I want full drop down with category's...