CSSMenu that works in FF IE6 IE7 etc.

[Greg]

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: Select all

<!--[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



Put the tag {menu template='CSSMenu'} in your page template where you want the menu to show up.

Create a stylesheet using either the Horizontal or Vertical CSS code from below.
Edit the background-color and color codes to your liking
Attach the stylesheet you created to the page template you put the menu tag in.

Horizontal css code

Code: Select all

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

Vertical css code:

Code: Select all

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

Send a note of thanks to Craig Erskine athttp://solardreamstudios.com/

[KO]

Nice! Another solution for css menu. Thanks!

[Dr.CSS]

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]

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]

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: Select all

{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]

Here is the code I use in Menumanager.

Code: Select all

{* 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]

@Greg

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

[Greg]

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]

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]

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]

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]

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: Select all

<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]

Try the menu call without the table.

[asfahaan]

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]

Anyone around??

Where abouts can I find the dhtml.js file?

Thnx