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!