基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果

前端之家收集整理的这篇文章主要介绍了基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、手风琴菜单效果图及代码如下:

<Meta charset="UTF-8"> 手风琴<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>制作 .con{ width:908px; height:300px; margin:50px auto; overflow: hidden; position:relative; } .con .list_ul{ } .con .list_ul li{ width:805px; height:300px; position:absolute; background:#fff; } .con .list_ul li span{ width:26px; height:296px; text-align: center; color:#fff; padding-top:4px; float:left; cursor: pointer; } .con .list_ul li img{ width:777px; height:300px; float:right; } .con .list_ul li:after{ display: table; clear:both; zoom:1; content: ''; } .con .list_ul li:nth-child(1){ left:0; } .con .list_ul li:nth-child(2){ left:801px; } .con .list_ul li:nth-child(3){ left:828px; } .con .list_ul li:nth-child(4){ left:855px; } .con .list_ul li:nth-child(5){ left:882px; } .con .list_ul li:nth-child(1) span{ background: rgba(8,201,160,0.49); } .con .list_ul li:nth-child(2) span{ background: rgba(120,66,0.97); } .con .list_ul li:nth-child(3) span{ background: rgb(77,114,201); } .con .list_ul li:nth-child(4) span{ background: rgb(255,179,18); } .con .list_ul li:nth-child(5) span{ background: rgb(201,5,166); }
风景图01 风景图01
  • 风景图02 风景图02
  • 风景图03 风景图03
  • 风景图04 风景图04
  • 风景图05 风景图05
  • 二、上卷下拉式(层级)菜单效果图和代码如下:

    <Meta charset="UTF-8"> 用jQuery中的slideToggle制作<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a> .menu{ width:200px; margin:10px auto; } .menu>li{ background: #8731dd; color:#fff; text-indent: 16px; margin-top:-1px; cursor: pointer; } .menu>li>span{ padding:10px 0; display:block; border-bottom: 1px solid #f3f3f3; } .menuactive,.menu>li>span:hover{ background:#c7254e; } .menu > li ul{ display: none; } .menu > li ul li{ text-indent:20px; background: #9a9add; border:1px solid #f3f3f3; margin-top:-1px; padding:6px 0; } .menu >li .active{ display: block;

    }
    .menu > li ul li:hover{
    background:#67C962;
    }
    .menu_li ul{
    margin-bottom:1px;
    }

    三、置顶菜单(当一个菜单到达页面顶部时,停在那)

    <Meta charset="UTF-8"> <a href="https://www.jb51.cc/tag/zhiding/" target="_blank" class="keywords">置顶</a><a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>

    猜你在找的jQuery相关文章