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>
jquery html css
0
Sameer Moin 29 ago. 2019 a las 09:39

3 respuestas

La mejor respuesta

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>
1
Sumit Patel 29 ago. 2019 a las 11:49 
$(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>
0
Akash Singh 29 ago. 2019 a las 07:11

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.

0
Vivek Verma 29 ago. 2019 a las 06:54
57704377

Preguntas relacionadas

2 Abrir submenú solo después de hacer clic en padre

Nuevas preguntas

3 regex para separar párrafos por doble línea nueva
2 ¿Cómo almacenar los datos recuperados del servidor en una matriz con JavaScript?
2 Mostrar u ocultar el campo en el formulario MVC basado en el valor de Viewbag usando JavaScript
2 Ejecute Javascript después de que se haya cargado Div poblado con Javascript
2 ¿Se puede usar jQuery .each al establecer un intervalo dentro de que establece el .html () de un elemento?
2 El valor de entrada está establecido y es visible pero no accesible en otro script
2 Crear objeto anidado a partir de entradas
2 ¿Cómo puedo crear un botón de "leer más" para varios elementos de texto?
4 ¿Eliminar solo el último _ en una cadena usando split ()?
2 Dale a un artículo la clase de los hijos de otro artículo con jQuery o JS (carrusel de búhos)
Nuevas preguntas con la etiqueta jquery >

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.

Más sobre jquery...