HTML笔记 ·

通过css和jQuery实现手风琴菜单效果

在做管理系统时经常会用到点击展开,再次点击关闭的菜单效果,通常有很多的插件来实现,但是效果实现了,由于引入了大量的外部文件,导致项目本来内容就多,变得更多了,不利于项目的代码管理。下面我来介绍一个简单的方法来实现这种效果。

先看一下html代码:

<ul>
		<li class="accordion">
			<span class="left_right" style="font-weight:bold">My Account</span>
		</li>
		<li class="accordion-desc">
			<a href='#'>My Profile</a>
			<a href='#'>Change Password</a>
		</li>
</ul>

代码中的li标签可以替换为其他的标签,外部也可以不使用ul标签,只要是内部可包含内容的标签即可。

再来看一下控制它的js代码:

<script>
(document).ready(function() {(".accordion-desc").fadeOut(0);
	     (".accordion").click(function() {(".accordion-desc").not((this).next()).slideUp('fast');(this).next().slideToggle(400);
	     });
	});

</script>

这段js代码添加到文档最下方即可。

再来看一下最主要的css样式:

.accordion{
	cursor:pointer;
}
.accordion a {
  position: relative;
  display: block;
  color: #74777b;
  padding: 1em 1em 2.5em 1em;
  text-decoration: none;
}

.accordion a:hover {
  text-decoration: none;
  color: #2cc185;
  background-color: #e7ecea;
  transition: 0.3s;
}

.accordion-desc {
  background-color: #1A2127 !important;
  color: #B7C8CF;
  z-index: 2;
  padding-left:0 !important;
  padding-top: 10px;
  padding-bottom: 10px;
}
.accordion-desc li{
	margin-top:20px;
}
.accordion-desc a{
	display: inline-block;
    width: 100%;
    text-align:center;
     -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
.accordion-desc a:hover{
	transform: scale(1.20);
    -webkit-transform:scale(1.20);
	
}

代码就只有这么多,使用起来很方便,而且有了问题也可以知道是哪里的问题,使用方便简单。

参与评论