返回动画效果的导航...登陆

动画效果的导航

小毛2019-06-16 12:22:12201

slideDown()、slideUp()方法用于导航下拉菜单的升降,尤其方便。

fadeTo()方法改变区块透明度,用来标识鼠标当前所在区块

代码如下:

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <script src="jquery-3.3.1.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        body{background: gray;}
        body>ul{width: 450px;margin: 20px auto;}
        ul{list-style: none;}
        li{width: 150px;height: 30px;text-align: center;}
        body>ul>li{float: left;background: darkred;color: white;position: relative;line-height: 30px;}
        li>ul{position: absolute;display: none;background: firebrick;}
    </style>
</head>
<body>
  <ul>
      <li>产品
          <ul>
              <li>水果</li>
              <li>花草</li>
              <li>虫鱼</li>
          </ul>
      </li>
      <li>新闻
          <ul>
              <li>国内</li>
              <li>国际</li>
              <li>本地</li>
          </ul>
      </li>
      <li>关于我们
          <ul>
              <li>简介</li>
              <li>联系方式</li>
              <li>岗位空缺</li>
          </ul>
      </li>
   </ul>
    

</body>
<script>
    $(function () {
        $("li:has(ul)").hover(
            function () {
                $(this).children('ul').slideDown(100);
            },
            function () {
                $(this).children('ul').slideUp(10);
            }
        );
        $("li>ul>li").hover(
            function () {
                $(this).fadeTo(200,0.3);
            },
            function () {
                $(this).fadeTo(100,1);
            });


    });
</script>
</html>

效果图

QQ截图20190616121656.jpg


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网