Page 1 of 1

[solved] assign incremental class to menu <li>

Posted: Wed May 09, 2007 10:01 am
by mox
Hi,
I don't know how resolve this question:
I have a custom menu that is a grid of squares, where every and all item are in top level and there are one menu item for every square;
I need a different, maybe incremental numbered, class for every item, becouse I need to assign a different border for every square

the grid:
Image

the template (i need to work on tag)
* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


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

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
type == 'sectionheader'}
        {$node->menutext}
{elseif $node->type == 'separator'}
       
{else}
type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->type == 'sectionheader'}
>{$node->hierarchy}: {$node->menutext}
{/if}

{/foreach}

{repeat string="" times=$node->depth-1}



{/if}

the style:
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
  margin-left: 1px;
  margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
  background-color: #fff;
/* provare a mettere una immagine per i bordi
  border-right: 1px solid #000;
  border-left: 1px solid #f00; */
  width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
  width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#primary-nav ul {
  position: absolute;
  top: auto;
  display: none;
}
#primary-nav ul ul {
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}

#primary-nav li {
  height: 75px;
  width: 75px;
  border-right: 2px solid #aed9e9;
  border-bottom: 2px solid #aed9e9;
  margin-left: -1px;
  float: left;
}

#primary-nav li li {
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
  color: #006699;
}
#primary-nav li a {

}
#primary-nav li li a {
  border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
  background-color: #fff;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
  background-color: #C7C7C7;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #aed9e9;
  color: #000;
  height: 95px;
  width: 95px;
  padding-left: -10px;
  padding-bottom: -10px;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}


/* IE Hacks */
#primary-nav li li {
  float: left;
  clear: both;
}
#primary-nav li li a {
  height: 1%;
}

Re: assign incremental class to menu <li>

Posted: Wed May 09, 2007 10:35 am
by KO
if you add id="{$node->alias}" to your menu template where ever you want it, it will give alias as a id and you will can style it with css.
if you add id="{$node->id}" it would give id number of the page.

so for example alias}"> in your template would print alias as id. Experimenting with menu template hopefully brings what you want to achieve.

br,

K

Re: assign incremental class to menu <li>

Posted: Wed May 09, 2007 11:40 am
by mox
Thanks a lot... :)

When you know, all is simple

I think is better that I incoming to learn some php  ;)

Re: [solved] assign incremental class to menu <li>

Posted: Wed May 09, 2007 2:27 pm
by KO
You're welcome.

Yes it would be nice to know php as well. This was smarty which I know very little but it would be nice to know more of it as well.