Menu Activo con PHP

Muchas veces hacemos un menú con una clase activa, donde la solapa que este activa quede de un fondo, una forma simple de utilizar la clase, por ejemplo, current con PHP es simple, solo debemos crear una variable y llamarla según la página. No complicarnos la vida haciendo cosas que ni entendemos, simplemente hacemos lo siguiente:

   En cada página que llamemos con sección colocamos una variable en cualquier lugar del código:

<?php $mi_pagina="Inicio"; ?>

   Luego le agregamos una condición al menú:

<?php 
  if ($mi_pagina=="Inicio")
  echo " class='current'";
?>

   La condición es simple, si la variable es igual a "inicio" entonces "inicio" quedará activo, así podremos hacer algo como esto:

<div class="menu">
  <ul>
    <li><a <?php if ($mi_pagina=="Inicio")
       echo " class='current'"; ?> href="#"><span>Inicio</span></a></li>
    <li><a <?php if ($mi_pagina=="Contacto")
       echo " class='current'"; ?> href="#"><span>Contacto</span></a></li>
    <li><a <?php if ($mi_pagina=="Sobre mi")
       echo " class='current'"; ?> href="#"><span>Sobre mi</span></a></li>
    <li><a <?php if ($mi_pagina=="Posts")
       echo " class='current'"; ?> href="#"><span>Posts</span></a></li>
    <li><a <?php if ($mi_pagina=="Cualquier cosa")
       echo " class='current'"; ?> href="#"><span>Cualquier cosa</span></a></li>
  </ul>
</div>

   Y si lo combinamos con include para no tener que estar escribiendo el menú en cada una de las páginas tendremos algo muy dinámico, por ejemplo:

   Para la página:
<html>
<head>
  <title>Mi Titulo</title>
</head>
<body>
  <?php include('menu.php'); ?>
  
  //El resto del contenido
  Esto es un ejemplo de un menu
</body>
</html>

   El archivo que contiene el menú, "menu.php":
<div class="menu">
  <ul>
    <li><a <?php if ($mi_pagina=="Seleccion1")
       echo " class='current'"; ?> href="#"><span>Seleccion1</span></a></li>
    <li><a <?php if ($mi_pagina=="Seleccion2")
       echo " class='current'"; ?> href="#"><span>Seleccion2</span></a></li>
    <li><a <?php if ($mi_pagina=="Seleccion3")
       echo " class='current'"; ?> href="#"><span>Seleccion3</span></a></li>
  </ul>
</div>

Nota: verificar las comillas simples dentro de las dobles.

23 Comentarios

Escribir Comentario
Anónimo
AUTOR
1 de septiembre de 2011, 22:40 delete

Ya casi 1 año de este post, pero quiero agradecerte por compartirlo...

Gran articulo Carlitox,

Saludos!

Responder
avatar
2 de septiembre de 2011, 7:47 delete

De nada amigo, para eso estamos...

Responder
avatar
Anónimo
AUTOR
12 de septiembre de 2011, 16:31 delete

Xtrance 88

Gracias Carlos, por tu post, le dio solucion a mi problema te agradesco...

Responder
avatar
Webmasteroftheuniverse
AUTOR
4 de noviembre de 2011, 15:04 delete

Me fué muy útil. Muchas gracias

Responder
avatar
Anónimo
AUTOR
4 de junio de 2012, 19:30 delete

En efecto, no funciona!!!

Responder
avatar
5 de junio de 2012, 18:44 delete

Que no te funciona??? Postea el código por favor... Saludos!!

Responder
avatar
11 de julio de 2012, 5:56 delete

A mí no me funcionaba y después de pelear mucho he encontrado el problema, está en que hay un error de sintaxis con el Echo.

Hay que ponerlo así:
class=\"current\""

Responder
avatar
11 de julio de 2012, 7:46 delete

