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

Tema en 'HTML y CSS' comenzado por TzJoelxK, 8 de Diciembre de 2016.

  1. TzJoelxK

    TzJoelxK Miembro

    Se incorporó:
    2 de Febrero de 2016
    Mensajes:
    41
    Me gusta recibidos:
    4
    Puntos de trofeos:
    8
    Género:
    Hombre
    Buenos días amigos.

    El día de hoy he estado haciendo el menú responsive solo con html y css. Y el inconveniente que tengo es que al poner la pantalla a 768px el menu se nota al esconderse.

    Para que me entiendan mejor les pongo una imagen de captura:

    [​IMG]

    Como pueden apreciar, el menú se ve al momento de tener 768px.

    Como puedo hacer para que este no se note.

    CODIGO HTML:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <title>Menu responsive con solo HTHML y CSS</title>
    <link rel="stylesheet" href="estilos.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <header>
    <input type="checkbox" id="btn-menu">
    <label for="btn-menu"><img src="ico-menu.png" alt="menu responsive" /></label>
    <nav>
    <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre mi</a></li>
    <li><a href="#">Mi Portafolio</a></li>
    <li><a href="#">Mis hobbies</a></li>
    <li><a href="#">Contactame</a></li>
    </ul>
    </nav>
    </header>

    <main>
    <hgroup>
    <h1>Menu Responsive</h1>
    <h2>Solo con HTML y CSS</h2>
    </hgroup>
    <article>
    <h3>Titulo</h3>
    <p>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
    </p>
    </article>

    <article>
    <h3>Titulo</h3>
    <p>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
    </p>
    </article>

    <article>
    <h3>Titulo</h3>
    <p>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
    </p>
    </article>

    <article>
    <h3>Titulo</h3>
    <p>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
    </p>
    </article>
    </main>
    </body>
    </html>

    CODIGO CSS:

    *{
    margin:0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    }

    header{
    background-color: #5499C7;
    width: 100%;
    }

    #btn-menu{
    display: none;
    }

    header label{
    display: none;
    height: 34px;
    padding: .5em;
    width: 34px;
    border-right: 1px solid #FFF;
    }

    header label:hover{
    background-color: rgba(0,0,0,.7);
    cursor: pointer;
    }

    nav ul{
    display: flex;
    list-style: none;
    }

    nav li{
    border-right: 1px solid #FFF;
    }

    nav li:hover{
    background-color: rgba(0,0,0,.7);
    }

    nav li a{
    color: #FFF;
    display: block;
    padding: 1em 2em;
    text-decoration: none;
    }

    @media (max-width: 768px){
    header label{
    display: block;
    }

    nav{
    position: absolute;
    background-color: #5499C7;
    width: 70%;
    margin-left: -70%;
    transition: all .5s;
    }

    nav ul{
    flex-direction: column;
    }

    nav li{
    border-top: 1px solid #FFF;
    }

    #btn-menu:checked ~ nav{
    margin: 0%;
    }
    }

    main{
    ´width: 100%;
    }

    main hgroup, main article{
    padding: 1em;
    }

    main hgroup{
    text-align: center;
    background-color: #5D6D7E;
    }

    main article{
    background-color: #D6DBDF;
    margin: .5em auto;
    }


    Espero me ayuden.
    Saludos
     
  2. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    943
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A Dawud le gusta esto.
  3. TzJoelxK

    TzJoelxK Miembro

    Se incorporó:
    2 de Febrero de 2016
    Mensajes:
    41
    Me gusta recibidos:
    4
    Puntos de trofeos:
    8
    Género:
    Hombre
    A que te refieres con mejorar?

    Mi problema es que se ve el momento cuando se oculta el menu, se recorre ese margin: -70%.
     
  4. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    943
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A Dawud le gusta esto.
  5. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    211
    Me gusta recibidos:
    159
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Bueno en si lo quiere decir @AngelKrak es que puedes mejorar el diseño de tu responsive.. Por ejemplo cuando este mas pequeño la pantalla que cubras el 100% del ancho del menu, Otra que utilices otro color al momento de psasar un hover a los elementos del menu, utilizar iconos tales como material design o font awesome u otro en particular...

    Pero se ve bien tu sitio :):):D, No digo que este mal "se puede mejorar cada vez mas con tu creatividad"...

    Menu al 100%
    upload_2016-12-11_3-19-22.png

    SALUDOS....
     
    A AngelKrak le gusta esto.

Comparte esta página