沼泽类在移动菜单中反弹

时间:2018-04-01 17:31:21

标签: jquery css

我无法通过交换班级来切换导航以更改边距。以console.log元素而非按类定位是不好的做法? nav可以上课吗?

我试图制作它,以便点击页面或链接,然后菜单关闭。

我更改了nav,然后将该类交换为margin: 0 -250px 0 0;

这是我的剧本:

margin: 0 0 0 0;

我的HTML:

$('#menu-icon').click(function() {
    $(this).toggleClass('nav');
    $(this).toggleClass('navclick');
});

我的CSS:

<div class="minimenu">
    <div class="minim" for="navigation">
        <a class="far fa-user" href="#M"></a>&nbsp;
        <i class="fas fa-bars" id="menu-icon"></i>
    </div>
    <nav>
        <ul class="mobileT">
            <li><a id="silentp1">Home</a></li>
            <li><a id="silentp1-2">About Us</a></li>
            <li><a id="silentp1-3">Our Team</a> </li>
            <li><a id="silentp1-4">Contact Us</a></li>
            <li><a id="silentp1-5">Sign Up</a></li>
            <li><a href="#M">Login</a></li>
         </ul>
    </nav>
</div>

1 个答案:

答案 0 :(得分:0)

我更喜欢使用函数addClass()或removeClass()。

标记<nav>支持所有全局属性,例如class,id等。(请参阅https://www.w3schools.com/tags/tag_nav.asp

例如:

.navclick{
    position:fixed;
    top:3.2em;
    right:0;
    width:250px;
    height:80%;
    margin:0 0 0 0;

    -moz-transition:all 300ms cubic-bezier(0.77,0.2,0.05,1.0);
    -webkit-transition:all 300ms cubic-bezier(0.77,0.2,0.05,1.0);
    -o-transition:all 300ms cubic-bezier(0.77,0.2,0.05,1.0);
    transition:all 300ms cubic-bezier(0.77,0.2,0.05,1.0);

}

和js

$('.menu-icon').click(function() {
   if($("nav").hasClass('navclick')){
       $("nav").removeClass('navclick')
   }else{
      $("nav").addClass('navclick')
   }
});

OR

您可以使用边距更改jquery函数动画。见https://www.w3schools.com/jquery/jquery_animate.asp