Menú en HTML, CSS y JavaScript

por
Tiempo de lectura: 3 minutos

Para crear un menú horizontal con diferentes opciones y vaya cambiando el contenido según la opción seleccionada, hay que seguir los siguientes pasos.

Primero creamos una lista no ordenada <ul> que representa nuestro menú y le damos algunos estilos para eliminar viñetas y darle un fondo oscuro.

Cada elemento de la lista <li> representa una opción en el menú y está flotado a la izquierda (float: left) para que estén en línea.

Los enlaces <a> dentro de cada elemento de lista <li> se utilizan como elementos de menú y se les da estilo para que tengan texto blanco y un estilo de botón cuando se pasa el cursor sobre ellos (:hover).

Después seleccionamos todos los elementos de enlace (<a>) dentro de los elementos de lista <li> en la variable enlaces como muestro a continuación

var enlaces = document.querySelectorAll("ul li a");

Luego, obtenemos el elemento de contenido dinámico con el id «texto-contenido» en la variable contenidoDinamico.

var contenidoDinamico = document.getElementById("texto-contenido");

Agregamos un controlador de eventos clic para cada enlace en el menú. Cuando se hace clic en un enlace, se ejecuta una función que realiza lo siguiente:

  • Elimina la clase «selected» de todos los enlaces para deseleccionar cualquier enlace previamente seleccionado.
  • Agrega la clase «selected» al enlace actualmente seleccionado.
  • Obtiene el texto del enlace seleccionado, que representa la opción del menú seleccionada.
  • Actualiza el contenido dinámico con un título (<h1>) que muestra la opción seleccionada y un párrafo (<p>) con contenido ficticio relacionado con la opción.
enlaces.forEach(function(enlace) {
    enlace.addEventListener("click", function() {
        // Eliminar la clase "selected" de todos los enlaces
        enlaces.forEach(function(enlace) {
            enlace.classList.remove("selected");
        });

        // Agregar la clase "selected" al enlace seleccionado
        this.classList.add("selected");

        // Obtener el texto de la opción seleccionada
        var opcionSeleccionada = this.textContent;

        // Actualizar el contenido dinámico según la opción seleccionada
        contenidoDinamico.innerHTML = "<h1>" + opcionSeleccionada + "</h1><p>Contenido de " + opcionSeleccionada + "</p>";
    });
});

Por último agregamos una función llamada menuopciones que se activa cuando el usuario se desplaza por la página (window.onscroll). Esta función agrega o quita la clase «opcionselect» al menú dependiendo de si el usuario ha desplazado la página lo suficiente desde la parte superior. Esto se hace para crear un efecto de menú que se fija en la parte superior cuando el usuario se desplaza hacia abajo.

window.onscroll = function() {
    menuopciones();
};

var menu = document.querySelector("ul");
var opcionselect = menu.offsetTop;

function menuopciones() {
    if (window.pageYOffset >= pegajoso) {
        menu.classList.add("opcionselect");
    } else {
        menu.classList.remove("opcionselect");
    }
}

Muestro el resultado y el código completo del ejemplo.

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Estilos CSS para el menú */
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #333;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #555;
        }

        /* Estilos para la opción seleccionada */
        li a.selected {
            background-color: yellow; /* Cambia el color de fondo a amarillo */
            color: black; /* Cambia el color del texto a negro */
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#menu2">Menú Opción 2</a></li>
        <li><a href="#menu3">Menú Opción 3</a></li>
        <li><a href="#menu4">Menú Opción 4</a></li>
    </ul>

    <div id="contenido">
        <h1>Menú</h1>
        <p>Este es un ejemplo de un menú simple creado con HTML, CSS y JavaScript para DevCodeLight</p>
    </div>

    <div id="texto-contenido">
        <!-- Contenido dinámico que se actualizará -->
    </div>

    <script>
        // Obtener todos los elementos de enlace
        var enlaces = document.querySelectorAll("ul li a");

        // Obtener el elemento de contenido dinámico
        var contenidoDinamico = document.getElementById("texto-contenido");

        // Agregar un controlador de eventos para cada enlace
        enlaces.forEach(function(enlace) {
            enlace.addEventListener("click", function() {
                // Eliminar la clase "selected" de todos los enlaces
                enlaces.forEach(function(enlace) {
                    enlace.classList.remove("selected");
                });

                // Agregar la clase "selected" al enlace seleccionado
                this.classList.add("selected");

                // Obtener el texto de la opción seleccionada
                var opcionSeleccionada = this.textContent;

                // Actualizar el contenido dinámico según la opción seleccionada
                contenidoDinamico.innerHTML = "<h1>" + opcionSeleccionada + "</h1><p>Contenido de " + opcionSeleccionada + "</p>";
            });
        });

        window.onscroll = function() {
            menuopciones();
        };

        var menu = document.querySelector("ul");
        var opcionselect = menu.offsetTop;

        function menuopciones() {
            if (window.pageYOffset >= pegajoso) {
                menu.classList.add("opcionselect");
            } else {
                menu.classList.remove("opcionselect");
            }
        }
    </script>
</body>
</html>

Post Views: 4

Deja un comentario