1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial [Intermedio] Menú con animación fill-in

Tema en 'Tutoriales de HTML y CSS' comenzado por Drakz, 7 de Enero de 2015.

  1. Drakz

    Drakz Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    32
    Puntos de trofeos:
    13
    Género:
    Hombre
    Ocupación:
    Front-End Web Developer
    Localización:
    Argentina
    Página web:
    Muy buenas a todos, este es un tutorial para hacer un menú con animación en hover como este:


    [​IMG]


    Para realizarlo vamos a utilizar CSS3, debemos tener conocimientos básicos del mismo para poder modificarlo a nuestro gusto.

    Lo primero va a ser el HTML, este es el código de la página:

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Fill Menu</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/fill.css">
    </head>

    <body>
        <div class="st-main">

        <header>
            <div class="container">
                <div class="logo">
                    Denial
                </div>
                <nav class="primary-nav">
                    <a href="#index.html">HOME</a>
                    <a href="#portfolio.html">PORTFOLIO</a>
                    <a href="#about.html">ABOUT ME</a>
                    <a href="#contact.html">CONTACT</a>
                </nav>
            </div>
        </header>
        </div>
    </body>

    </html>

    Explicación del HTML:
    Creamos una etiqueta <nav> con clase primary-nav (<nav class="primary-nav">), y dentro, 4 enlaces para luego en el CSS, aplicarle estilos al pseudo-elemento :after de ".primary-nav a".

    Pasemos al CSS y a la explicación del mismo (Nota: algunos estilos no están definidos aquí porque son de bootstrap, como .container)

    Código (Text):

    .st-main {
    background: #f9f9f9;
    height: 100vh;
    }
    header {
    background: #3498db;
    height: 100px;
    }
    .logo {
    float: left;
    line-height: 100px;
    font-family: UbuntuBold;
    font-size: 3em;
    color: #f9f9f9;
    }
    .primary-nav {
    float: right;
    line-height: 100px;
    text-transform: uppercase;
    font-family: UbuntuCondensed;
    }
    .primary-nav a {
    padding: 30px 20px;
    color: #f9f9f9;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    position: relative;
    }
    .primary-nav a:hover,
    .primary-nav a:active,
    .primary-nav a:focus {
    text-decoration: none;
    color: #3498db;
    position: relative;
    z-index: 2;
    }
    .primary-nav a:after {
    width: 100%;
    display: block;
    height: 0;
    background: #f9f9f9;
    -webkit-transition: height 0.4s ease;
    -o-transition: height 0.4s ease;
    transition: height 0.4s ease;
    position: absolute;
    left: 0;
    top: -30px;
    content: "";
    z-index: -99;
    }
    .primary-nav a:hover:after {
    height: 118px;
    }
     
    Bueno, .st-main, header, .logo, .primary-nav, .primary-nav a son estilos específicos de esa página, ustedes los pueden modificar como deseen, pero vamos a lo más importante.

    Explicación del CSS y el efecto:

    La "magia" se encuentra en el pseudo elemento :after del .primary-nav a, para los que no saben, el pseudo elemento :after, aplica determinados estilos LUEGO de los estilos de su clase padre:

    Código (Text):

    .primary-nav a:after {
    /* Le decimos que el elemento tenga un width del 100% del .primary-nav a */
    width: 100%;

    /* Lo convertimos en bloque */
    display: block;

    /* Le damos height: 0, para que su alto sea nulo */
    height: 0;

    /* Aquí colocamos el background (lo que se verá cuando hagan hover) */
    background: #f9f9f9;

    /* Esto son efectos de transición, para todas las modificaciones de "height", se tarde 0.4s y tenga un efecto de ease */
    -webkit-transition: height 0.4s ease;
    -o-transition: height 0.4s ease;
    transition: height 0.4s ease;

    /* Position: absolute, al estar dentro de un elemento con position: relative, nos permite posicionarlo de acuerdo a los límites de este último */
    position: absolute;

    /* Lo acomodamos */
    left: 0;

    /* Aquí podremos colocar top o bottom, si ponemos top, el efecto vendrá desde arriba hacia abajo, si ponemos bottom, vendrá de abajo hacia arriba */
    top: -30px;

    /* Le damos un contenido vacío, simplemente para que se cree el bloque */
    content: "";

    /* Y un z-index inferior al menú */
    z-index: -99;
    }

    .primary-nav a:hover:after {
    /* Aquí definiremos cuanto debe ser el height del background cuando se haga hover */
    height: 118px;
    }
     
    Y sin mas ya tenemos nuestro menú, con algunas modificaciones se puede hacer que se anime de derecha a izquierda, o izquierda a derecha (solo hay que cambiar heights por widths)

    Pueden descargar los archivos que utilicé (los mismos que están subidos a la página al inicio del post) desde los archivos adjuntos.
     

    Archivos adjuntos:

    Última modificación: 7 de Enero de 2015
    A Roc Eagle, davidg72, selpeca y 19 otros les gusta esto.
  2. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    393
    Me gusta recibidos:
    331
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Que buen post, no tiene pierde, muy fácil de entender, y hasta con .zip descargable.
    +1 me gusta
     
    A Danrivas, Jrsv, yerse y 3 otros les gusta esto.
  3. Side Master

    Side Master
    Moderador

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    257
    Me gusta recibidos:
    208
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Página web:
    Buen post compañero!.
     
    A Drakz le gusta esto.
  4. kinslert

    kinslert Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    9
    Me gusta recibidos:
    6
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    front-end web developer
    si, esta muy bueno, me sirvio de mucho, Gracias... 1+
     
    A Aldo y Drakz les gusta esto.
  5. gyrutech

    gyrutech Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    99
    Me gusta recibidos:
    55
    Puntos de trofeos:
    18
    Género:
    Hombre
    Está chido brother, sigue así ya deje un +1 :)
     
    A Aldo le gusta esto.
  6. Aldo

    Aldo Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    20
    Me gusta recibidos:
    8
    Puntos de trofeos:
    3
    Género:
    Hombre
    Gracias genial lo pondré en mi website ;)
     
  7. Fando

    Fando Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Bien por esa luce original
     
  8. mikiito

    mikiito Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Muy bueno, gracias :p
     
  9. chivodev

    chivodev Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    78
    Me gusta recibidos:
    18
    Puntos de trofeos:
    8
    Género:
    Hombre
    Excelente aporte mopri.... Que bien explicado
     
  10. Noe_tj

    Noe_tj Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    73
    Me gusta recibidos:
    33
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Desarrollador Web
    Localización:
    Tijuana B.C, México
    Página web:
    gracias por compartir, me servirá para nuevos sitios que haga +1
     
  11. Dreidy

    Dreidy Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    12
    Me gusta recibidos:
    7
    Puntos de trofeos:
    3
    Género:
    Mujer
    Excelente
     
  12. Anibalm2

    Anibalm2 Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    16
    Me gusta recibidos:
    7
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Desarrollador Web (Con lo poco que se hasta ahora)
    Localización:
    El Progreso, Yoro, Honduras
    Página web:
    Excelente!!! :):)
     
  13. agusti

    agusti
    Moderador

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    260
    Me gusta recibidos:
    106
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ohhhh! está buenísimo, y super claro de entender! ;)
     
  14. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Muy Buen Menu, Gracias Por el Post... El Efecto es muy bueno.....
     
    A Tigre Grisel le gusta esto.
  15. kevingelhorn

    kevingelhorn Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    25
    Me gusta recibidos:
    5
    Puntos de trofeos:
    3
    Ocupación:
    Not available.
    Localización:
    Not available.
  16. 0zononet

    0zononet Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Estudiante de Ingeniería en informática
    Localización:
    Santiago de Chile
    Tengo una duda, en clase .st-main, que es el vh, del height? :confused:
     
  17. Drakz

    Drakz Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    32
    Puntos de trofeos:
    13
    Género:
    Hombre
    Ocupación:
    Front-End Web Developer
    Localización:
    Argentina
    Página web:
    Viewport Height, la altura del display del usuario, siendo 100 = 100%

    Lo marcado en rojo son 100vh.

    [​IMG]
     
    A FalconMasters le gusta esto.
  18. 0zononet

    0zononet Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Estudiante de Ingeniería en informática
    Localización:
    Santiago de Chile
    Gracias algo que no sabia, y que ahora si :D !
     
    Última modificación por un moderador: 14 de Enero de 2015
  19. selpeca

    selpeca Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    15
    Me gusta recibidos:
    4
    Puntos de trofeos:
    3
    Género:
    Hombre
    Gracias por tu aporte lo usare, una pregunta ¿y si yo quisiera hacer ese menu con responsive desing que tendria que hacer??
     
  20. Creigthon

    Creigthon
    Moderador

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    181
    Me gusta recibidos:
    110
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Programador analista y Diseñador Gráfico.
    Localización:
    La Serena, Chile
    Compañero, esto ya se sale de la tematica del post.... Si haces la nav con fill-in y creas un tema nuevo con tu consulta, te Guiamos... pero entre nos.... "se hace con media query en css". :)

    Saludos, Creigthon Lee.
     

Comparte esta página