Menú activo con CSS y PHP (en 2 diferentes formas)

Por su dinamismo, el menú interactivo da mucha vida a una página web. El usuario de manera visual se da cuenta en que sección esta del sitio, sin necesidad de remarcar el titulo de dicha sección.

¿Cómo ocurre?

En enlace del menu se queda selecionando al momento que se le da click, indicando la página actual que se esta mostrando en pantalla.

Ejemplo: Aquí muestro un sistema de reporte de prácticas que estoy haciendo en PHP, AJAX, CSS, etc., el cual, si notan, esta seleccionado "Usuarios", y se esta mostrando la página de dicho titulo. Dentro de esta tengo un TAB, el cual al igual que el menú horizontal princiapl, esta haciendo lo mismo, pero de manera embebida.

¿Cómo hacer un menú activo (current / active) ?

Existen muchas maneras, pero yo las he hecho en 2 formas diferentes, en mi parecer una es más funcional que la otra, pero cada quien a su criterio las usará, que al final, se trata de hacer lo mismo.

Crearemos nuestro archivo CSS, donde personalizaremos nuestro menú. (OJO no se necesita conocer mucho de CSS para hacer este tipo de menús, la verdad!!. No les explicaré el código por su simpleza, pero si, tienen dudas, no duden en preguntar).

/* Horizontal menu */



#menu{

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 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 a:hover{

background-color: #535353; /*Menu hover bgcolor*/

}



#menu #current a{ /*TAB seleccionado, Página Actual*/

background-color: #80931D;

border-color: #80931D;

}

 

Ya teniendo nuestra hoja de estilo pasaremos a programar nuestro menú, para ello, explicaré la primera forma:

1. Menú activo con función:
Crearemos una función que nos indiqué si estamos en la página actual

function Menu($sitio) {

$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];

if(ereg($sitio,$url)) {echo 'id="current"'; }

} 

y el código de nuestro menú
<div id="menu"><ul><li <?php Menu('/practicas/index.php') ?> ><a href="index.php" title="Inicio" class="active">INICIO</a></li><li <?php Menu('/practicas/contacto.php'); ?> ><a href="contacto.php" title="Contacto" class="active">CONTACTO</a></li></ul></div>

Lo explico, la función llamada Menu, se manda ejecutar, recibiendo, la dirección del enlace, este se compara con la página actual que se este visuelizando en pantalla (por medio de HTTP_HOST y PHP SELF), si concuerdan estos dos (EREG), imprimirá/agregará el current (del CSS, quedando asi seleccionado.

Para mí esta es la mejor opción, porque trabaja con EREG (busca coincidencias), y no importa si nuestra página actual tiene envio de datos por GET, ejemplo: usuarios.php?id=3&cuenta=2, de todos modos servirá.

2. Menú activo con Array (vector)

Otra de las formas que conozco, es usar un array con las páginas que tenemos en nuestro sitio web.

$url=$_SERVER['REQUEST_URI']; //Obtengo la página actual

Después creo el Array:

$current = Array(

"index.php" => "Inicio",

"cuenta.php" => "Cuenta",

"usuarios.php" => "Usuarios"); 

Obtengo el valor:

$title=$current[$url];

Despues de esto, comparare lo que me esta devolviendo title, en cada enlace de nuestro menu:

<div id="menu"><ul><li <?php if($title=='Inicio'){echo 'id="current"'; ?>> <a href="index.php" title="Inicio" class="active">INICIO</a></li></ul></div>

Esta forma no es muy conveniente por lo que les comentaba anteriormente, pero funciona también!.