CSSMenu that works in FF IE6 IE7 etc.

Greg · **Posted:** Fri Jun 01, 2007 1:40 am

This works for Horizontal and Vertical menus up to 4 levels deep. I have tested both the Horizontal and Vertical menus and they are fully functional on live sites, using FF IE6 and IE7.

How to:

Get the dhtml.js file from: http://solardreamstudios.com/learn/css/cssmenus

upload dhtml.js to uploads/file

Add this to the section of your page template

Code:

<!--[if lte IE 6]>
<script type="text/javascript" src="uploads/file/dhtml.js"></script>
<![endif]-->

Using menumanager in the FileTemplates tab Import cssmenu.tpl into the database call it CSSMenu

On the Database Templates tab Edit CSSMenu
change the line

Code:

#menuwrapper {
background:#B70100;
border-bottom:6px solid #2D789E;
width:98%;
padding-left: 2%;
}

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;
  /*width: 500px; For KHTML*/
  list-style: none;
  height: 28px;
}

ul#navmenu li {
  margin-left:-1px;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 28px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  background:#c7c7c7;
  border-right: 1px solid #B70100;
  border-left: 1px solid #B70100;
  padding: 5px 10px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #009;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background:#c7c7c7;
color: #000;
}

#navmenu li.menuactive a{
background:#c7c7c7;
color: #fff;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  border:1px solid silver;
  float: none;
  background: #70C0FB;
  color: #000;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CF1519;
color: #fff;
}

#navmenu li.menuactive li a.menuactive {
background: #CF1519;
color: #fff;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #70C0FB;
  color: #000;
}

#navmenu li.menuactive li.menuactive li a.menuactive {
background: #CF1519;
color: #fff;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CF1519;
color: #fff;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #70C0FB;
  color: #000;
}

#navmenu li.menuactive li.menuactive li.menuactive li a.menuactive {
background: #CF1519;
color: #fff;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CF1519;
color: #fff;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

Code:

#menuwrapper {
padding-left: 2%;
}

/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 200px; /*For KHTML*/
  list-style: none;
}

ul#navmenu:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu li {
  float: left; /*For IE 7 lack of compliance*/
  display: block !important; /*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #fff;
  border-right-color: #999;
  border-bottom-color: #999;
  padding: 0 6px;
  display: block;
  background: #EEE;
  color: #000;
  font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
#navmenu li.menuactive a{
background-color: #B23838;
color: #fff;
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #B23838;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: #EEE;
  color: #000;
}

#navmenu li.menuactive li a.menuactive {
background: #CF1519;
color: #fff;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #B23838;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #000;
}

#navmenu li.menuactive li.menuactive li a.menuactive {
background: #CF1519;
color: #fff;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #B23838;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #000;
}

#navmenu li.menuactive li.menuactive li.menuactive li a.menuactive {
background: #CF1519;
color: #fff;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #B23838;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 200px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

http://solardreamstudios.com/

KO · **Posted:** Fri Jun 01, 2007 5:52 am

Nice! Another solution for css menu. Thanks!

Dr.CSS · **Posted:** Thu Jun 07, 2007 10:00 pm

Nice, any reason you don't just use the IE JS that comes with CMSMS...

And of course there is still no way to put 2, horiz., vert., menus on one page....

Greg · **Posted:** Tue Jul 31, 2007 1:35 am

Perhaps if this was included in the latest version of CMSMadesimple for the CSSMenu we would have less problems posted regarding CSSMenu and IE. Also refer to this post by essexboyracer, which refers to the same code.

Thoughts?

realrock · **Joined:** Tue Sep 04, 2007 8:14 pm **Posts:** 238

I installed all the script parts but it looks a little different om my page:

test.stonespoint.org

The problem is that I can't get other menu levels?

Im not really sure about this part(changing ''primary-nav'' ''navmenu'''):

Code:

{if $count > 0}
<div id="CSSMenu">
<ul id="navmenu">

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

   {repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

   {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
   </li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
   <li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
   <li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
   <li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
   <li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}

{/foreach}

   {repeat string="</li></ul>" times=$node->depth-1}      </li>
   </ul>
<div class="clearb"></div>
</div>
{/if}

Did I forget something?, thanks ::)

Greg · **Posted:** Wed Sep 05, 2007 12:03 pm

Here is the code I use in Menumanager.

Code:

{* CSS classes used in this template:
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="navmenu">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent"><a class="menuparent" {else}
<li><a {/if}
href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
<div class="clear"></div>
</div>
{/if}

Dr.CSS · **Posted:** Wed Sep 05, 2007 12:13 pm

@Greg

Have you been able to put more than one menu on a page that can use this?...

Greg · **Posted:** Wed Sep 05, 2007 12:20 pm

Hey Mark I'm away from my regular workspace for the next 10 hours so will have to take a look at this later. Were you looking for 2 horizontal, a vertical and a horizontal, or a combination with different levels of menus?

Dr.CSS · **Posted:** Wed Sep 05, 2007 5:13 pm

Any of the above, I can style it any which way, just can't get 2 menus on the same page that use JS for IE to work in IE...

Can get as many as I want to work in Firefox... IE sucks any way you look at it...

Greg · **Posted:** Thu Sep 06, 2007 12:54 am

Mark you must be referring to IE6 or less. I tried a horizontal and a vertical menu in the same template and it works with no problems in IE7. I don't have access to IE6 or less in my development environment. Sorry!

Dr.CSS · **Posted:** Thu Sep 06, 2007 2:04 am

IE7 can do the menu without the JS, so yes I'm referring to IE6 which needs the JS to add in our case it's an 'h' to the end of li items to make them drop, yours uses 'ie' in front of hover to make them drop, in IE6 for both...

Like I said I've tried every way from sunday, as the saying goes, to get it to work, 2 drop menus, horiz. w/ vert., 2 vert., 2 horiz., and no go...

realrock · **Joined:** Tue Sep 04, 2007 8:14 pm **Posts:** 238

Greg wrote:

Here is the code I use in Menumanager.

Thanks Greg.

I have take all the steps as described above but still the menu looking strange: test.stonespoint.org

The page code:

Code:

<div id="menu">
  <table width="573" height="43" border="0">
  <tr>
    <td>{menu template='CSSMenu'}</td>
  </tr>
</table>
</div>

The Menumanager code and de CSS code are the same as your's, could it be the anything with the CSS code?

Greg · **Posted:** Thu Sep 06, 2007 10:20 pm

Try the menu call without the table.

asfahaan · **Posted:** Tue Sep 11, 2007 1:06 pm

Hi Greg,

Where abouts in the website can I find the dhtml.js file?

I know you have mentioned from: http://solardreamstudios.com/learn/css/cssmenus

I wasnt able to find it on that page.

THanks,
AM

asfahaan · **Posted:** Wed Sep 12, 2007 10:32 am

Anyone around??

Where abouts can I find the dhtml.js file?

Thnx

CSSMenu that works in FF IE6 IE7 etc.

Who is online