Activar botones de menú dinámicamente con PHP

Resumen

¿Quieres que tus usuarios sepan claramente en qué página se encuentran al navegar por tu web? PHP ofrece una manera efectiva y sencilla de destacar dinámicamente un botón específico en tu menú según la URL actual del navegador. Este método mejora la usabilidad, indicando directamente al usuario su posición dentro del sitio.

¿Qué información proporciona PHP sobre la navegación del usuario?

PHP incluye variables predefinidas útiles para acceder rápidamente a información sobre la navegación actual. Al utilizar:

La URI actual visitada (parte después del dominio).
Información como ruta de navegación, archivo actual y puerto.

Se puede hacer un seguimiento detallado del visitante. Específicamente, la variable $_SERVER['REQUEST_URI'] muestra la parte cambiante después del dominio, útil para identificar la página visitada y establecer condiciones dinámicas.

¿Cómo utilizar la URI para activar dinámicamente botones en menús?

Para activar un botón distinto dependiendo de la página, debes realizar las siguientes acciones:

Verificar cuál es la URI actual comparándola mediante una condición.
Agregar clases CSS específicas según sea la página actual.

El código para lograrlo podría estructurarse así en PHP:

<?php echo $_SERVER['REQUEST_URI'] == '/' ? 'clase-activa' : 'clase-inactiva'; ?>

Esto indica:

Si estás en la raíz ('/'), aplica la clase activa.
Para cualquier otra página, usa una clase diferente.

¿Qué aspectos considerar sobre CSS y PHP al integrar condiciones?

La lógica dinámica depende de entender claramente cómo están estructuradas tus clases CSS actuales:

Observa qué clases utiliza actualmente un botón activo.
Compara las clases de botones inactivos.
Organiza siempre tu código PHP y CSS con claridad, mejorando así su legibilidad y mantenimiento.

Una buena práctica es presentar la condición de esta forma para mejor claridad:

<?php
    echo $_SERVER['REQUEST_URI'] == '/pagina-ejemplo.php'
        ? 'clase-activa'
        : 'clase-inactiva';
?>

Al seguir esta práctica, las clases asociadas con la navegación en tu menú cambiarán automáticamente, permitiendo que cada botón se destaque según la página que visite el usuario. Toda esta lógica proporcionará una experiencia de usuario más intuitiva e interactiva, haciendo evidente la navegación y aumentando la claridad visual del sitio.

Leonel Moyano

student•

Usando la estructura de ciclos y vectores hice unas mejores llevando las opciones a un vector y recorriendolo para tener un código más limpio:

<?php
$selected_class = 'bg-gray-900 text-white';
$unselected_class = 'hover:bg-gray-700 hover:text-white text-gray-300';
$options = [
    ['name' => 'Home', 'url' => '/'],
    ['name' => 'Post', 'url' => '/post.php'],
    ['name' => 'About me', 'url' => '/about.php'],
    ['name' => 'Projects', 'url' => '/links.php'],
    ['name' => 'My blog', 'url' => '/blog.php'],
];
?>
<nav class="bg-gray-800">
    <div class="mx-auto max-w-7xl flex h-16 items-center justify-center">
        <div class="flex gap-4">
            <?php foreach ($options as $key => $option): ?>
                <?php  $nav_item_class = $_SERVER['REQUEST_URI'] == $option['url'] ? $selected_class : $unselected_class;?>
                <a href="<?= $option['url'] ?>" class="<?= $nav_item_class ?> rounded-md px-3 py-2 text-sm font-medium">
                    <?= $option['name'] ?>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</nav>
```\<?php$selected\_class = 'bg-gray-900 text-white';$unselected\_class = 'hover:bg-gray-700 hover:text-white text-gray-300';$options = \[    \['name' => 'Home', 'url' => '/'],    \['name' => 'Post', 'url' => '/post.php'],    \['name' => 'About me', 'url' => '/about.php'],    \['name' => 'Projects', 'url' => '/links.php'],    \['name' => 'My blog', 'url' => '/blog.php'],];?>\<nav class="bg-gray-800">    \<div class="mx-auto max-w-7xl flex h-16 items-center justify-center">        \<div class="flex gap-4">            \<?php foreach ($options as $key => $option): ?>                \<?php  $nav\_item\_class = $\_SERVER\['REQUEST\_URI'] == $option\['url'] ? $selected\_class : $unselected\_class;?>                \<a href="\<?= $option\['url'] ?>" class="\<?= $nav\_item\_class ?> rounded-md px-3 py-2 text-sm font-medium">                    \<?= $option\['name'] ?>                \</a>            \<?php endforeach; ?>        \</div>    \</div>\</nav>

Harbeilin Ibarguen

student•

no corre laravel herd en mi windwos no logro encontrar el problema

Bryan Manuel Paz Rodríguez

student•

Estaba probando que el dump server puede mostrar también las Querys de los URI. Está genial