Отзывчивое меню jquery - PullRequest
       9

Отзывчивое меню jquery

0 голосов
/ 27 августа 2018

У меня проблема с этим кодом jquery. Я хотел бы, чтобы при нажатии на «openmenu» «closemenu» двигалось left: 50%, а не left: 85%

$("#openMenu").click(function(){
    $("#closeMenu").animate({left:"50%"}); 

вместо

$("#closeMenu").animate({left:"85%"});

Код:

$(document).ready(function(){
  $("#openMenu").click(function(){
    $("#main") .fadeIn(200);
    $("#openMenu").animate({left:"-100%"});
    $("#closeMenu").animate({left:"85%"});
    $(".menu").animate({left:"-1%"},10);
  });

  $("#closeMenu").click(function(){
    $("#main") .fadeOut(200);
    $("#openMenu").animate({left:"3%"});
    $("#closeMenu").animate({left:"100%"});
    $(".menu").animate({left:"-50%"},10);
  });
});
#menuSection{
  height: 100%;
  width: 50%;
  background-color: #e78d3a;
  position: absolute;
  left: 50%;
  background-image: url("../images/background_secondary-home.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
  
#menuSection ul{
  list-style: none;
  margin: 0px;
  padding:0px;
  position: absolute;
  top: 30%;
  left: -1%;
}


#menuSection ul li{
  height: 100px;
  width: 350px;
  font-family:'Poppins', sans-serif;
  font-size: 60px;
  line-height: 100px;
  cursor: pointer;
  font-weight: 600;
}


.menu{
  height: 100px;
  width: 0px;
  background-color: #ff931e;
  display: flex;
  position: absolute;
  left: -50%;
  cursor: pointer;
  pointer-events: none;
  transition: all .5s;
}

#menuSection ul li:hover .menu{
  width: 350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Pulse Menu -->
<div  class="pulse" id="openMenu">
    <img class="img-responsive icon-menu_open" src="images/icon-menu_open.svg">
</div>
<!--/Pulse Menu -->

<!-- Menu -->
<div id="closeMenu">
    <i class="fa fa-times icon-menu" style="font-size: 25px;color:rgb(238, 238, 238);position: absolute;top: 30%;left: 100%;"></i>
</div>

Я новичок, и я хотел бы знать, есть ли какая-либо ответственность за jquery

1 Ответ

0 голосов
/ 27 августа 2018

В вашем коде jQuery есть строка 5:

$("#closeMenu").animate({left:"85%"});

Попробуйте изменить его на:

$("#closeMenu").animate({left:"50%"});
...