Foros del Web » Programando para Internet » PHP »

Menu dinamico clase active

Estas en el tema de Menu dinamico clase active en el foro de PHP en Foros del Web. Buenas a todos, quiero hacer un menu dinamico que asigne la clase active al elemento (página) que este activa en ese momento para resaltarlo con ...
  #1 (permalink)  
Antiguo 07/05/2011, 14:37
 
Fecha de Ingreso: febrero-2007
Mensajes: 39
Antigüedad: 15 años, 3 meses
Puntos: 0
Menu dinamico clase active

Buenas a todos, quiero hacer un menu dinamico que asigne la clase active al elemento (página) que este activa en ese momento para resaltarlo con otro color.
Y buscando he encontrado este código, que no soy capaz de hacer funcionar, ya que nunca entra en el if, y no asigna la clase al <li>, asi que os escribo para que me digais si veis algo mal, o si sabeis otra forma para hacerlo.
Gracias!!
Código:
<?php

$items[0][] = "Inicio";
$items[0][] = "/index.php";

$items[1][] = "Seguridad";
$items[1][] = "/seguridad.php";

$items[2][] = "Contacto";
$items[2][] = "/contacto.php";


    echo "<ul>\n";

     for($i=0;$i<sizeof($items);$i++){

        echo "<li";

        if($_SERVER['PHP_SELF'] == $items[$i][1]) {
          echo " class=\"active\"";

        }

        echo ">";
        echo "<a href=\"";
        echo $items[$i][1];
        echo "\">";
  
        echo $items[$i][0];
        echo "</a>";

        echo "</li>\n";

    }

    echo "</ul>\n";

?>
  #2 (permalink)  
Antiguo 07/05/2011, 14:46
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 11 años, 9 meses
Puntos: 202
Respuesta: Menu dinamico clase active

Hombre... con php puedes hacer lo que dices; si no usas ajax encima cargará la página de nuevo, cosa fea, si lo usas es una tontería porque hay algo llamado javascript y jquery. Ten en cuenta que PHP es del lado del servidor.
Te ocuparía mil veces menos usar JS
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #3 (permalink)  
Antiguo 07/05/2011, 14:57
 
Fecha de Ingreso: febrero-2007
Mensajes: 39
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Menu dinamico clase active

Cita:
Iniciado por IEKK Ver Mensaje
Hombre... con php puedes hacer lo que dices; si no usas ajax encima cargará la página de nuevo, cosa fea, si lo usas es una tontería porque hay algo llamado javascript y jquery. Ten en cuenta que PHP es del lado del servidor.
Te ocuparía mil veces menos usar JS
Gracias por responder IEEK, pero la cosa está en que no tengo ni idea de java ni de jquery. Soy diseñador con conocimientos de php y por eso encontré eso.
Si me pasarás algun link con un menu que hiciera lo que quiero te lo agradeceria un monton.
  #4 (permalink)  
Antiguo 07/05/2011, 16:20
 
Fecha de Ingreso: agosto-2010
Ubicación: Tenerife
Mensajes: 893
Antigüedad: 11 años, 9 meses
Puntos: 202
Respuesta: Menu dinamico clase active

Umm, bueno, en realidad lo que tenías era que haber pasado tu consulta en el foro de Javascript. No sé si está bien que ponga esto aquí.

No es nada recomendable a la hora de crear páginas sólo saber php y no saber de los lenguajes en la parte del cliente.

Este ejemplo puede parecerte largo pero te he añadido a lo "chapuza" todos los js y la css dentro del html para que simplemente lo pruebes.
Después ya lo arreglas y separadas cada cosa por su lado.

El enlace 4 es para que entiendas que sólo va a buscar los <a> dentro del div menu y de los <li> que a su vez estén en el <ul>

Cambia a color rojo el enlace cuando el cursor se sitúa por encima.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <style>.hover{color:red;}</style>
  3.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. </head>
  5.  
  6. <div id="menu">
  7. <ul>  
  8.   <li><a href="#">Enlace 1</a></li>
  9.   <li><a href="#">Enlace 2</a></li>
  10.   <li><a href="#">Enlace 3</a></li>
  11. </ul>
  12. </div>
  13.  
  14. <a href="#">Enlace 4</a>
  15.  
  16. $("#menu ul li a").hover(
  17.   function () {
  18.     $(this).addClass("hover");
  19.   },
  20.   function () {
  21.     $(this).removeClass("hover");
  22.   }
  23. );
  24.  
  25. </body>
  26. </html>

Por último aquí está en enlace con toooda la documentación de jquery.
http://api.jquery.com/
Claro que también lo podías hacer en javascript, que es lo mismo, pero no me apetecía escribir más
__________________
Pensaba que internet era una gran biblioteca de sabiduría, hasta que comprendí que un libro no puede tener mil páginas llenas de faltas de ortografía... :(
  #5 (permalink)  
Antiguo 07/05/2011, 16:25
 
Fecha de Ingreso: febrero-2007
Mensajes: 39
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Menu dinamico clase active

Cita:
Iniciado por IEKK Ver Mensaje
Umm, bueno, en realidad lo que tenías era que haber pasado tu consulta en el foro de Javascript. No sé si está bien que ponga esto aquí.

No es nada recomendable a la hora de crear páginas sólo saber php y no saber de los lenguajes en la parte del cliente.

Este ejemplo puede parecerte largo pero te he añadido a lo "chapuza" todos los js y la css dentro del html para que simplemente lo pruebes.
Después ya lo arreglas y separadas cada cosa por su lado.

El enlace 4 es para que entiendas que sólo va a buscar los <a> dentro del div menu y de los <li> que a su vez estén en el <ul>

Cambia a color rojo el enlace cuando el cursor se sitúa por encima.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <style>.hover{color:red;}</style>
  3.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. </head>
  5.  
  6. <div id="menu">
  7. <ul>  
  8.   <li><a href="#">Enlace 1</a></li>
  9.   <li><a href="#">Enlace 2</a></li>
  10.   <li><a href="#">Enlace 3</a></li>
  11. </ul>
  12. </div>
  13.  
  14. <a href="#">Enlace 4</a>
  15.  
  16. $("#menu ul li a").hover(
  17.   function () {
  18.     $(this).addClass("hover");
  19.   },
  20.   function () {
  21.     $(this).removeClass("hover");
  22.   }
  23. );
  24.  
  25. </body>
  26. </html>

Por último aquí está en enlace con toooda la documentación de jquery.
[URL="http://api.jquery.com/"]http://api.jquery.com/[/URL]
Claro que también lo podías hacer en javascript, que es lo mismo, pero no me apetecía escribir más
Ahora mismo lo pruebo, muchas gracias

Etiquetas: clase, dinamico
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:06.