Help to generate menu (smarty)

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Recon
Forum Members
Forum Members
Posts: 200
Joined: Sat Oct 09, 2010 10:23 am
Location: Finland

Help to generate menu (smarty)

Post by Recon »

Ok,

I have tried to generate navigation from menu template. Need tips :)

What I have tried to get is this:

Code: Select all

            
<ul class="nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
   </li>
</ul>

Whith cmsms' default menu template which I have a few changes:

Code: Select all

{if $count > 0}
<ul class="nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{*repeat string="<ul>" times=$node->depth-$node->prevdepth - REMOVED*}
<li class="dropdown">
<a href="#" class="dropdown-toggle">{$node->menutext}</a>
<ul class="dropdown-menu">

{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" class="active"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

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

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

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

{/if}

{/foreach}

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

I get this. It will generate dropdown to wrong place. And also </li> is missing. I can't get any further. Tips please...

Code: Select all

<ul class="nav">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#">Dropdown</a>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle">Action</a>
    <ul class="dropdown-menu">
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
    </ul>
  </li>
</ul>

-R
Wishbone
Power Poster
Power Poster
Posts: 1368
Joined: Tue Dec 23, 2008 8:39 pm

Re: Help to generate menu (smarty)

Post by Wishbone »

I'm not much help here, but I hardly ever have to modify my menu template. I try to have my menu be a pure unordered list, with the default classes for active, etc.

If I wrap it with a <div id="nav"> or <nav> (for html5), I can address each item in it purely with css selectors.. e.g.:

/* First level */
#nav ul > li {
}

/* second level */
#nav ul > li > ul > li {
}

etc.
Post Reply

Return to “Layout and Design (CSS & HTML)”