dynamic menu

Tuesday 15 February 2005 12:51:12 pm

heya!

There are a lot of very different answerers to your vague question.

I would highly recommend writing at least a solid paragraph explaining what exactly you want your "dynamic menu" to look like, function, etc.

Because without more information, it's hard to really understand just what your expectations are, let alone your requirements.

A lot of people use a lot of different menu navigation implementations.

* Some simply use the default eZ publish navigation / templates.
* A lot more build their own navigation from scratch using the eZ publish template language, which is very powerful and flexible.
* I remember eZ publish comes with some lesser known navigation templates / components but I've never actually seen any documentation on how to use them.
* Still others use some of the eZ publish navigation contributions, like the treemenu component.

//kracker

Eyedea And Abilities : E And A : Star Destroyer
Sage Francis : A Healthy Distrust : Jah Didn't Kill Johnny

Member since: 2001.07.13 || http://ezpedia.se7enx.com/

Tuesday 15 February 2005 7:58:01 pm

yas yas,

That seems like a fairly simple task.
What task you ask?
Including a static menu
Well, this is what we do ...

<i>These are abbreviated instructions (fyi)</i>, which require you to be at least familiar with some of the basics of how to use eZ publish. If after reading this your still a little intimidated this set of flash video tutorials might help bring you up to speed.
http://ezpub.co.uk/tutorials/basic_design
http://ezpub.co.uk/tutorials/basic_design/1_look_and_feel

1. Using the Administrator, Create an override for the main page layout file " pagelayout.tpl "
** example url to page to do this: /index.php/visual/templateview/pagelayout.tpl
** Be sure to select "Copy of default template"

2. Edit the override template you have just created.

3. At this point you can simply drop the menu code (above) you wish to use where it best suites your needs.

4. (Optional) If your up for a small challenge, I would not put the menu code directly into your override, I would instead place an include line (below) to include the menu code into from a separate file to reduce clutter in the pagelayout.tpl file and maintain it's modularity and future maintainability.

* Include line:

{include uri="design:menus/static_header.tpl"}

This will require you to create a separate file to hold the menu code (example : menus/static_header.tpl).

* My example even goes a step further and places the menu file into a sub directory ( menus/ ). Sadly I only know how to do this step by connecting to to the server via ftp or ssh.

* Connect to your server and start by changing directories to /path/to/ezpublish/design/(your site design name)/templates/

* Create a directory called menus/
* Open the newly created menus/ directory
* Create a new text file called static_header.tpl
* Paste your menu code into the file, save the file
* Clear your site's cache, you can do this via the administrator:
** example url to page to do this: /index.php/setup/cache (clear all cache)

Step 4 is a best practice technique, not a required step. Still those who use eZ publish for a while begin to see rather quickly why little techniques like this are a very powerful methodology for creating clean, modular and flexible templates.

cheers,
//kracker
I'm not a player, I just talk **** a lot.

Korn : Shoots & Ladders
Kottonmouth Kings : Kings Blend
Bloodhound Gang: Fire Water Burn
http://www.deadtroll.com/video/helldeskcable.html

Member since: 2001.07.13 || http://ezpedia.se7enx.com/

Friday 18 February 2005 4:20:28 am

Use the following template code

<ul id="nav">
  {section loop=fetch( 'content','list', hash( 'parent_node_id',2))}
    <li>{node_view_gui content_node=$:item view='text_linked'}
       <ul>
<li>aa</li>
           {section loop=fetch( 'content','list', hash( 'parent_node_id',$:item.node_id))}
             <li>{node_view_gui content_node=$:item view='text_linked'}
              <ul>
                  {section loop=fetch( 'content','list', hash( 'parent_node_id',$:item.node_id))}
                    <li>{node_view_gui content_node=$:item view='text_linked'}</li>
                   {/section}
               </ul>
             </li>
           {/section}
       </ul>
    </li>
 {/section}
</ul>

And the CSS/JS from www.htmldog.com/articles/suckerfish/dropdowns/ to get something like www.htmldog.com/articles/suckerfish/dropdowns/example

Visit http://triligon.org

Friday 18 February 2005 5:20:56 am

Here is the final version of my dynamic menu (using CSS instead of Javascript for browser compatibility). Works on EZ Publish 3.4.4

menu.tpl :

