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:
HTML
#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;}
<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>
PHP
function Menu ($direccion,$subdireccion) {DESCARGAR ARCHIVOS
/* 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"';
}
}
}
}
Ojo: Debes cambiar la dirección URL (ruta) de tus enlaces (ejemplo: /lab/menuactive por la ruta en donde coloques tus archivos)
Ejemplo funcionando:
¿Cómo hacer un menú activo (current / active) ?
