Forums / Setup & design / dynamic menu

dynamic menu

Author Message

yas yas

Tuesday 15 February 2005 12:23:31 pm

hello

I will like to integrate a dynamic menu into ezpublish

which file have I to publish?

thank you for your assistance

cordialement

kracker (the)

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/

yas yas

Tuesday 15 February 2005 1:58:25 pm

hello again

I found this menu
visible here : http://iubito.free.fr/prog/menu.php

in which file ez publish then I to integrate this code?
must I publish several files?
thank you infinitely

in section <head></head>, it is necessary to put :

<script language="javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css">

after the <body>, to place the following code :

<!-- ici on mettrait un <div style="float:left;" id="conteneurmenu">
mais l'affichage du menu dans un premier temps, puis son positionnement
par le javascript donne un effet desagréble de clignotement.
Voici l'astuce pour l'éviter. -->
<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">
preChargement();
</script>
<p id="menu1" class="menu"
onmouseover="MontrerMenu('ssmenu1');"
onmouseout="CacherDelai();">
<a href="http://iubito.free.fr"
onfocus="MontrerMenu('ssmenu1');">iubito.free.fr<span> :</span></a>
</p>
<!-- Si vous ne voulez pas de sous menu ne mettez pas de
<ul></ul> tout simplement -->
<ul id="ssmenu1" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li>
<a href="/">Accueil<span> ;</span></a>
</li>
<li>
<a href="/livre/">Livre d'Or<span> ;</span></a>
</li>
<li>
<a href="/annu/">Annuaire<span> ;</span></a>
</li>
<li>
<a href="javascript:addFav();">Ajouter aux favoris<span>.</span></a>
</li>
</ul>

 

</div>
<script language="Javascript"
type="text/javascript">
// Vous pouvez éventuellement changer des variables ici (nbmenu...)
// voir la configuration du menu plus bas.
Chargement();</script>

kracker (the)

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/

yas yas

Friday 18 February 2005 3:32:23 am

hello kracker

thank you very much for these excellent explanations.

I followed your indications:

- Resource of template per defect: design/base/templates/pagelayout.tpl

- The new file of template (pagelayout.tpl) will be placed in: design/mysite/override/templates/pagelayout.tpl

you advise me:

" Paste your finely code into the file, save the file"

Must I use the language ez publish or right to stick my code Ci above? could you help me to stick this code in this file?

I enormously thank you for your assistance

Gabriel Ambuehl

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

yas yas

Friday 18 February 2005 5:07:28 am

thank you gabriel

Must I integrate Css into this static header file or create a new file Css which I will put in the repertory stylesheets ?

excuse my questions. I begin...

Lex 007

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;
}

Endre Solem

Wednesday 02 March 2005 6:04:11 am

Hello all.

I have just implemented the menu that @Lex have posted here.
It works great in IE and for the most part in Firefox. The only problem I have is that some of the dropdown areas is above an contentarea that have the css param overflow set to auto. If I do this, the menu won't allow me to move the mousepointer to that part of the menu.

Anyone understand what I ment? any suggestions?

Endre