Navigation menu. How does site menu look?

Author Message

Yauheni Lapanau

Thursday 06 May 2004 4:19:36 am

How does site menu look?

1. To give precise concept about the current site, focuss the user on a site, does not allow it to lose the way
2. Not deduce the superfluous link to the current page, that at all does not decorate the future site. We need to compare URI the unit on which we are going to put the reference, with current URI. In a case if they coincide, the reference to section to put it is not necessary.
3. To have treelike structure, levels of an enclosure.

I have code

<ul>
    {let mainMenu=treemenu( $module_result.path, $module_result.node_id, 
    array('folder','info_page'), 1, 6 )} {section var=menu loop=$mainMenu} 
    {section show=$menu.item.is_selected} 
    <li class="level_{$menu.item.level}"> 
    <div class="selected"> {$menu.item.text} </div>
    </li>
    {section-else} 
    <li class="level_{$menu.item.level}"> <a href={$menu.item.url_alias|ezurl}>{$menu.item.text}</a> 
    </li>
    {/section} {/section} {/let} 
</ul>

How to do tree like menu with this parameter?

par1
--books
----Tolstoy
----Pushkin
------Eugen_Onegin
------Metel
------Poltava
------<b>Story</b>
----Lermontov
----Tven
par2

Story - hasn't link, because this is current page.

Alex Jones

Thursday 06 May 2004 7:10:10 am

Well, I'm not positive that I understand your question, but if you want an example of the code needed to display anavigation menu like the one posted above, here is some code that I use for my site nav which is pretty close:

{let depth=3 
     docs=treemenu( $module_result.path, $module_result.node_id, array('folder','info_page','article'), 0, 6 ) 
     thisnode=fetch('content','node',hash('node_id',$module_result.node_id)) }
<ul class="Menu">

{section var=menu loop=$:docs last-value}
  {section show=and($menu.last.level|gt($menu.level),$menu.number|gt(1))}
    </ul>
    </li>
  {/section}
  <li>
  {section show=and($menu.last.level|lt($menu.level),$menu.number|gt(1))}
    <ul>
      <li>{/section}
     {set depth=$menu.level}<a href={$menu.url_alias|ezurl} {section show=eq($thisnode.name,$menu.text)}class="Selected"{/section}>{section show=eq($thisnode.name,$menu.text)}<strong>&raquo;</strong> {/section}{$menu.text|shorten(30)}</a></li>
   {/section}
   
  </ul>
  {section show=$depth|gt(1) loop=$depth|sub(1)}
  </li>
</ul>
{/section}
</li>
</ul>
{/let}

I use <i>{section show=eq($thisnode.name,$menu.text)}</i> to set a class of "Selected" to style the link to the current page via CSS. You can use the same detect to hide the link altogether if you wish.

Does this help?

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Yauheni Lapanau

Thursday 06 May 2004 10:09:49 am

Thaks, for the code. I want example of the code with requirements:
Don't show link to the curent node. Have tree like structure.
May you explain the main moments of the code?
But I don't understand, what does it mean "You can use the same detect to hide the link altogether if you wish."

Alex Jones

Thursday 06 May 2004 11:24:56 am

Sure thing. Here is the code with comments inserted. I have modified this code so it does not print out the link of the page that the user is currently viewing.

{*
Create the tree menu and tell it which classes of objects that it should display. This version will only show objects that are either a folder, an info page or an article. 
The '0' indicates that we want the menu to start at the root folder - change this to a different number to set it to start at a lower depth. The '6' indicates that the menu should
not show more than six levels deep. Again, this can be modified to show as many levels as you want.  

Also, set up the variable 'thisnode' which we will use to determine which node from the treemenu matches the currently viewed page.
*}
{let docs=treemenu( $module_result.path, $module_result.node_id, array('folder','info_page','article'), 0, 6 ) 
     thisnode=fetch('content','node',hash('node_id',$module_result.node_id)) }
<ul class="Menu">

{section var=menu loop=$:docs last-value} {* Loop through the results of $docs to write out the menu items *}
  {section show=and($menu.last.level|gt($menu.level),$menu.number|gt(1))} {* Check if the current menu item is the last one in its level. If it is, close the list tags *}
    </ul>
    </li>
  {/section}
  <li>
  {section show=and($menu.last.level|lt($menu.level),$menu.number|gt(1))}  {* Check if this item is the first one at its level. If it is, open the list tags. *}
    <ul>
      <li>{/section}
	  {* Print the menu item *}
     {set depth=$menu.level} {* Set the variable $depth to the current depth of the menu item *}
	 {section show=ne($thisnode.name,$menu.text)} {* If this menu item matches the current page, do not print the link, just print the name of the page *}
	   {$menu.text|shorten(30)}
	 {section-else} {* This menu item does not match the currently viewed page, so print out the link *}
	   <a href={$menu.url_alias|ezurl}>{$menu.text|shorten(30)}</a>
	 {/section} 
	 </li>
   {/section}
   
  </ul>
  {section show=$depth|gt(1) loop=$depth|sub(1)} {* If this is the absolute last item for the entire menu, print the final closing list tags *}
  </li>
</ul>
{/section}
</li>
</ul>
{/let}

Treemenu documentation: http://ez.no/ez_publish/documentation/reference/template_operators/miscellaneous/treemenu

Alex

Alex
[ bald_technologist on the IRC channel (irc.freenode.net): #eZpublish ]

<i>When in doubt, clear the cache.</i>

Yauheni Lapanau

Thursday 06 May 2004 1:39:33 pm

Thanks you for comments and good code.
I have change code in one place.

 

{section show=ne($thisnode.name,$menu.text)} 
   <a href={$menu.url_alias|ezurl}> {$menu.text|shorten(30)}</a>
 {section-else} 
   {$menu.text|shorten(30)}
 {/section}



I found some additional information about tree menu
http://ez.no/community/contributions/template_plugins/extension_treemenu_pubsvn

There are interesting parameter - Displayes Children of Nodes that are not highlighted.

and
http://ez.no/community/contributions/template_plugins/dynamic_menu_operator

I don't understand how can I use this extention?

What is the glossary extantion?

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.