Menú activo dinámico con PHP y CSS

Contenido del curso

Introducción

Bases de un Framework

Refactorización

Acciones restantes

Estructura correcta de archivos

Seguridad

Flujo completo del sistema

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:08

Menú activo dinámico con PHP y CSS

Curso de PHP Avanzado

Clase 5 de 33

Clase 5 / 33

Recursos

Cuando navegas por un sitio web y notas que el botón del menú correspondiente a la página actual se resalta automáticamente, hay una lógica de servidor detrás. Con PHP y la variable superglobal $_SERVER puedes detectar la URL activa y cambiar las clases CSS del menú sin recargar lógica extra. Esta guía es para quienes ya construyen interfaces con HTML, Tailwind y PHP y quieren mejorar la experiencia de navegación.

¿Qué información entrega $_SERVER en PHP?

La variable $_SERVER es un array asociativo que PHP genera automáticamente con datos del entorno de ejecución. Al imprimirla dentro de una etiqueta <pre> puedes leerla con un formato más limpio y entender qué tienes disponible.

Entre los datos que aparecen están:

El usuario y la carpeta donde se aloja el proyecto.
El archivo que estás ejecutando en ese momento.
El estatus HTTP recibido y el puerto en uso.
La URI solicitada por el navegador.

¿Qué es $_SERVER en PHP? Es una variable superglobal que contiene información del servidor y del entorno de ejecución, como rutas, encabezados y la URL solicitada por el cliente.

No necesitas memorizar todas las claves del array, salvo que apuntes a una certificación. Lo importante ahora es identificar la pieza que cambia con cada navegación.

¿Qué es REQUEST_URI y por qué importa?

Dentro de $_SERVER, la clave REQUEST_URI guarda lo que viene después del dominio. Si tu sitio es midominio.com y entras a /publicaciones.php, el valor de REQUEST_URI será justamente /publicaciones.php. Eso es lo que cambia cuando saltas de una sección a otra.

Para verlo en acción puedes imprimirlo así:

php

<?php echo $_SERVER['REQUEST_URI']; ?>

Cada clic actualiza el valor, y ese cambio constante es justo lo que necesitas para construir la condición que activa el botón correcto del menú [01:32].

¿Para qué sirve REQUEST_URI? Sirve para conocer la ruta exacta que el usuario está visitando, sin incluir el dominio. Es la clave para aplicar lógica condicional según la página activa.

¿Cómo aplicar una condicional para cambiar las clases CSS?

Antes de escribir la condición, revisa tu CSS. En este caso, el botón activo y el botón inactivo usan distintas clases de Tailwind. Identifica ambas, porque serán los dos resultados posibles de tu condicional.

La estructura básica es la siguiente: si REQUEST_URI coincide con la ruta del enlace, imprime las clases activas; si no, imprime las inactivas. Por ejemplo, para el enlace de inicio:

php <a class="<?php echo ($_SERVER['REQUEST_URI'] == '/') ? 'clases-activas' : 'clases-inactivas'; ?>" href="/">Inicio</a>

El operador ternario (? :) actúa como un if/else compacto. Si la condición es verdadera, se imprime el primer bloque; si es falsa, el segundo.

¿Cómo replicar la lógica en cada enlace del menú?

El error común es dejar la misma ruta / en todos los enlaces. Si haces eso, todos los botones se activan al mismo tiempo en el inicio y se apagan en cualquier otra página. Lo correcto es ajustar la ruta comparada en cada enlace según el archivo que representa.

Por ejemplo:

En el botón de inicio compara contra '/'.
En publicaciones compara contra '/post.php'.
En about compara contra '/about.php'.
En enlaces compara contra '/enlaces.php'.

Con ese ajuste, cada botón evalúa su propia ruta y solo se activa el que corresponde a la página visitada [04:18].

¿Cómo organizar el código para leerlo mejor?

Una condicional ternaria puede vivir en una sola línea, pero cuando crece se vuelve difícil de leer. Una buena práctica es separar visualmente la condición, el caso verdadero y el caso falso en líneas distintas, alineadas e indentadas.

Esto te permite escanear con la mirada qué clases entran en cada escenario y detectar errores rápido. Una vez tienes dominada la estructura, puedes volver a colapsarla en una línea sin perder claridad.

¿Qué consigues al conectar la lógica del servidor con el diseño?

Acabas de unir dos capas que muchas veces se trabajan por separado: la lógica de PHP en el servidor y el sistema de clases CSS de Tailwind en el frontend. El menú ahora responde al contexto del usuario y le indica con claridad en qué sección se encuentra.

Este patrón es la base para construir interfaces administrativas más sofisticadas, donde la navegación, los permisos y la seguridad se definen desde el servidor. ¿Qué otros elementos de tu interfaz mejorarías con esta misma técnica? Cuéntame en los comentarios.

<?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>

<?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>

Introducción

Portafolio en PHP puro sin frameworks

Estructura web básica con PHP y Git

Vistas parciales en PHP sin repetir código

Menú moderno en PHP con Tailwind CSS

Menú activo dinámico con PHP y CSS

Front controller y rutas en PHP

Conexión a MySQL con PDO y consultas dinámicas en PHP

Bases de un Framework

Centralización de conexiones a bases de datos en PHP con PDO

Encadenamiento de métodos en PHP con PDO

Validación de formularios PHP con POST

Clase de validación reutilizable para formularios en PHP

Refactorización

Cómo refactorizar una clase Validator en PHP

Archivos sueltos a controladores en PHP

Conexión de rutas con controladores en PHP

Clase de rutas en PHP con GET y POST

Acciones restantes

Rota DELETE para eliminar registros no CRUD

Formulario de edición precargado desde base de datos

Actualizar registros con PUT en Laravel

Estructura correcta de archivos

Configuración de autocarga con Composer en proyectos PHP

Creación y uso de helpers en PHP para código más legible

Helpers PHP para config, DB y redireccionamiento

Seguridad

Primer middleware PHP para proteger rutas

Refactorización de middleware con clases e interfaces en PHP

Vista de inicio de sesión con PHP y control de acceso

Lógica real de login con base de datos

Cifrado de contraseñas y gestión de sesiones en PHP

Flujo completo del sistema

Separa la autenticación del controlador PHP

Redirección automática después de enviar formularios

Clase SessionManager para mensajes flash en PHP

Helper de errores reutilizable en PHP

Integración de funciones con sistema de sesiones en PHP

Sistema de redirecciones con mensajes en PHP

Middleware para proteger rutas de usuarios logueados en PHP

Menú activo dinámico con PHP y CSS