Tengo un botón de alternar en mi sitio de práctica. Al hacer clic, hace alguna transición y hace una cruz o una X. Estoy usando un poco de CSS para hacer una cruz con las líneas superior e inferior y al ocultar la del medio. El problema es que después de las transiciones, la línea media no se oculta y crea una * forma similar.
Intenté la visibilidad: ninguno en el medio, pero hace que no se vea ningún botón de alternar.
También intenté cambiando el color de fondo de la línea media igual que el color de fondo de la cubierta, pero esto tampoco funciona.
header nav.small-menu {
background: #fff;
width: 100%;
height: 5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: .9;
z-index: 2;
}
header nav.small-menu .logo {
position: absolute;
top: .9rem;
left: 2rem;
height: 80px;
width: 100px;
transition: .8s;
z-index: 2;
}
header .navigation .toggle {
background: var(--primary-white);
position: absolute;
width: 35px;
height: 4px;
top: 3rem;
left: 73rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
z-index: 1;
}
header .navigation .togglesmall {
width: 35px;
height: 4px;
top: 2.5rem;
left: 73rem;
background: var(--primary-blue);
}
header .navigation .togglesmall::before,
header .navigation .togglesmall::after {
background: var(--primary-blue);
}
header .navigation .toggle::before,
header .navigation .toggle::after {
position: absolute;
content: '';
background: var(--primary-white);
width: 35px;
height: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
}
header .navigation .toggle::before {
top: -14px;
}
header .navigation .toggle::after {
top: 14px;
}
header .navigation .toggle.active::before {
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(45deg);
z-index: 1;
}
header .navigation .toggle.active::after {
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(135deg);
z-index: 1;
}
header .navigation .overlay {
background: var(--primary-blue);
position: fixed;
top: 28px;
right: 53px;
width: 45px;
height: 45px;
border-radius: 50%;
transition: all .5s ease-out;
opacity: 0.7;
visibility: hidden;
cursor: pointer;
}
header .navigation .overlay.active {
transform: scale(100, 100);
visibility: visible;
cursor: pointer;
}
header .navigation .menu {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
}
header .navigation .menu.active {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<html>
<body>
<header>
<nav class="navigation">
<div class="logo">
</div>
<div class="main-menu">
<div class="toggle"></div>
<div class="overlay"></div>
<div class="menu">
</div>
</div>
</nav>
</header>
<script src="js/jquery-3.4.1.min.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active');
$('.overlay').toggleClass('active');
$('.menu').toggleClass('active');
});
});
$(window).on('scroll', function() {
if ($(window).scrollTop() == 0) {
$('nav').removeClass('small-menu');
$('.navigation .main-menu .toggle').removeClass('togglesmall');
} else {
$('nav').addClass('small-menu');
$('.navigation .main-menu .toggle').addClass('togglesmall');
}
});
</script>
3 respuestas
Intente agregar css mientras está activa la clase.
$(document).ready(function() {
$('.toggle').click(function() {
$('.toggle').toggleClass('active');
$('.overlay').toggleClass('active');
$('.menu').toggleClass('active');
});
});
$(window).on('scroll', function() {
if ($(window).scrollTop() == 0) {
$('nav').removeClass('small-menu');
$('.navigation .main-menu .toggle').removeClass('togglesmall');
} else {
$('nav').addClass('small-menu');
$('.navigation .main-menu .toggle').addClass('togglesmall');
}
});
body{background: #000;}
header nav.small-menu {
background: #000;
width: 100%;
height: 5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: .9;
z-index: 2;
}
header nav.small-menu .logo {
position: absolute;
top: .9rem;
left: 2rem;
height: 80px;
width: 100px;
transition: .8s;
z-index: 2;
}
header .navigation .toggle {
background: #fff;
position: absolute;
width: 35px;
height: 4px;
top: 3rem;
left: 73rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
z-index: 1;
}
header .navigation .togglesmall {
width: 35px;
height: 4px;
top: 2.5rem;
left: 73rem;
background: var(--primary-blue);
}
header .navigation .togglesmall::before,
header .navigation .togglesmall::after {
background: var(--primary-blue);
}
header .navigation .toggle::before,
header .navigation .toggle::after {
position: absolute;
content: '';
background: #fff;
width: 35px;
height: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
}
header .navigation .toggle::before {
top: -14px;
}
header .navigation .toggle::after {
top: 14px;
}
header .navigation .toggle.active::before {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(45deg);
z-index: 1;
}
header .navigation .toggle.active::after {
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(135deg);
z-index: 1;
}
header .navigation .overlay {
background: #fff;
position: fixed;
top: 28px;
right: 53px;
width: 45px;
height: 45px;
border-radius: 50%;
transition: all .5s ease-out;
visibility: hidden;
cursor: pointer;
}
header .navigation .overlay.active {
transform: scale(100, 100);
visibility: visible;
cursor: pointer;
}
header .navigation .menu {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
}
header .navigation .menu.active {
visibility: visible;
}
header .navigation .toggle.active {
box-shadow: none;
background: transparent;
}
.overlay.active { opacity: .7; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav class="navigation">
<div class="logo">
</div>
<div class="main-menu">
<div class="toggle"></div>
<div class="overlay"></div>
<div class="menu">
</div>
</div>
</nav>
</header>
$(document).ready(function(){
$('.toggle').click(function(){
$('.toggle').toggleClass('active');
$('.overlay').toggleClass('active');
$('.menu').toggleClass('active');
});
});
$(window).on('scroll',function(){
if ($(window).scrollTop() == 0){
$('nav').removeClass('small-menu');
$('.navigation .main-menu .toggle').removeClass('togglesmall');
}
else{
$('nav').addClass('small-menu');
$('.navigation .main-menu .toggle').addClass('togglesmall');
}
});
header nav.small-menu{
background: #fff;
width: 100%;
height: 5rem;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
opacity: .9;
z-index: 2;
}
header nav.small-menu .logo{
position: absolute;
top: .9rem;
left: 2rem;
height: 80px;
width: 100px;
transition: .8s;
z-index: 2;
}
header .navigation .toggle{
background: var(--primary-white);
position: absolute;
width: 35px;
height: 4px;
top: 3rem;
left: 73rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
z-index: 1;
transition: 0.3s linear;
}
header .navigation .toggle.active{
box-shadow: none;
transition: 0.3s linear;
}
header .navigation .togglesmall{
width: 35px;
height: 4px;
top: 2.5rem;
left: 73rem;
background: var(--primary-blue);
}
header .navigation .togglesmall::before,
header .navigation .togglesmall::after{
background: var(--primary-blue);
}
header .navigation .toggle::before,
header .navigation .toggle::after{
position: absolute;
content: '';
background: var(--primary-white);
width: 35px;
height: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: all .5s ease-out;
cursor: pointer;
}
header .navigation .toggle::before{
top: -14px;
}
header .navigation .toggle::after{
top: 14px;
}
header .navigation .toggle.active::before{
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(45deg);
z-index: 1;
}
header .navigation .toggle.active::after{
background: var(--primary-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
top: 0;
transform: rotate(135deg);
z-index: 1;
}
header .navigation .overlay{
background: var(--primary-blue);
position: fixed;
top: 28px;
right: 53px;
width: 45px;
height: 45px;
border-radius: 50%;
transition: all .5s ease-out;
opacity: 0.7;
visibility: hidden;
cursor: pointer;
}
header .navigation .overlay.active{
transform: scale(100, 100);
visibility: visible;
cursor: pointer;
}
header .navigation .menu{
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
visibility: hidden;
}
header .navigation .menu.active{
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav class="navigation">
<div class="logo">
</div>
<div class="main-menu">
<div class="toggle"></div>
<div class="overlay"></div>
<div class="menu">
</div>
</div>
</nav>
</header>
Al hacer clic, solo tiene que eliminar la propiedad box-shadow del encabezado de la clase css .navigation .toggle y funcionará.
Entonces, después de hacer clic en el menú, inspeccione el elemento y simplemente desactive la propiedad box-shadow para verificar el resultado.
Preguntas relacionadas
Nuevas preguntas
jquery
jQuery es una biblioteca de JavaScript, considere también agregar la etiqueta de JavaScript. jQuery es una popular biblioteca JavaScript entre navegadores que facilita el recorrido del Modelo de objetos de documento (DOM), el manejo de eventos, las animaciones y las interacciones AJAX al minimizar las discrepancias entre los navegadores. Una pregunta etiquetada jQuery debe estar relacionada con jQuery, por lo que jQuery debe ser utilizada por el código en cuestión y al menos los elementos relacionados con el uso de jQuery deben estar en la pregunta.