Creamos nuestro menú básico como un listado HTML:
Código HTML :
<ul> <!-- Botón Inicio --> <li><a href="index.php">Inicio</a></li> <!-- Botón Quienes somos--> <li><a href="quienes_somos.php">Quienes somos</a></li> <!-- Botón Productos--> <li><a href="productos.php">Productos</a></li> </ul>
Hecho esto, necesitamos atribuir a la etiqueta <a></a> de cada página activa el CSS que la diferenciará de los otros links (los no activos). Pero si escribiéramos algo como esto:
Código HTML :
<li><a href="index.php" id="activo">Inicio</a></li>
no sería suficiente para que al hacer click en un link, éste se mostrara con el estilo del menú "activo", una vez cargada la página. Necesitamos algo que le diga al HTML "múestra este estilo si nos encontramos en determinada página". Pues bien, vamos a introducir el código PHP que hará ese trabajo; lo vamos a insertar en el ID de la etiqueta <a></a> para hacer que el CSS trabaje. Pero, ¿cómo lo haremos?
Con ayuda de un condicional if(); y de la función strstr();. Lo que hace esta última es buscar determinados caracteres que le pasemos en una cadena de texto que le indiquemos. Veamos el código:
Código PHP :
<li><a href="index.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'index.php')){
echo 'activo';
}
?>">Inicio</a></li>
¿Qué tenemos aquí? Lo que hicimos fue insertar en el atributo ID, donde generalmente suele ir un nombrecito CSS, una sentencia PHP que lo que hace es decir:
"Si en la dirección de la página (la cual es devuelta por $_SERVER['REQUEST_URI']) se encuentra la cadena de caracteres "index.php", entonces, por favor, muestra el texto "activo".
Dicho de otra forma, por medio de una condición if se pasa el valor "activo" al atributo ID de la etiqueta <a></a> SOLO SI estamos en la página "index.php". Demás está decir que el estilo "activo" debe estar definido en nuestro archivo CSS.
El menú completo debería verse ahora de esta forma:
Código PHP :
<!-- Botón Inicio -->
<li><a href="index.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'index.php')){
echo 'activo';
}
?>">Inicio</a></li>
<!-- Botón Quienes somos -->
<li><a href="quienes_somos.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'quienes_somos.php')){
echo 'activo';
}
?>">Quienes somos</a></li>
<!-- Botón Productos-->
<li><a href="productos.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'productos.php')){
echo 'activo';
}?>">Productos</a></li>
¿Y si tenemos un submenú?
Supongamos que en la página Productos tenemos dos o tres categorías de productos: Remeras, Zapatillas y Shorts (bien comercial la cosa). Con lo que hemos visto hasta aquí, podemos armar el segundo menú e insertarle el código PHP para que haga lo mismo que antes (quizás con otro ID para diferenciar el estilo del menú principal, por ejemplo "submenu_activo").
Código PHP :
<!-- Botón Remeras-->
<li><a href="remeras.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'remeras.php'))
{echo 'submenu_activo';
}
?>">Remeras</a></li>
<!-- Botón Zapatillas-->
<li><a href="zapatillas.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'zapatillas.php')){
echo 'submenu_activo';
}?>">Zapatillas</a></li>
<!-- Botón Shorts-->
<li><a href="shorts.php" id="
<?php if(strstr($_SERVER['REQUEST_URI'], 'shorts.php')){
echo 'submenu_activo';
}?>">Shorts</a></li>
Si lo hacemos así funcionará perfecto, sin embargo al hacer click en, digamos, Remeras, el bótón Productos ya no aparecerá con el id "activo" y recordemos que la página Remeras es una sub-página de Productos, por tanto lo lógico sería que mientras esté activo el botón Remeras también lo esté el botón Productos. El problema está en que al hacer click en los nuevos botones, ahora PHP está verificando sólo la nueva cadena que le hemos pasado. Entonces, para lograr diferenciar ambos botones del resto, debemos hacer una pequeña modificación al PHP del botón Productos en el primer menú. Simplemente vamos a agregar un elseif(); a Productos.
Código PHP :
<li><a href="productos.php" id="
<?php
if(strstr($_SERVER['REQUEST_URI'], 'productos.php')){
echo 'activo';
}
elseif{(strstr($_SERVER['REQUEST_URI'], 'remeras.php')){
echo 'activo';
}
elseif{(strstr($_SERVER['REQUEST_URI'], 'zapatillas.php')){
echo activo';
}
elseif{(strstr($_SERVER['REQUEST_URI'], 'shorts.php')){
echo 'activo';
}
?>">Productos</a></li>Ahora le hemos pasado 4 condiciones al link Productos, cualquiera que se cumpla mostrará el ID "activo" en dicho link. Así, quedan activados tanto el botón correspondiente del submenú como el botón del menú principal.
