problema con menu (RISOLTO)

[gdinfo]

Salve a tutti,
il template è il simple_navigation.tpl, il problema è un lieve spostamento della grafica quando si clicca su una delle voci principali del menù. La voce attiva è più alta delle altre.

Grazie.

Il foglio stile è il seguente:

/********************
MENU
*********************/
#menu_vert {
   padding-left: 0;
   margin-left: 0.3em;
}


/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
   padding-bottom: 0.5em;
}

/* menu li block */
#menu_vert li {
   list-style: none;
   margin: 0;
   border-bottom: 1px solid #c0c0c0;
   display: block;
}

#menu_vert ul ul li {
   border: none;

}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/

/* first level links */
div#menu_vert a {
   font-size: 95%;
   text-decoration:none; /* no underline for links */
   display: block; /* IE has problems with this, fixed above */
   padding: 0.5em 0.5em 0.5em 1.7em; /* some air for it */
   color: #555; /* this will be link color for all levels */
   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;

}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
   font-size: 80%;
   padding: 0.5em 0.5em 0.5em 2.8em;
   background: url(images/cms/dash.gif) no-repeat 1.5em center;
   display: block;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
   padding: 0.5em 0.5em 0.5em 4.3em;
   background: url(images/cms/dash.gif) no-repeat 2.8em center;
}

/* hover state for all links */
div#menu_vert a:hover {
   color: #d60026;
}
div#menu_vert a.activeparent:hover {
   color: #d60026;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
   background-color: #fff;
   color: #d60026;
}

div#menu_vert ul ul li a.activeparent {
   background-position: 1.5em center;
   background-color: transparent;
   color: #555;
}


/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
   background-color: #fff;
   display: block;
   padding: 0.5em 0.5em 0.5em 1.7em;  /* some air for it */
   color: #d60026;                                 /* this will be link color for all levels */
   font-size: 95%;
   font-weight: normal;                           /* instead of the normal font size for */
   margin: 0;                                  /* as normally has some margin by default */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
   font-size: 80%;
   display: block;
   padding: 0.5em 0.5em 0.5em 2.8em;
   background-position: 1.5em center;
   background-color: transparent;
/*   border-bottom: none; */
   color: #000;     
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
   padding: 0.5em 0.5em 0.5em 4.3em;
   background: url(images/cms/arrow-right-active.gif) no-repeat 2.7em center;
}

/* section header */
div#menu_vert li.sectionheader {
   border-right: none;
   font-size: 130%;
   font-weight: bold;
   padding: 1.5em 0 0.8em 0;
   background-color: #fff;
   line-height: 1em;
   margin: 0;
   text-align:center;
}



/* separator */
div#menu_vert li.separator {
   height: 1px !important;
   margin-top: -1px;
   margin-bottom: 0;
   padding:2px 0 2px 0;
   background-color: #000;
   overflow:hidden !important;
   line-height:1px !important;
   font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
   display: none; /* this is for accessibility */
}

[alby]

Salve a tutti,
il template è il simple_navigation.tpl, il problema è un lieve spostamento della grafica quando si clicca su una delle voci principali del menù. La voce attiva è più alta delle altre. Questo è il link per vedere l'effetto:

A me sembra più basso e solo con IE 

Dal sorgente:

Code: Select all

<li><a href="http://demo.gdnet.it/milesi/index.php?page=fiere-e-saloni-2"><dfn>4: </dfn>Fiere e saloni</a>
</li>
<li class="currentpage"><h3><dfn>Current page is 5: </dfn>Press</h3>
</li>

La classe currentpage non esiste 
Io non userei per il current  div#menu_vert h3 {  ma una del tipo  div#menu_vert li.currentpage {
sia per coerenza con le altre classi del menu e sia che il tag h3 potrebbe comportarsi in maniera diversa fra i browser

Alby

[gdinfo]

Grazie Alby,
sostituito h3 con classe .currentpage ed in effetti adesso il problema è scomparso.  Ne è comparso un altro: ora, cliccando sulla prima voce del menù (l'unica che ha figli) la freccina rossa si sposta al centro del blocco.


Grazie ancora.

La modifica che ho fatto al foglio stile è la seguente:

div#menu_vert ul li.currentpage {
   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
   background-color: #fff;
   display: block;
   padding: 0.5em 0.5em 0.5em 1.7em; 
   color: #d60026;                               
   font-size: 95%;
   font-weight: normal;                           
   margin: 0;                                 
}

div#menu_vert ul ul li.currentpage {
   font-size: 80%;
   display: block;
   padding: 0.5em 0.5em 0.5em 2.8em;
   background-position: 1.5em center;
   background-color: transparent;
/*   border-bottom: none; */
   color: #000;     
}

[gdinfo]

Ho forse capito perchè nel "simple_menu.tpl" è stato usato un tag (non l'avevo inserito io, l'ho trovato nell'originale).

Guardando l'HTML del menù, ho visto che il tag li corrispondente alla classe currentpage non viene chiuso a fine riga ma alla fine del blocco dei figli.  In questo modo, qualsiasi attributo venga impostato, questo agisce sull'intero blocco.

Quindi la sequenza degli interventi è stata:

1. ho provato prima a togliere il tag dal simple_navigation.tpl e gestire il tag ul li.currentpage
qui ho risolto il primo problema ma ho inserito il secondo descritto nel post precedente.

2.  ho messo un tag diverso da h3 (ho usato ) ed il problema è scomparso.

Il simple_navigation originale:

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *}