Claro, el slash es para colocar la comilla dentro del comentario, pero si te fijas bien tiene comillas simples(') dentro de las dobles("), por lo que así como está también es válido.

Responder
avatar
6 de mayo de 2013, 2:25 delete

Una pregunta, y para usarlos con iframes? es decir el menu esta include pero llama en un iframe a otra paginas, probe pero me dice que no esta declarada la variable...

Responder
avatar
6 de mayo de 2013, 8:55 delete

Veamos tu código para darle respuesta, pero por lo que mencionas tiene pinta de ser que no envias la variable a la pagina que carga el frame, tienes 2 soluciones pero ambas no son las mejores.... Usas cookies, o sesiones, sin embargo postea tu código y veamos...

Responder
avatar
15 de mayo de 2013, 22:28 delete

He suprimido tus comentarios porque no puedo ver tu código y mucho menos darte una ayuda, por afavor utiliza la siguiente utilidad: http://carlitoxenlaweb.blogspot.com/2011/09/parseunparse-html-ideal-para-blogs.html

Luego de eso publica tu código y podre ayudarte.... Saludos!!

Responder
avatar
26 de mayo de 2013, 21:58 delete

Gracias Carlos!

<body>

<div id="apDiv2-Container">

<div class="header">
<?php include_once ("menu_ins3.php"); ?>
</div>


<div class="contenido_index">

<iframe id="iframe1" name="detalle" src="inicio.php" frameborder="0" scrolling="no" allowtransparency="true" ></iframe>
</div>


</div>
<!-- end .container -->


</body>



archivo menu.ins3.php

<div id="navI" >
<script type='text/javascript' src='jquery/jquery-1.8.0.min.js'></script>
<script>
$(function(){
$ ('#t1.hover, #t2.hover, #t3.hover, #t4.hover, #t5.hover, #t6.hover').mouseover(function(){
$('embed').remove();
$('body').append('<embed src="jquery/beep.mp3" autostart="true" hidden="true" loop="false">');
});

});

</script>



<ul style="font-size:10px; line-height:11px;">

<li id="t1" class="hover"><a href="inicio.php" target="detalle">INICIO</a></li>

<li><span class="barrita_blanc">|</span></li>

<li id="t2" class="hover"><a href="categorias.php?idcat=1" target="detalle">SERVICIOS</a></li>
<li><span class="barrita_blanc">|</span></li>
<li id="t3" class="hover"><a href="noticias.php?" target="detalle">PUBLICACIONES</a></li>
<li><span class="barrita_blanc">|</span></li>
<li id="t4" class="hover"><a href="videoteca.php?id=1" target="detalle">VIDEOTECA</a></li>
<li><span class="barrita_blanc">|</span></li>
<li id="t5" class="hover"><a href="nosotros.php?id=1" target="detalle">NOSOTROS</a></li>
<li><span class="barrita_blanc">|</span></li>
<li id="t6" class="hover"><a href="contacto.php" target="detalle">CONTACTO</a></li>
</ul>

</div> <!--end NavI-->

Responder
avatar
27 de mayo de 2013, 15:10 delete

Disculpa la tardanza, la verdad no veo donde esta el error, porque lo he probado y no hay problemas..... Aunque noto algo, fijate que en tu include el nombre del archivo es: "menu_ins3.php", pero mas abajo me dices que se llama "menu.ins3.php"..... Revisa que sea el mismo nombre del archivo en el include... Saludos!!

Responder
avatar
28 de mayo de 2013, 23:51 delete

Gracias Carlos, fue un error al escribir el nombre pero es el mismo archivo. A mi me marca que la variable $mi pagina no fue definida, es como si el archivo menu incluido en el index no detectara las paginas que se cargan en el iframe, a pesar de que en estas si tengo creadas las variable "pagina" como indicas en cada de una de las paginas, inicio, contacto etc, sino no hay drama gracias por tu tiempo. Abrazo

Responder
avatar
29 de mayo de 2013, 8:59 delete

Ah ok, lo que sucede es que los iFrame son tediosos y se tratan como paginas independientes al código, es por ello que siempre prefiero el include cuando trabajo con PHP, o AJAX, pero para que te funcione debes hacer esto:

En el "src" de la etiqueta iFrame coloca inicio.php?mi_pagina=$mi_pagina, definiendo anteriormente $mi_pagina = 'la pagina', o en su defecto nicio.php?mi_pagina=inicio

Luego la pagina de inicio.php pones $mi_pagina = $_REQUEST['mi_pagina'] o $_GET['mi_pagina']..... Ya con eso debe solucionarse todo.... Prueba y comentas, saludos!!

Responder
avatar
29 de mayo de 2013, 15:49 delete

Aqui te paso como quedo finalmente, posiblemente este haciendo algo mal.. https://dl.dropboxusercontent.com/u/93036547/pruebamenu.rar

Responder
avatar
jbarrios
AUTOR
29 de mayo de 2013, 20:01 delete

¡Sensacional! Era justo lo que estaba buscando ¡y funciona!

Responder
avatar
29 de mayo de 2013, 20:32 delete

Como te explique anteriormente, estas declarando un menu y llamando las paginas por medio de un iFrame, por lo que el menu no refresca, debes cargar el menu dentro del iframe, o hacer el include dinamico a las paginas que tienes.....

Otra cosa es que debes definir la variable antes de cargar el archivo menu, ya sea en el index o en la pagina que cargues....

Responder
avatar
yajiz garcia
AUTOR
28 de septiembre de 2015, 14:44 delete

gran aporte chico.
vas a pensar que soy una ignorante pero en donde debo colocar el *** inicio.php?mi_pagina=$mi_pagina, definiendo anteriormente $mi_pagina = 'la pagina', o en su defecto nicio.php?mi_pagina=inicio *** es que no te entiendo por fa dime

Responder
avatar
2 de marzo de 2016, 13:22 delete

Al principio de cada página (son a las que haces el "include") defines a cual estas accediendo, y listo, eso es todo... Va en el código PHP, no en un enlace ni nada por el estilo.

Responder
avatar
José López
AUTOR
10 de mayo de 2016, 23:54 delete

Buenas noches amigos. He adaptado el código de menú activo y no me ha funcionado. Dejo parte del código esperando sus respuestas. Gracias de antemano a los que puedan ayudar.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="../Inicio.php">INICIO</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" <?php if ($pagina=="Listado_general_pacientes"||$pagina=="Listado_afiliados"||$pagina=="Listado_beneficiarios"||$pagina=="Listado_comunidad") echo " class='active'"; ?> data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PACIENTES <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a <?php if ($pagina=="Listado_general_pacientes") echo " class='active'"; ?> href="Listado_general_pacientes.php">LISTADO GENERAL</a></li>
<li><a <?php if ($pagina=="Listado_afiliados") echo " class='active'"; ?> href="Afiliados.php">AFILIADOS</a></li>
<li><a <?php if ($pagina=="Listado_beneficiarios") echo " class='active'"; ?> href="Beneficiarios.php">BENEFICIARIOS</a></li>
<li><a <?php if ($pagina=="Listado_comunidad") echo " class='active'"; ?> href="Comunidad.php">COMUNIDAD</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CITAS <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="../Citas/Listado_general_citas.php">LISTADO GENERAL</a></li>
<li><a href="#">AFILIADOS</a></li>
<li><a href="#">BENEFICIARIOS</a></li>
<li><a href="#">COMUNIDAD</a></li>
</ul>
</li>
</ul>

<ul class="nav navbar-nav navbar-right">
<li><a href="../Login.php">CERRAR SESIÓN</a></li>
</ul>
</div><!-- /.navbar-collapse -->

Responder
avatar
14 de mayo de 2016, 17:14 delete

Que no funciona? Has definido la variable antes al inicio de la página?

Responder
avatar
José López
AUTOR
14 de agosto de 2016, 12:01 delete

La variable pagina ya está definida. Ya he revisado y no se mostraba porque el echo después de la condición php se debe colocar dentro de comillas simples y la clase dentro de la etiqueta class va con comillas dobles

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon