[solved] Menu template to add classes to <li> & <a href>

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
jospanner
Forum Members
Forum Members
Posts: 105
Joined: Tue Mar 25, 2008 11:34 pm

[solved] Menu template to add classes to <li> & <a href>

Post by jospanner »

Hi
Sorry if this is a very basic question but I am new to this...
I am running CMSMS 1.9.4.3 "Faanui" and I want to use a simple javascript to 'slide' 2nd level menu <li> into view (similar to http://www.camlok.co.uk/).
The .Js code requires All <li> to be <li class="menuoption"> and All <a href""> to be <a class="menulink" href="">.
The end code being similar to

<ul>
<li class="menuoption"><a class="menulink" href="#">Item 1</a>
<ul>
<li class="menuoption"><a class="menulink" href="#">Item 1a</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 1b</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 1c</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 1d</a></li>
</ul>
</li>
<li class="menuoption"><a class="menulink" href="#">Item 2</a>
<ul>
<li class="menuoption"><a class="menulink" href="#">Item 2a</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 2b</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 2c</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 2d</a></li>
</ul>
</li>
<li class="menuoption"><a class="menulink" href="#">Item 3</a></li>
<li class="menuoption"><a class="menulink" href="#">Item 4</a></li>
</ul>


I have tried to write my own menu template to achieve this - but failed. I hope this makes sense and any help would be appreciated.
Last edited by jospanner on Thu Oct 20, 2011 8:34 pm, edited 1 time in total.
Jos
Support Guru
Support Guru
Posts: 4019
Joined: Wed Sep 05, 2007 8:03 pm

Re: Menu template to add classes to <li> & <a href>

Post by Jos »

Code: Select all

{if $count > 0}
<ul>
{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}

<li class="menuoption"><a class="menulink" href="{$node->url}">{$node->menutext}</a>

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
jospanner
Forum Members
Forum Members
Posts: 105
Joined: Tue Mar 25, 2008 11:34 pm

Re: Menu template to add classes to <li> & <a href>

Post by jospanner »

Oh quite brilliant ;D thankyou
sharebay
New Member
New Member
Posts: 2
Joined: Thu Oct 27, 2011 6:54 pm

Re: SOLVED Menu template to add classes to <li> & <a href>

Post by sharebay »

Hi dear people,

I am new in here.
Hey jospanner if you use ready template for your menu downloaded from internet please can you give me download link to the menu.

Thanks in advance.
jospanner
Forum Members
Forum Members
Posts: 105
Joined: Tue Mar 25, 2008 11:34 pm

Re: SOLVED Menu template to add classes to <li> & <a href>

Post by jospanner »

Hi sharebay - sorry of my own creating so no link available.
Post Reply

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