{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->current == true}
Current page is {$node->hierarchy}: {$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->hierarchy}: {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}


{else}
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 != ''} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}

{/if}

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

{/if}

la riga che ho sostituito:

Current page is {$node->hierarchy}: {$node->menutext}

con:

Current page is {$node->hierarchy}: {$node->menutext}

infine lo stile:

div#menu_vert ul li.currentpage code{
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; /* forza un curier */
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
  background-color: #fff;
  display: block;
  padding: 0.5em 0.5em 0.5em 1.7em; 
  color: #d60026;                               
  font-size: 95%;
  font-weight: normal;                         
  margin: 0;                                 
}

div#menu_vert ul ul li.currentpage code{
  font-size: 80%;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding: 0.5em 0.5em 0.5em 2.8em;
  background-position: 1.5em center;
  background-color: transparent;
  color: #000;   
}

[alby]

Ho forse capito perchè nel "simple_menu.tpl" è stato usato un tag (non l'avevo inserito io, l'ho trovato nell'originale).

Guardando l'HTML del menù, ho visto che il tag li corrispondente alla classe currentpage non viene chiuso a fine riga ma alla fine del blocco dei figli.  In questo modo, qualsiasi attributo venga impostato, questo agisce sull'intero blocco.
.............

Molto bravo 

Alby

[gdinfo]

Ho inserito qualche modifica al foglio stile da utilizzare con il template simple_navigation.tpl. 
Sono stati eliminati gli effetti di movimento verticale delle righe su click. 
Dopo vari tentativi ho dovuto ritornare al  tag h3 originale inserendo gli opportuni attributi di correzione.
Non essendo un esperto di CSS forse il foglio non è "pulito".

/********************
MENU (simple_navigation.tpl)
*********************/

#menu_vert {
  padding-left: 0;
  margin-left: 0.3em;

}

/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
  padding-bottom: 0em;
}

/* menu li block */
#menu_vert li {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid #c0c0c0;
  display: block;
}

#menu_vert ul ul li { 
  border: none;          /* toglie il bordo ai figli */
}

/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/

/* first level links */
div#menu_vert a {
  font-size: 95%;
  text-decoration:none; /* no underline for links */
  display: block; /* IE has problems with this, fixed above */
  padding: 0.5em 0.5em 0.5em 1.7em; /* some air for it */
  color: #555; /* this will be link color for all levels */
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;

}

/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
  font-size: 80%;
  padding: 0.5em 0.5em 0.5em 2.8em;
  background: url(images/cms/dash.gif) no-repeat 1.5em center;
  display: block;
}

/* third level links, more padding */
div#menu_vert ul ul ul a {
  padding: 0.5em 0.5em 0.5em 4.3em;
  background: url(images/cms/dash.gif) no-repeat 2.8em center;
  font-weight: normal;
 
}

/* hover state for all links */
div#menu_vert a:hover {
  color: #d60026;
}
div#menu_vert a.activeparent:hover {
  color: #d60026;
}

/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
  background-color: #fff;
  color: #d60026;
}

div#menu_vert ul ul li a.activeparent {
  background-position: 1.5em center;
  background-color: transparent;
  color: #555;
}

/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/

div#menu_vert ul h3 {
  font-size: 95%;
  text-decoration:none;                              /* no underline for links */
  display: block;
  padding: 0.5em 0.5em 0.5em 1.7em;          /* some air for it */
  color: #d60026;                                      /* this will be link color for all levels */
  background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
  margin: 0;                                              /* no margin h3 */
  padding-top: 2px;                                    /* no spostamento in verticale */
  padding-bottom: 2px;
  font-weight: normal;
  line-height: 20px;                                    /* no spostamento in verticale */
}

/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
  font-size: 80%;
  padding: 0.5em 0.5em 0.4em 2.8em;
  background-position: 1.5em center;
  background-color: transparent;
  color: #d60026; 
  font-weight: normal;
  line-height: 13px; 
}

/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
  padding: 0.5em 0.5em 0.4em 4.3em;
  background: url(images/cms/arrow-right.gif) no-repeat 2.7em center;
}

/* section header */
div#menu_vert li.sectionheader {
  border-right: none;
  font-size: 130%;
  font-weight: bold;
  padding: 1.5em 0 0.8em 0;
  background-color: #fff;
  line-height: 1em;
  margin: 0;
  text-align:center;
}



/* separator */
div#menu_vert li.separator {
  height: 1px !important;
  margin-top: -1px;
  margin-bottom: 0;
  padding:2px 0 2px 0;
  background-color: #000;
  overflow:hidden !important;
  line-height:1px !important;
  font-size:1px; /* for ie */
}

div#menu_vert li.separator hr {
  display: none; /* this is for accessibility */
}