CMS Made Simple Forums

Posted: **Sat Jul 16, 2011 8:53 pm**

For the life of me I cannot seem to get the menu module to generate the correct code for a mega drop down menu.

I am looking to get code like this:

Code: Select all

<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li>
    	<a href="#" class="products">Products</a>
        <div class="sub">
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>

Everything I try results in the <div class="sub"> being repeated with the <ul> of the sub menu.

Thanks.

Posted: **Sun Jul 17, 2011 2:34 pm**

Why do you need the div?...

Posted: **Sun Jul 17, 2011 10:39 pm**

Trying to make a menu manager template that works with this
http://www.sohtanaka.com/web-design/meg ... ss-jquery/

Not how I would do it but the client wants what the client wants.

Gotten this far

Code: Select all


{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul id="topnav">



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

{if $node->depth ==2}
<div class='sub'>
<ul class='TEST'>
{/if}

{elseif $node->depth == 2}




{if $node->depth ==2}
</ul>
</div>
{/if}


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


{elseif $node->depth == 2}</li></div></li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  
  
  {if $node->depth == 1}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
  {else}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a></li>
  {/if}

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}


  {if $node->depth == 1}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>
  {else}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a></li>
  {/if}


{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a></li>

{/if}

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

which generates

Code: Select all

<ul id="topnav">
    <li class="menuactive parent"><a class="menuactive parent" href="#"><span>Group 1</span></a>
	<div class='sub'>
		<ul class='TEST'>
			<li class="menuactive parent"><a class="menuactive parent" href="#"><span>A</span></a></li>
			<li><a href="#"><span>Item A1</span></a></li>
			<li><a href="#"><span>Item A2</span></a></li>
		</ul>
	
<!--BAD-->	
</div>

<!--NEED NEW UL -->
		
		<li class="#"><span>B</span></a></li>
		<li><a href="#"><span>Item B1</span></a></li>
		<li><a href="#"><span>Item B2</span></a></li>
<!-- EXTRA JUNK -->		
		</li></ul></li></ul>
		
		<li><a href="#"><span>Content 2</span></a></li>

</li>
</ul>

Posted: **Sun Oct 02, 2011 8:50 pm**

This?...

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.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. *}

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
{assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<div class="sub"><ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul></div>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
{assign var='classes' value='menuactive'}
{if $node->parent == true}
{assign var='classes' value='menuactive menuparent'}
{/if}
{if $node->children_exist == true and $node->depth < $number_of_levels}
{assign var='classes' value=$classes|cat:' parent'}
{/if}
<li class="{$classes}"><a class="{$classes}"
{elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="menuparent"><h2><a class="menuparent"><span class="sectionheader">{$node->menutext}</span></a></h2>
{elseif $node->type == 'sectionheader'}
<li><a ><span class="sectionheader">{$node->menutext}</span></a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="menuparent"><a class="menuparent"
{else}
<li>
<a
{/if}

{if ($node->type != 'sectionheader' and $node->type != 'separator') or $node->parent == true or $node->current == true }
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

CMS Made Simple Forums

Mega Drop Down Menus Template

Mega Drop Down Menus Template

Re: Mega Drop Down Menus Template

Re: Mega Drop Down Menus Template

Re: Mega Drop Down Menus Template