Insert ID for horizontal drop line menu

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
ngoncom
Forum Members
Forum Members
Posts: 19
Joined: Fri Jun 11, 2010 7:55 am

Insert ID for horizontal drop line menu

Post 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!
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Insert ID for horizontal drop line menu

Post 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
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Insert ID for horizontal drop line menu

Post 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}
Last edited by kermit on Wed Jul 07, 2010 11:00 am, edited 1 time in total.
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
ngoncom
Forum Members
Forum Members
Posts: 19
Joined: Fri Jun 11, 2010 7:55 am

Re: Insert ID for horizontal drop line menu

Post by ngoncom »

My sincerely thank Admin and Kermit very much!

Now, I can do it myself  :D
Post Reply

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