<div id="holdm">
<ul id="nav">
{let page_limit=10
     children=fetch('content','list',
                    hash(parent_node_id,2,
                    limit,$page_limit,
                    offset,$view_parameters.offset,class_filter_type, "include", class_filter_array, array(1)))
     child_count=fetch('content','list_count',hash(parent_node_id,$node.node_id,class_filter_type, "include", class_filter_array, array(1)))}
 
{section name=Child loop=$children last-value}
    <li>
        <a href={$Child:item.url_alias|ezurl}>{$Child:item.name}</a>
    
        {let sub_children=fetch('content','list',hash(parent_node_id,$Child:item.node_id,limit,$page_limit,class_filter_array, array(1)))
            sub_child_count=fetch('content','list_count',hash(parent_node_id,$Child:item.node_id,class_filter_type, "include", class_filter_array, array(1)))}

        {section show = $:sub_child_count|gt(0)}
        <ul>
            {section name=SubChild loop=$:sub_children last-value}
                
                    <li>
                        <a href={$:item.url_alias|ezurl}>{$:item.name}</a>
                        
                        {let sub_sub_children=fetch('content','list',hash(parent_node_id,$:item.node_id,limit,$page_limit,class_filter_type, "include", class_filter_array, array(1)))
                          sub_sub_child_count=fetch('content','list_count',hash(parent_node_id,$:item.node_id,limit,$page_limit,class_filter_type, "include", class_filter_array, array(1)))}
                        {section show = $:sub_sub_child_count|gt(0)}
                            <ul>
        
                            {section name=sub_SubChild loop=$:sub_sub_children last-value}
                                
                                    <li>
                                        <a href={$:item.url_alias|ezurl}>{$:item.name}</a>
                                    </li>
                                
                            {/section}
                           
                            </ul>
                        {/section}
                        {/let}
                        
                        
                        
                    </li>
                
            {/section}
             
            </ul>
        {/section}
        {/let}
    </li>
{/section}

{/let}
</ul>
</div>
<SCRIPT language="javascript" type="text/javascript" src={"javascripts/multimenu.js"|ezdesign}></SCRIPT>

multimenu.js

activateMenu = function(nav) {
	if (document.all && document.getElementById(nav).currentStyle) {  
		var navroot = document.getElementById(nav);
        /* Get all the list items within the menu */
        var lis=navroot.getElementsByTagName("LI");  
		for (i=0; i<lis.length; i++) {
            /* If the LI has another menu level */
            if(lis[i].lastChild.tagName=="UL"){
                /* assign the function to the LI */
             	lis[i].onmouseover=function() {		
                   /* display the inner menu */
                   this.lastChild.style.display="block";
      			}
				lis[i].onmouseout=function() {                       
                    this.lastChild.style.display="none";
				}
            }
		}
	}
}

window.onload= function()
{
    activateMenu('nav'); 
}

multimenu.css

#holdm{position:absolute; top:67px; left:0px; margin-left:auto; z-index:100; }

#nav{
	list-style: none;
	}

 #nav ul { 
	padding: 0;
	margin:0;
	list-style: none;
    width:12.5em;
    z-index:99;
    position:relative;
    overflow:visible;  
	background-color:#FFFFFF;
	
   }

#nav li { 
    margin:0;   
    position: relative; 
    float:left;
	width: 12.5em;
    display:block;
    height:auto;
	background-color:#E5E5E5; 
}
 
#nav a {
    text-decoration:none; 
    display:block;
    padding: 0.1em;  
    margin:0.2em 0 0.2em 0.1em; 
    background-color:#E5E5E5;
    width:12em; 
    height:1em;
	 font-weight:bold ;
}

#nav a:hover{
    background-color:#FFFFFF; 
    color:#333333;
    background-image:none;
	 font-weight:bold ;
}

#nav ul{
    display:none;   
}

/*all see this */
#nav ul ul, #nav ul ul ul{
    display:none; 
    position:absolute; 
    margin-top:-1.8em; 
    margin-left:12em;
}

/* non-IE browsers see this */
 #nav ul li>ul, #nav ul ul li>ul{
    margin-top:-1.4em; 
 }

#nav li:hover ul ul, #nav li:hover ul ul ul{
    display:none; 
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
    display:block;
}

li>ul { 
	top: auto;
	left: auto;
}