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>
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