码迷,mamicode.com
首页 > 其他好文 > 详细

超简单手风琴效果制作

时间:2015-07-21 12:33:58      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

手风琴最终效果如下:

技术分享

要实现以上效果非常简单,无需插件的

Step.1

html结构创建

<div id="firstpane" class="menu_list"> 
        <p class="menu_head">Header-1</p>
        <div class="menu_body">
        <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>    
        </div>
        <p class="menu_head">Header-2</p>
        <div class="menu_body">
            <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>    
        </div>
        <p class="menu_head">Header-3</p>
        <div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>            
       </div>
  </div> 

先来看结果:

技术分享

Step.2

给以上html添加样式,默认看到的只是每组的header,每组中的内容link默认隐藏。

.menu_list {    
    width: 150px;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
    display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }

技术分享

Step.3

基于jquery库,编写js使列表动起来

需求应当是,当我们点击header的时候,她底下的body应当显示出来,并且其他菜单组关闭。

$("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
           $(this).siblings().css({backgroundImage:"url(left.png)"});
    });

至此,手风琴效果的菜单完成!

超简单手风琴效果制作

标签:

原文地址:http://www.cnblogs.com/Imever/p/4663732.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!