martes, 21 de julio de 2009

Menú dinámico / activo con categorías y sub-categorías en PHP y CSS

Después del post (Menú activo con CSS y PHP), me llego una pregunta sobre cómo mantener seleccionada la categoría, tras haber dado click en una sub-categoría, es decir:

Tengo un menú horizontal, el cual tengo las categorías principales: Inicio - Servicios - Portafolio, a su vez tengo un menú vertical con las sub-categorías, ejemplo: Servicios -> Desarrollo web, quiero mantener activo el item de la categoría y además el item de la sub-categoría al entrar a ella.

¿Cómo se hace esto?

Tomaremos como ejemplo el CSS del post anterior para dar diseño a nuestros menus, de tal forma que quedará lo siguiente:

#menu, #menu-vertical{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;

}

#menu ul{
font: bold 11px Arial;
margin:0;
margin-left: 20px;
padding: 0;
list-style: none;

}

#menu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;

}

#menu-vertical li{
display:block;
margin: 15px 0 0 0;
padding: 0;
text-transform:uppercase;
}

#menu a {
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margenes entre el menu*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Color por Default*/
border-bottom: 1px solid white;
}

#menu-vertical a {
color: white;
margin-left:0px;
padding:5px;
text-decoration: none;
letter-spacing: 1px;
background-color: black; /*Color por Default*/
border-bottom: 1px solid white;
}

#menu a:hover{
background-color: #535353; /*Menu hover bgcolor*/
}

#menu #current a, #menu-vertical #current a{ /*TAB seleccionado, Página Actual*/
background-color: #80931D;
border-color: #80931D;

}
.clean {clear:both;}

HTML

<div id="menu">
<ul>
<li <?php Menu("/lab/menuactive/active-menu.php","");?> ><a href="active-menu.php" title="Inicio" class="active">INICIO</a></li>
<li <?php Menu("/lab/menuactive/active-menu2.php",""); ?> ><a href="active-menu2.php" title="segundo" class="active">SEGUNDO</a></li>
</ul></div>
<div class="clean"></div>
<div id="menu-vertical">
<ul>
<li <?php Menu("/lab/menuactive/active-menu.php","/lab/menuactive/active-menu-principal.php"); ?> ><a href="active-menu-principal.php" title="Inicio" class="active">Principal</a></li>
<li <?php Menu("/lab/menuactive/active-menu.php","/lab/menuactive/active-menu-principal2.php"); ?> ><a href="active-menu-principal2.php" title="segundo" class="active">Secundario</a></li>

<li <?php Menu("/lab/menuactive/active-menu2.php","/lab/menuactive/active-menu-principal3.php"); ?> ><a href="active-menu-principal3.php" title="Inicio" class="active">Principal de Segundo</a></li>
</ul></div>


- La función de Menu trabaja con 2 parametros, el 1. es la categoría, 2. la sub-categoría. Se incluye entre las listas, porque imprimirá el id=current, el cual indica que esta el item activado. En las categoría se deja en blanco el parametro de sub-categoría por obvias razones, pero para la subcategoría es importante agregar la categoría y el enlace a la sub-categoría misma del item.

PHP

function Menu ($direccion,$subdireccion) {

/* El array $secciones, mantiene los enlaces de las categorías y sub-categorías,
active-menu.php es la categoría que tiene como sub-categorías a active-menu-principal.php
y active-menu-principal2.php, es ahí donde debes agregar las sub-categorías, para que
funcione el script. */

$secciones = array(
"/lab/menuactive/active-menu.php" => array (
"/lab/menuactive/active-menu-principal.php",
"/lab/menuactive/active-menu-principal2.php"
),

"/lab/menuactive/active-menu2.php" => array (
"/lab/menuactive/active-menu-principal3.php"
)
);


//Obtiene el URL actual
$url = $_SERVER['PHP_SELF'];

//Aquí es donde se hace la magía
foreach ($secciones as $llave=>&$valor)
{

if($direccion==$llave && $subdireccion==$url){
echo 'id="current"';
}

if($direccion==$llave && $subdireccion==""){
foreach ($valor as $valores){
if($url==$valores or ereg($direccion,$url))
echo 'id="current"';
}
}
}
}
DESCARGAR ARCHIVOS
Ojo: Debes cambiar la dirección URL (ruta) de tus enlaces (ejemplo: /lab/menuactive por la ruta en donde coloques tus archivos)

Ejemplo funcionando: