Menu For Menu Module

[justinerswell]

Hi

I have this menu in my HTML pages and I would like to transpose it into the Menu Manager but I am at a Loss as to how?

Code: Select all

		       <table align="left" cellpadding="0" cellspacing="1" style="width: 100%">
				   <tr>
					   <td style="width: 325px">
					   <img alt="" height="134" src="logo.gif" width="368" /></td>
					   <td class="style3">
					   <div class="menu" style="left: 0px; top: 0px; width: 394px; height: 38px; text-align: center;">
						<ul>
						<li><a class="hide" href="../menu/index.html">Products</a>
						<!--[if lte IE 6]>
						<a href="../menu/index.html">Products
						<table><tr><td>
						<![endif]-->
							<ul>
							<li><a href="#" title="Coming Soon">Coming Soon</a></li>
							<li><a class="hide" href="../menu/hover_click.html" title="Hoodies">Hoodies ></a>
						    <!--[if lte IE 6]>
						    <a class="sub" href="../menu/hover_click.html" title="Hoodies">Hoodies >
						    <table><tr><td>
						    <![endif]-->
								<ul>
									<li><a href="#" title="Womens Hoodies">Womens Hoodies</a></li>
									<li><a href="#" title="Mens Hoodies">Mens Hodies</a></li>
									<li><a href="#" title="Kids Hoodies">Kids Hoodies</a></li>
								</ul>
							<!--[if lte IE 6]>
							</td></tr></table>
						    </a>
						    <![endif]-->
							</li>
							<li><a class="hide" href="#" title="Tees">Tees ></a>
						    <!--[if lte IE 6]>
						    <a class="sub" href="#" title="Tess">Tees >
						    <table><tr><td>
						    <![endif]-->
								<ul>
									<li><a href="#" title="Womens Hoodies">Womens Tees</a></li>
									<li><a href="#" title="Mens Hoodies">Mens Tees</a></li>
									<li><a href="#" title="Kids Hoodies">Kids Tees</a></li>
								</ul>
							<!--[if lte IE 6]>
							</td></tr></table>
						    </a>
						    <![endif]-->
							</li>
							</ul>
						<!--[if lte IE 6]>
						</td></tr></table>
						</a>
						<![endif]-->
						</li>
						</ul>
						<ul>
							<li><a class="hide" href="#">About Us</a></li>
						</ul>
						<ul>
							<li><a class="hide" href="#">Stock</a></li>
						</ul>
						<ul>
							<li><a class="hide" href="#">Contact Us</a></li>
						</ul>
						</div>
					   </td>
				   </tr>
			   </table>

My CSS

Code: Select all

/* common styling */
.menu {font-family: "Courier New", Courier, monospace; width:750px; height:100px; position:relative; font-size:12px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:85px; height:20px; text-align:center; color:#000000; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background: #E7CA3C;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px; text-align: left;}
.menu ul li:hover ul li a.hide {background:#E7CA3C; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#FFF;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#E7CA3C; color:#000;}
.menu ul li:hover ul li a:hover {background:#E7CA3C; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:86px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

Hack for IE

Code: Select all

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background: #E7CA3C;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#E7CA3C; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#E7CA3C; color:#FFF;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#E7CA3C; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

Any help would be appreciated

[Deak]

The documentation for Menu Manager is very thorough. However, taking look at your menu, which is a mix of tables and lists, I would be tempted to start afresh and work from one of Menu Manager's default templates. Almost anything should be possible.

My starting point would be to add pages to a clean install of CMS Made Simple to represent the approximate structure and number of levels you have. Next, delete your menu HTML from your template and replace it with:

{menu}

Next, go to Menu Manager and tick different menus to change the default and see how it looks. If you find one that is about right, use this as the basis for extending and customising. You will need to change your CSS selectors.

It would not be my first choice to write a custom menu for something so complex if this was my first play with Menu Manager!

[Dr.CSS]

All that extra table stuff is from an eric meyers menu, iirc, that is supposed to work in ie6 w/o any JS help...

I make all kinds of menu templates, almost 100, and have been asked about this one and never saw the need to do this as there is a perfectly good drop down fly out menu that works just fine in ie6 even if it has to use JS that is only to help that POS IE6...