Page 1 of 1

Insert ID for horizontal drop line menu

Posted: Wed Jul 07, 2010 3:37 am
by ngoncom
Dear masters!

I want to have a horizontal drop line menu and I want align it base on parent menu, here is structure:



    parent 1
    parent 2
    parent 3
         
              submenu 3.1
              submenu 3.2
              .....
         
   
    parent 4
    parent 5
         
              submenu 5.1
              submenu 5.2
              .....
         
   
    parent 6



So, I'd like insert ID for when menu has submenu to align it by css, can it possible?.

Thank masters!

Re: Insert ID for horizontal drop line menu

Posted: Wed Jul 07, 2010 9:14 am
by Dr.CSS
First off ID or class can't use numbers, you will need a letter in front of it...

You will need to import a menu template and customize it, first thing I would do is put numbers after or before every call in it to find which one to target then you can use the {counter} function to count the steps/amount of times it's cycled thru the so it would look like this...

  which will give you id='a1', id='a2' etc....

http://www.smarty.net/manual/en/languag ... ounter.php

Re: Insert ID for horizontal drop line menu

Posted: Wed Jul 07, 2010 10:49 am
by kermit
Yup, IDs cannot start with a number... they should also be unique on a page. So, you need to use classes instead of IDs or use two "prefixes", one for the UL submenus, the other for the actual menu items.. example below, based on minimal_menu.tpl, uses the latter.

Code: Select all

{* 
entire menu is <ul id="menu">
nested submenus are <ul id="menu_N"> where N equals hierarchy position of parent
menu items are <a id="position_N"> where N equals hierarchy position
(where menu item is not a link, the <li> is assigned the id instead)
dashes replace dots, e.g. <a id="position_2-1-3">
*}

{if $count > 0}
<ul id="menu">
{foreach from=$nodelist item=node}
  {if $node->depth > $node->prevdepth}
    {repeat string="<ul id=\"menu_`$prevlevel`\">" 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}

{assign var='prevlevel' value=$node->hierarchy|replace:'.':'-'}

{if $node->current == true}
<li><a href="{$node->url}" id="position_{$node->hierarchy|replace:'.':'-'}" class="currentpage"{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}" id="position_{$node->hierarchy|replace:'.':'-'}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader" id="position_{$node->hierarchy|replace:'.':'-'}">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;" id="position_{$node->hierarchy|replace:'.':'-'}"> <hr class="separator" />

{else}
<li><a href="{$node->url}" id="position_{$node->hierarchy|replace:'.':'-'}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

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

Re: Insert ID for horizontal drop line menu

Posted: Thu Jul 08, 2010 3:21 am
by ngoncom
My sincerely thank Admin and Kermit very much!

Now, I can do it myself  :D