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

Nuevas preguntas

2 Javascript .on ('click' no funciona en span
2 Javascript-JQuery cuando
2 Los datos se envían a través de la solicitud Ajax pero el script PHP no se recibe
2 ¿Por qué mi llamada ajax hace que la página no responda en la segunda llamada?
2 Combinando múltiples funciones .change en una usando Jquery
2 ¿Cómo se puede reutilizar el código de carga de jQuery para las miniaturas 2 y 3?
2 ¿Cómo filtrar los elementos de una respuesta html ajax antes de insertarla en el documento?
2 Moment JS: Countdown no calcula la diferencia correcta y la lleva a la cuenta atrás
2 Obtenga múltiples valores de las entradas en vivo JQuery
2 ¿Cómo obtengo una clase haciendo clic en una imagen con jQuery?
Nuevas preguntas con la etiqueta jquery >

jquery

jQuery es una biblioteca Javascript, considere también agregar la etiqueta 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 utilizado por el código en cuestión y al menos los elementos relacionados con el uso de jQuery deben estar en la pregunta.

jquery...