Inicia sesión




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>

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-05-27
  • Categorias: Diseño Web CSS3 html5 javascript WebSite webmasters Noticias Tutorial

Como construir un menú sensible básico
Como construir un menú sensible básico Como construir un menú sensible básico...
Tutoriales en linea




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






Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Agujeros De Seguridad En Android, Facebook, Windows, Office, Internet Explorer, Adobe...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Noticias Adobe Tutorial Facebook Windows Herramientas Ofimaticas

Como diseñar trayectorias del movimiento en PowerPoint

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Herramientas Ofimaticas PowerPoint Microsoft Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial