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

Ayuda Como hago que el menu sea responsive

Tema en 'HTML y CSS' comenzado por Elias404, 13 de Junio de 2017.

Tags:
  1. Elias404

    Elias404 Nuevo Miembro

    Se incorporó:
    27 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buenas gente como estoy desarrollando una pagina web para mi especialidad de telecomunicaciones quisiera saber como podria modificar el menu de animaciones que hizo falcon masters para que sea responsive o para que no se deteriore con diferentes resoluciones
    :(
    este es el codigo del menu :
    upload_2017-6-13_18-42-53.png

    * {
    margin:0;
    padding:0;
    }



    header {
    margin-top:10px;
    width: 100%;
    overflow: hidden;
    height: 150px;
    position: relative;
    }

    nav {
    top:-20px;
    position: absolute;
    left:0;
    right:0;
    margin:20px auto;
    max-width:1000px;
    width:90%;
    }

    nav ul {
    list-style:none;
    }

    nav > ul {
    display:table;

    width:100%;
    background:#302A2A;
    position:relative;
    }

    nav > ul li {
    display:table-cell;
    }

    /*Sub-menu*/
    nav > ul > li:hover > ul {
    display:block;
    height:100%;
    }


    nav > ul > li > ul {
    display:block;
    position:absolute;
    background:#302A2A;
    left:0;
    right:0;
    overflow:hidden;
    height:0%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    }

    nav > ul li a {
    color:#fff;
    display:block;
    line-height:20px;
    padding:20px;
    position: relative;
    text-align:center;
    text-decoration:none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    }

    nav > ul > li > ul > li a:hover {
    background:#79ABAE ;
    }

    nav > ul > li > a span {
    background:#174459;
    display:block;
    height:100%;
    width:100%;
    left:0;
    position:absolute;
    top:-55px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    }

    nav > ul > li > a span .icon {
    display:block;
    line-height:60px;
    }

    nav > ul > li > a:hover > span {
    top:0;
    }

    /*Colores*/
    nav ul li a .primero {
    background:#4476C5;
    }

    nav ul li a .segundo {
    background:#E8750A;
    }

    nav ul li a .tercero {
    background:#3F991C;
    }

    nav ul li a .cuarto {
    background:#3b5998;
    }

    nav ul li a .quinto {
    background:#C91A1A;
    }
    nav ul li a .sexto {
    background:#A2AA06;
    }

    nav ul li a .septimo {
    background:#15B7C0;
    }
    nav ul li a .octavo {
    background:#C04B15;
    }
     

    Archivos adjuntos:

  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.235
    Me gusta recibidos:
    550
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    para eso se usan las Media Queries, investiga sobre eso ;)



     
    A Dawud le gusta esto.

Comparte esta página