-1

Busco crear menu lateral desplegable usando el checkbox El menu desplegable funciona correctamente con firexfox pero no en chrome

/*NORMALICE*/
*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
	box-sizing: border-box;
}
:root{
	--gray_1: hsla(246, 0%, 24%, 1);
	--gray_2: hsla(246, 0%, 32%, 1);
	--gray_3: hsla(246, 0%, 40%, 1);
	--gray_4: hsla(246, 0%, 50%, 1);
	--gray_5: hsla(246, 0%, 65%, 1);
	--text-color: white;

	--size_h0: 20px;
	--size_h1: 18px;
	--size_h2: 16px;
	--size_h3: 14px;
	--size_h4: 12px;
	--size_h5: 10px;
}
body{
	/*background: whitesmoke;*/
	background: hsla(0,0%,15%,1);
}
h1,h2,h3,h4,h5,h6,p{
	font-family: sans-serif;

}
h1,h2,h3,h4,h5,h6,p,picture{
	margin: 0;
}
picture{
	/*padding: 0;*/
}
main{
	width: 100%;
}
body,h1
{
	margin: 0;
}

ul{
	list-style: none;
}
a{
	text-decoration: none;
	color: whitesmoke;
}
p{
	font-size: 20px;
}
.fxc{
	display: flex;
	justify-content: center;
	align-items: center;
}
.fxcc{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*---------------------------------------*/


@media screen and (max-width: 320px)  {
      body{
          /*background: red;*/
        }
        #main{
          display: grid;
          grid-template-columns: repeat(12,1fr);
          grid-template-rows: 60px auto auto auto;
          grid-gap: 13px;

        }

        #header{
          grid-column: 1 / 13;
          display: flex;		
          justify-content: center;
          background: var(--gray_1);
          position: relative;
        }
        #section{
          grid-column: 1 / 13;
          color: white;
          background: var(--gray_2);
          padding: 14px 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
        #footer{
          grid-column: 1 / 13;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          background: var(--gray_3);
        }


    .icons_header_1{
        /*Flex Center Activo # > picture*/
        position: absolute;
        right: 0;
        padding: 0px 5px;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;/*No Chrome*/
        cursor: pointer;

      }
    .icons_header_1 picture img{
      max-height: 60px;
      height: 100%;
    }
    .icons_header_1:hover{
      background: var(--gray_5);
    }
    
/*-----------------FUNCIONA EN FIREXFOX Y NO EN CHROME-------------------------*/

    #header section{
      background: var(--gray_3);
      width: 100%;
      position: fixed;
      bottom: 0;
      top: 0;
      height: 100vh;
      left: 0px;
      transition: all .35s;
    }
   
    #header input[type="checkbox"]:checked ~ #menu-caja{
      left: 500px;
    }
/*------------------------------------------*/


    #header #menu-caja label {
      top: 0;
      right: 0;
      overflow: hidden;
      position: absolute;
      transition: all .2s;
      cursor: pointer;
    }
    #header #menu-caja article:nth-child(1):hover{
      background: var(--gray_4);
    }
    #header #menu-caja article picture{
      max-width: 70px;
      max-height: 70px;
    }
    #header #menu-caja article picture img{
      width: 80px;
      height: 80px;
      padding: 0px 20px;
      transform: rotate(90deg);
    }
    #header #menu-caja article{
      width: 100%;
    }
    #nav{
      width: 100%;
    }
    #nav ul li a{
      width: 100%;
      cursor: pointer;
      transition: all .2s;
      padding: 15px 0px;
      font-family: sans-serif;
    }
    #nav ul li a:hover{
      background: var(--gray_1);
    }


}
<main id="main">
		<header id="header" class="fxc">
			<div id="title">
				<h1>TITULO</h1>
			</div>	
      
      <!-- BOTON -->
			<input id="menu-btn_duo" type="checkbox"  style="">
			
			<div class="icons_header_1">
				<label for="menu-btn_duo">
					<picture class="fxc">
						<img src="<?php echo ICONS_IMG ?>menu-btn.png" alt="menu-btn">
					</picture>
				</label>
			</div>

			<!-- MENU DESPLEGABLE -->
			<section id="menu-caja" class="fxcc">
				<label for="menu-btn_duo">
					<article>
						<picture class="fxc">
							<img src="<?php echo ICONS_IMG ?>menu-btn-2.svg" alt="menu_salir">
						</picture>
					</article>
				</label>
				<article>
					<nav id="nav">
						<ul>
							<li class="fxcc">
								<a class="fxc" href="">INICIO</a>
								<a class="fxc" href="">NOTICIAS</a>
								<a class="fxc" href="">LOGIN</a>
								<a class="fxc" href="">REGISTRO</a>
							</li>
						</ul>
					</nav>
				</article>
			</section>
		</header>
   </main>

