jueves, 18 de septiembre de 2008

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ú


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:



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

6 comentarios:

cristian dijo...

Capoooooo.

Anónimo dijo...

Hola esta muy bien pero que pasa si tengo menú vertical en cual están enlazadas con otras paginas que no están menú principal ejemplo

tengo inicio, servicios, tienda, etc. menú principal

menú vertical productos, electricidad, etc.

la duda esta si yo esto en electricidad.php que es una pagina que sale de servicios.php como subcategoria como puedo hacer para que siga seleccionada la lengüeta servicios

Héctor Guedea dijo...

Anónimo:
He contestado tu comentario en una entrada: http://guedea.blogspot.com/2009/07/menu-dinamico-activo-con-categorias-y.html

maryu dijo...

hola hector, soy maryury estoy intentando realizar el estado del boton, que me permanesca activo cuando selecciono uno,,, pero en realidad no se donde debo colocar el array, o la funcion...
te agradezco me ayudas con esto

Anónimo dijo...

no entendi nada de como se hace xd

nelson dijo...

Muchas Gracias!! Me ayudo Muchisimo!!! Gracias :D