Menu dinamico clase active

hhcj · #1 (**permalink**) 07/05/2011, 14:37

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";

?>

IEKK · #2 (**permalink**) 07/05/2011, 14:46

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

hhcj · #3 (**permalink**) 07/05/2011, 14:57

Cita:

Iniciado por IEKK

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.

IEKK · #4 (**permalink**) 07/05/2011, 16:20

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<!DOCTYPE html>
<html>
<head>
  <style>.hover{color:red;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="menu">
<ul>  
  <li><a href="#">Enlace 1</a></li>
  <li><a href="#">Enlace 2</a></li>
  <li><a href="#">Enlace 3</a></li>
</ul>
</div>
 
<a href="#">Enlace 4</a>
  
<script>
$("#menu ul li a").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
</script>
 
</body>
</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

hhcj · #5 (**permalink**) 07/05/2011, 16:25

Cita:

Iniciado por IEKK

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<!DOCTYPE html>
<html>
<head>
  <style>.hover{color:red;}</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="menu">
<ul>  
  <li><a href="#">Enlace 1</a></li>
  <li><a href="#">Enlace 2</a></li>
  <li><a href="#">Enlace 3</a></li>
</ul>
</div>
 
<a href="#">Enlace 4</a>
  
<script>
$("#menu ul li a").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
</script>
 
</body>
</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