0

Tengo un menu horizontal hecho pero ahora quiero que cuando la pantalla sea mas o menos del tamaño del celular apareza un icono el cual si lo tocas se despliega el menu en forma vertical mi unico problema es que no me aparece el menu cuando hago click en el icono que tiene la clase check

body{
    background: #786767;
    
}

header{
    width: 100%;
    height:90px;
    background: white;
    position: fixed;
    z-index: 100;
}

.container-header{
    width: 100%;
    max-width: 2000px;
    position: relative;

    display: flex;

}
.container-logo-title{
    display: flex;

}

.container-logo-title img{
   width: 80px;
   height: 80px;
   margin-left: 10%;
   padding: 2px;
   margin-top:5px 
}

.container-logo-title H1
{
    font-weight: 500;
    margin-top: 23px;
    margin-left: 10PX;
    font-size: 25px;
}

.container-menu{
    position: absolute;
    right: 0px;
}

.menu ul{
    display: flex;
    margin-right: 20px;
    margin-left: 10px;     
}

.menu ul li{
    list-style: none;
    float:right;
    margin-top: 30px;
    margin-left: 10px;
    font-size: 20px;
}


#check
{
    display:none;
}
    
.icon-menu    
{
    justify-content: flex-end;
    display:none;
}

.menu li  a {
    padding: 15px;
    position: left;
    text-decoration: none;
    color: black;
    font-size: 20px;

}

.menu li  a:hover {
    background: #9D0B1D;
    border-radius: 20px;
}

@media(max-width: 888px){
    .container-logo-title H1
    {margin-top: 29px;

        font-size: 18px;}

        header label{
            display: block;
        }
        .menu {

          position: absolute;
          background: white;
          width: 70%;
          margin-left: -70%; /*como es negativo se sale del pantalla*/

          transition: all 0.5s;
          float: right;

          margin: 90px;


          border-radius: 20px;
      }
      .menu ul{
        flex-direction: column;
    }

    .icon-menu
    { 

        display: flex;
        margin-left: auto;
        font-size: 25px;
        margin-right: 8px;
        margin-top: 18px;
        padding-top: 11px

    }
    .icon-menu:hover{

        background: #9D0B1D;
        border-radius: 30px;
        cursor:pointer;


    }

    .check:checked ~.menu{
       padding:0px;
       z-index: 300px;
   }

}
<div class="container-header"> 
	<div class= "container-logo-title">
		<img src="imagenes/logo.jpg" class="img-logo">
		<H1>MELAMOBLAMIENTOS</H1>
	</div>

	<input type="checkbox" id="check"  id ="btn-menu">
	<label for="check" class="icon-menu"></label>


	<div class="container-menu">
		<nav class= "menu">
			<ul>
				<li><a href="#Inicio">Inicio</a></li>
				<li><a href="#Servicios">Servicios</a></li>
				<li><a href="#Trabajos">Trabajos</a></li>
				<li><a href="#Contacto">Contacto</a></li>
			</ul>
		</nav>
	</div>
</div>

1 respuesta 1

0

Utiliza Bootstrap con los NavBar, automáticamente te crea el menú como lo necesitas, te dejo la documentación para que veas unos ejemplos:

NavBar Bootstrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MELAMOBLAMIENTOS</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#Inicio">Inicio</a>
      <a class="nav-item nav-link" href="#Servicios">Servicios</a>
      <a class="nav-item nav-link" href="#Trabajos">Trabajos</a>
      <a class="nav-item nav-link" href="#Contacto">Contacto</a>
    </div>
  </div>
</nav>

Así quedaría tu menú creado con Bootstrap

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.