Como construir un menú sensible básico

Como construir un menu sensibleEn 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


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


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 este Tutoriales En Linea.Ver resultado de un menú desplegable. Utilizando <select>


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-05-27
  • Categorias: Diseño Web CSS3 html5 javascript WebSite webmasters Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!