HTML 网站菜单动画

HTML website menu animation

本文关键字：动画 菜单 网站 HTML      更新时间：2023-09-26

HTML：

<div id="menu" class="menu">
        <ul class="headlines">
            <li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
            <li id="item2"><button onclick="myFunction2()">A </button></li>
            <li id="item3">B      </li>
            <li id="item4">C      </li>
            <li id="item5">D      </li>
            <li id="item6">E      </li>
            <li id="item7">F      </li>
        </ul>
        </div>

.CSS：

lu, li{
    list-style-type: none;
    font-size: 1.5em;
    height: 40px;
    width: 150px;
    text-align: right;    
    border-style: none;
}
.menu{
    width:150px;
    height: 350px;
    margin:0 auto;
}

.menu li{  
position: relative;
  top:150px;
  bottom: 0;
  right: 0;
  margin: auto; 
  border-style:none;  
}

我想对这个菜单进行动画处理，该菜单位于我的网站中间，以这种形式/在单击其元素之一时转到最终左侧。有什么帮助吗？

这是Jquery的快速部分，它将向左单击的li;

$(".headlines li").click(function () {
    $(this).animate({left: '-300px'}, 600)
})

编辑

要在单击链接时移动所有这些，请在普通菜单CSS下方创建CSS，

.menuclicked{
    position: relative;
    width:150px;
    height: 350px;
    left: -300px;
    transition: all 1s;
}

然后使用这个 JQuery;

$(".headlines li").click(function () {
   $(".menu").addClass("menuclicked");
})

编辑 2（添加延迟）

为了使它们一次一个，我们在动画之间使用.delay来错开它们。

$(".headlines li").click(function () {
            $("#item1").animate({left: '-300px'}, 600)
            $("#item2").delay(100).animate({left: '-300px'}, 600)
            $("#item3").delay(200).animate({left: '-300px'}, 600)
            $("#item4").delay(300).animate({left: '-300px'}, 600)
            $("#item5").delay(400).animate({left: '-300px'}, 600)
            $("#item6").delay(500).animate({left: '-300px'}, 600)
            $("#item7").delay(600).animate({left: '-300px'}, 600)
})
相关文章：