6
  • 1
    ¿Que es lo que no funciona? ¿Cual es el problema?
    – JDev
    Commented el 8 may. 2019 a las 14:36
  • y no me aplica el css en chrome y si en firexfox
    – Gamez
    Commented el 8 may. 2019 a las 14:41
  • Espera para editar la pregunta
    – Gamez
    Commented el 8 may. 2019 a las 14:45
  • Ya modifique la pregunta
    – Gamez
    Commented el 8 may. 2019 a las 14:56
  • El CSS que tienes definido para que se aplique cuando el checkbox esté seleccionado no te va a funcionar jamas. Para poder definir el left de un elemento necesitas que dicho elemento tenga un position, que en tu caso no lo tiene. Si explicas lo que pretendes hacer con esa regla CSS quizás podríamos ayudarte.
    – phpMyGuel
    Commented el 8 may. 2019 a las 15:02

2 respuestas 2

1

Saludos puedes intentar algo como lo siguiente:

body{
    text-align: center;
    font: 16px/1.5 sans-serif;
    padding-top: 40px;
    background-color: #ECEFF1;
}

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
}

/**
 Oculta el checkbox para dar un mejor aspecto visual
 usaremos el label para mostrar/ocultar el menu(ul) 
*/

input[type=checkbox]{
    display: none;
}

/* Click para expandir el menu */

label{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: #57A0D4;
    padding: 15px 20px;

    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ul tendra  display:none por defecto */

ul{
    position: absolute;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    margin:0;
    padding:0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    display: none;
}

ul li{
    padding: 15px;
    background-color: #fff;
    color: #4FB9A7;
    margin-bottom: 1px;
    cursor: pointer;
}

ul li:hover{
    background-color: #4FB9A7;
    color: #FFF;
}

ul li a{
    color: inherit;
    text-decoration: none;
}

/**
 Usando el selector (~) determinaremos un color al ser seleccionado y a su vez mostrar el menu(ul)
*/

input[type=checkbox]:checked ~ label {
    background-color: #3D88BD;
}

input[type=checkbox]:checked ~ ul {
    display: block;
}
<div class="dropdown">
  <input type="checkbox" id="checkbox-toggle">
  <label for="checkbox-toggle">Menu Principal</label>
  <ul>
    <li><a href="#">Opcion 1</a></li>
    <li><a href="#">Opcion 2</a></li>
    <li><a href="#">Opcion 3</a></li>
    <li><a href="#">Opcion 4</a></li>
  </ul>
</div>

Bueno partiendo de tu codigo decidí darle un mejor aspecto, ocultando por defecto el checkbox y usando el label como medio de acción para mostrar/ocultar el menu(ul).

Tambien se agrega algo de color de fondo al estar seleccionado el checkbox mediante el selector(~).

Sin mas pruebalo y comentame lo he testeado en Firefox y Chrome sin problemas, espero te sirva y suerte..!!

1
  • Gracias. Problema solucionado
    – Gamez
    Commented el 8 may. 2019 a las 15:11
0

El problema estubo al llamar con #header y luego al input; esto indica que chrome tiene problemas al identificar ese tipo de llamada en cascadas

/* FUNCIONA SOLO EN FIREXFOX */
#header input[type="checkbox"]:checked ~ #menu-caja{
      left: 500px;
    }
   
/* FUNCIONA EN FIREXFOX Y CHROME */
input[type="checkbox"]:checked ~ #menu-caja{
      left: 500px;
}

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.