登录

jquery + easing.js 点击抽屉式展开收缩/显示隐藏菜单子菜单特效代码

本文jQuery效果特点是:如下图,鼠标点击展开子菜单的时候,另一个主菜单会自动关闭,仅保持一个主菜单展开状态

如上图,本文分享的就是关于jQuery + easing.js实现抽屉式的展开收缩、显示隐藏子菜单的效果

重点:切换的时候,一个主菜单展开会关闭和隐藏另一个菜单下的子菜单

这种特效非常适合用于各种网站的菜单中,特别是侧栏菜单,适合子菜单比较多时使用!

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>树型菜单</title>
<style>
/*简单粗暴重置默认样式===============================*/
 *{ margin: 0; padding: 0; }
 img{border:0;}
 ul,li{list-style-type:none;}
 a {color:#00007F;text-decoration:none;}
 a:hover {color:#bd0a01;text-decoration:underline;}
 .treebox{ width: 200px; margin: 0 auto; background-color:#1a6cb9; }
 .menu{ overflow: hidden; border-color: #ddd; border-style: solid ; border-width: 0 1px 1px ; }
 /*第一层*/
 .menu li.level1>a{
  display:block;
  height: 45px;
  line-height: 45px;
  color: #fff;
  padding-left: 50px;
  border-bottom: 1px solid #000;
  font-size: 16px;
  position: relative;
  }
  .menu li.level1 a:hover{ text-decoration: none;background-color:#326ea5;   }
  .menu li.level1 a.current{ background: #0f4679; }
 /*============修饰图标*/
  .ico{ width: 20px; height: 20px; display:block;   position: absolute; left: 20px; top: 10px; background-repeat: no-repeat; background-image: url(images/ico1.png); }
  /*============小箭头*/
  .level1 i{ width: 20px; height: 10px; background-image:url(images/arrow.png); background-repeat: no-repeat; display: block; position: absolute; right: 20px; top: 20px; }
 .level1 i.down{ background-position: 0 -10px; }
  .ico1{ background-position: 0 0; }
  .ico2{ background-position: 0 -20px; }
  .ico3{ background-position: 0 -40px; }
  .ico4{ background-position: 0 -60px; }
                .ico5{ background-position: 0 -80px; }
  /*第二层*/
  .menu li ul{ overflow: hidden; }
  .menu li ul.level2{ display: none;background: #0f4679;  }
  .menu li ul.level2 li a{
   display: block;
  height: 45px;
  line-height: 45px;
  color: #fff;
  text-indent: 60px;
  /*border-bottom: 1px solid #ddd; */
  font-size: 14px;
  }
</style>
</head>
<body>
<div>
 <ul>
  <li>
   <a href="#none"><em class="ico ico1"></em>导航一<i></i></a>
   <ul>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
   </ul>
  </li>
  <li>
   <a href="#none"><em class="ico ico2"></em>导航一<i></i></a>
   <ul>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
   </ul>
  </li>
  <li>
   <a href="#none"><em class="ico ico3"></em>导航一<i></i></a>
   <ul>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
   </ul>
  </li>
  <li>
   <a href="#none"><em class="ico ico4"></em>导航一<i></i></a>
   <ul>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
   </ul>
  </li>
                       <li>
   <a href="#none"><em class="ico ico5"></em>导航一<i></i></a>
   <ul>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
    <li><a href="javascript:;">导航选项</a></li>
   </ul>
  </li>
 </ul>
</div>
<!-- 引入 jQuery -->
<script src="https://www.zbpnice.cn/zb_system/script/jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/easing/jquery.easing.1.3.js"></script>
<!--等待dom元素加载完毕.-->
<script>
$(function(){
 $(".treebox .level1>a").click(function(){
  $(this).addClass('current')   //给当前元素添加"current"样式
  .find('i').addClass('down')   //小箭头向下样式
  .parent().next().slideDown('slow','easeOutQuad')  //下一个元素显示
  .parent().siblings().children('a').removeClass('current')//父元素的兄弟元素的子元素去除"current"样式
  .find('i').removeClass('down').parent().next().slideUp('slow','easeOutQuad');//隐藏
   return false; //阻止默认时间
 });
})</script>
</body>
</html>

具体的CSS样式已经写入了,只要自己添加相对应的选择器就可以使用了

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: jQuery

本文标题:jquery + easing.js 点击抽屉式展开收缩/显示隐藏菜单子菜单特效代码

本文地址:https://www.zbpnice.cn/post/65.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于4年前 (2017-07-01),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

还没有留言,还不快点抢沙发?

发表评论: