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

Ocultar menú automaticamente

Tema en 'Diseño web' comenzado por javierrosas, 24 de Noviembre de 2017.

  1. javierrosas

    javierrosas Nuevo Miembro

    Se incorporó:
    24 de Enero de 2015
    Mensajes:
    6
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Una pregunta, cuando veo la página en celular, como puedo hacer que el menú desaparezca al momento de elegir una sección de mi página ?

    Por ejemplo, le doy click en el icono de hamburguesa, y selecciono servicios o contacto o lo que sea, y el menú se queda desplegado hasta que le vuelvo a dar click a ese icono se oculta, y quiero que se oculte al elegir una opción de dicho menú.

    Quiero que mi menú haga algo como este en tamaño tablet o celular

    http://www.sunstylevlc.com/rayosuva/

    Gracias de antemano.

    javierrosas4444@gmail.com
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.477
    Me gusta recibidos:
    682
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    solamente tienes que crear un codigo casi identico al que tiene para mostrarlo y ocultarlo pero que interactue con las secciones y que se oculte ;)
     
    A hask le gusta esto.
  3. javierrosas

    javierrosas Nuevo Miembro

    Se incorporó:
    24 de Enero de 2015
    Mensajes:
    6
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre

    Este es mi codigo
    <div id ="header">

    <img src="img/LogoAAJ_Sistemas100x300.png" >

    <input type="checkbox" id="btn-menu">
    <label for="btn-menu">
    <img src="img/icon_menu.png" alt="">
    </label>
    <nav class="menu">
    <ul>
    <li><a href="#inicio">Inicio</a></li>
    <li><a href="#nosotros">Nosotros</a></li>
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#portafolio">Portafolio</a></li>
    <li><a href="#contacto">Contacto</a></li>
    </ul>
    </nav>

    </div>


    CSS

    .menu{
    position: absolute;
    padding-top: 20px;
    margin-right: 70px;
    width: 100%;
    height: 100px;
    transition: all 0.5s;
    transform: translateX(-100%);
    }

    @media (min-width: 750px){
    .menu{
    position: static;
    width: auto;
    height: auto;
    transform: translateX(0%);
    float: right;
    display: flex;
    }

    .menu a{
    border: none;
    }

    header label{
    display: none;
    }
    }
     
  4. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.477
    Me gusta recibidos:
    682
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    y cual es el codigo que habre el menu? imagino que esta hecho con js
     
  5. javierrosas

    javierrosas Nuevo Miembro

    Se incorporó:
    24 de Enero de 2015
    Mensajes:
    6
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    archivo menu.css



    .menu{
    position: absolute;
    padding-top: 20px;
    margin-right: 70px;
    width: 100%;
    height: 100px;
    transition: all 0.5s;
    transform: translateX(-100%);
    }



    @media (min-width: 750px){
    .menu{
    position: static;
    width: auto;
    height: auto;
    transform: translateX(0%);
    float: right;
    display: flex;
    }

    .menu a{
    border: none;
    }

    header label{
    display: none;
    }
    }
     
  6. javierrosas

    javierrosas Nuevo Miembro

    Se incorporó:
    24 de Enero de 2015
    Mensajes:
    6
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    archivo estilos.css
    @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    @import url(menu.css);

    *{
    margin:0;
    padding:0;
    list-style:none;
    font-family: 'Josefin Sans', sans-serif;
    }

    #contenedor{
    /*background-color:#23CAE0;
    background-color:#087E8B;*/
    background-color: #F7F9F9;
    height: auto;
    }

    #header{
    background-color:#024959; /*087E8B */
    border-bottom:2px solid #23CAE0;
    width: 100%;
    padding: 5px;
    height: auto;
    box-sizing: border-box;
    position: fixed;
    z-index: 10;
    }

    #header img{
    padding-left: 25px;
    }

    hr.style13 {
    width: 50%;
    height: 10px;
    border: 0;
    box-shadow: 0 10px 10px -10px #99FF00 inset;
    }

    #btn-menu{
    display: none; /*Muestra la caseta del check */
    }


    /*/////////////////////////////////////////////////////////// Entre 481 y 768px | Celular posición horizontal ////////////////////////////////////////////////////////*/
    @media only screen and (max-width: 768px) and (min-width: 481px) { /*(max-width: 620px) and (min-width: 501px)*/
    #header label{
    display: block;
    }

    #header .menu{
    padding-top:7px;
    position: absolute;
    width: 40%;
    margin-left: -20%;
    transition: all 0.8s;
    }

    #header .menu ul{
    flex-direction: column;
    }

    #header .menu li{
    border-bottom: 1px solid #F4FFFD;
    }

    #btn-menu:checked ~ .menu{
    margin-left: 38%;
    }

    #btn-menu img{
    padding-left:600px;
    }

    /*//////////////////////////////////////////// ////////////// Entre 321 y 480px | Celular posición vertical///////////////////////////////////////////////////////////*/

    @media only screen and (max-width: 480px) and (min-width: 321px) { /*(max-width: 500px) and (min-width: 341px)*/
    #header label{
    display: block;
    }

    #header .menu{
    padding-top:7px;
    position: absolute;
    width: 50%;
    margin-left: -50%;
    transition: all 0.8s;
    }

    #header .menu ul{
    flex-direction: column;
    }

    #header .menu li{
    border-bottom: 1px solid #F4FFFD;
    }

    #portafolio .list-imagen li{
    margin-right: 20px;
    margin-bottom: 5px;
    list-style: none;
    padding-top: 15px;
    }

    #btn-menu:checked ~ .menu{
    margin-left: 45%;
    }
     
  7. javierrosas

    javierrosas Nuevo Miembro

    Se incorporó:
    24 de Enero de 2015
    Mensajes:
    6
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    y en index.html tengo esto:




    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>

    </div>

    <br>

    </body>
    </html>
     
  8. javierrosas

    javierrosas Nuevo Miembro

    Se incorporó:
    24 de Enero de 2015
    Mensajes:
    6
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Y mis archivos js son :
     

    Archivos adjuntos:

  9. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.477
    Me gusta recibidos:
    682
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:

Comparte esta página