javascript手风琴下拉菜单实现代码
手风琴下拉菜单实现的效果更灵活，不同与传统的下拉菜单，本文就为大家分享一段javascript手风琴下拉菜单实现代码，先看一看效果图：
具体的javascript手风琴下拉菜单代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手风琴下拉菜单效果</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.nav ul{
display: none;
}
.nav ul li{
width: 100px;
text-align: center;
cursor: pointer;
}
.nav div{
background: #4ecc70;
width: 100px;
border-radius: 10px;
line-height: 34px;
text-align: center;
color: white;
cursor: pointer;
}
.demo{
/* display: none;*/
}
.red{
background:red;
border-radius: 10px;
}
</style>
<script>
$(function(){
//case 1
// $('.nav div').on('click',function(){
// if(false==$(this).next().is(':visible')){
// $('.nav ul').slideUp(300);
// }
// $(this).next().slideToggle(300);
// })
//case 2
var changeType=$('.nav').find('div');
$.each(changeType,function(){
$(this).on('click',function(){
if(false==$(this).next().is(':visible')){
$('.nav ul').slideUp(300);
}
$(this).next().slideToggle(300);
})
$('.nav ul:eq(0)').show();
})
var hoverType=$('.nav .u').find('li')
$.each(hoverType,function(){
$(this).hover(function(){
$(this).addClass('red').siblings().removeClass('red');
})
})
})
</script>
</head>
<body>
<ul class="nav">
<li>
<div>水果</div>
<ul class="u">
<li>香蕉</li>
<li>橘子</li>
<li>梨子</li>
<li>西瓜</li>
</ul>
</li>
<li>
<div>蔬菜</div>
<ul class="u">
<li>芹菜</li>
<li>黄瓜</li>
<li>洋葱</li>
<li>西瓜</li>
</ul>
</li>
<li>
<div>肉类</div>
<ul class="u">
<li>鸡肉</li>
<li>兔肉</li>
<li>鸭肉</li>
<li>龙肉</li>
</ul>
</li>
</ul>
</body>
</html>
以上就是为大家分享的javascript手风琴下拉菜单代码，希望对大家的学习有所帮助，动手为自己的网站实现手风琴下拉菜单吧！
相关推荐
-
Angular.js与Bootstrap相结合实现手风琴菜单代码
标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page
-
js实现可折叠展开的手风琴菜单效果
本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH
-
纯js实现手风琴效果代码
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型项目中就会显现出来,下面我用原生js实现一个简单的手风琴效果效果. HTML代码如下 结构非常简单就5个li盒子,js代码会渲染图片上去 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&
-
纯js+html和纯css+html制作手风琴效果
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis
-
js实现简单的手风琴效果
效果图: 图(1)初始图 图(2)点击展开效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-s
-
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
-
js实现带三角符的手风琴效果
效果图: 图(1)初始图 图(2)点击展开图 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #list{ width: 240px; border: 1px solid #666;
-
原生js实现手风琴功能（支持横纵向调用）
话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q
-
原生JS实现垂直手风琴效果
效果如下: 图 (1) 展开前 图 (2) 展开后 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50
-
原生js做的手风琴效果的导航菜单
做好的手风琴效果如下,具体看代码: html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir