En esta ocasión en tutoriales en linea mostraremos como construir un menú sensible con HTML5, Jаvascript. Los menús de navegación responsive, adaptativo, receptivos o sensible vienen en diferentes formas y tamaños, en este caso sera la navegación 'meanMenu'.

Creando nuestro menú de escritorio en HTML 6e163h


Vamos a desglosar los elementos HTML5 y creamos un menú limpio y básico:
<nav>
        <ul>
            <li><a href="#">Enlace de nivel superior</a>
                <ul>
                    <li><a href="#">Enlace de segundo nivel</a>
                        <ul>
                            <li><a href="#">Enlace de tercer nivel</a></li>
                            <li><a href="#">Enlace de tercer nivel</a></li>
                            <li><a href="#">Enlace de tercer nivel</a>
                                <ul>
                                    <li><a href="#">Enlace de cuarto nivel</a></li>
                                    <li><a href="#">Enlace de cuarto nivel</a></li>
                                    <li><a href="#">Enlace de cuarto nivel con nombre extra largo por lo que envuelve</a>
                                        <ul>
                                            <li><a href="#">Enlace de quinto nivel</a></li>
                                            <li><a href="#">Enlace de quinto nivel</a></li>
                                            <li><a href="#">Enlace de quinto nivel</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Enlace de segundo nivel</a></li>
                    <li><a href="#">Enlace de segundo nivel</a></li>
                </ul>
            </li>
            <li><a href="#">Enlace de nivel superior</a></li>
            <li><a href="#">Enlace de nivel superior</a></li>
            <li><a href="#">Enlace de nivel superior</a></li>
        </ul>
    </nav>
Aquí hemos usado una buena convención de nomenclatura en nuestra navegación. Esto nos da una orientación CSS fácil y agradable.

Creando nuestro menú de escritorio en CSS 2q5i5d


Lo guiaremos un poco en nuestro flujo de trabajo de respuesta, y dependiendo de su proyecto y de cómo esté configurando sus consultas de medios, esto puede ser ligeramente diferente.

Primero vamos a agregar algunos estilos básicos a la navegación:
.mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #0c1923;
    margin-top: 44px;
}

.mean-container .mean-nav ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}

.mean-container .mean-nav ul li {
    position: relative;
    float: left;
    width: 100%;
}

.mean-container .mean-nav ul li a {
    display: block;
    float: left;
    width: 90%;
    padding: 1em 5%;
    margin: 0;
    text-align: left;
    color: #fff;
    border-top: 1px solid #383838;
    border-top: 1px solid rgba(255,255,255,0.5);
    text-decoration: none;
    text-transform: uppercase;
}

.mean-container .mean-nav ul li li a {
    width: 80%;
    padding: 1em 10%;
    border-top: 1px solid #f1f1f1;
    border-top: 1px solid rgba(255,255,255,0.25);
    opacity: 0.75;
    filter: alpha(opacity=75);
    text-shadow: none !important;
    visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
    border-bottom: none;
    margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
    width: 70%;
    padding: 1em 15%;
}

.mean-container .mean-nav ul li li li li a {
    width: 60%;
    padding: 1em 20%;
}

.mean-container .mean-nav ul li li li li li a {
    width: 50%;
    padding: 1em 25%;
}

.mean-container .mean-nav ul li a:hover {
    background: #252525;
    background: rgba(255,255,255,0.1);
}

.mean-container .mean-nav ul li a.mean-expand {
    margin-top: 1px;
    width: 26px;
    height: 32px;
    padding: 12px !important;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.4) !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: rgba(0,0,0,0.9);
}

.mean-container .mean-push {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    clear: both;
}

.mean-nav .wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
}

Notarás que .nav tiene un sufijo mean dado que estamos utilizando un proyecto de github y la configuración del jаvascript esta predeterminada con esta clase, seria bastante complicado cambiarla a todo el archivo.

En pocas palabras en el archivo Jаvascript esta la configuración necesaria para que cuando el dispositivo llegue a 480px salta el menú responsive como muestra el siguiente ejemplo:
Luego, en su documento habitual, y para que funcione habrá que colocar la siguiente estructura...
jQuery(document).ready(function () {
    jQuery('header nav').meanmenu();
});
Ver resultado de un menú desplegable. Utilizando <select>
Compartir

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas... 6c435j