js实现二级导航功能


Posted in Javascript onMarch 03, 2017

效果图:

js实现二级导航功能

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  a{text-decoration: none;}
  *{margin: 0;padding: 0;box-sizing: border-box;font-family: "微软雅黑";}
  li{list-style-type: none;}
  .box{width: 220px;height: 477px;margin-top: 110px;margin-left: 100px;}
  h3{width: 100%;height: 50px;line-height: 50px;text-align: center;background: #09f;}
  h3 a{color: #FFFFFF;}
  h3 a:hover{color: deeppink;}
  ul li{width: 100%;height: 70px;line-height: 70px;border: 1px solid red;background: #09e;}
  ul li:not(:last-child){border-bottom: none;}
  ul li a{display: block;color:#FFFFFF;text-align: center;font-weight: bold;font-size: 18px;}
  ul li:hover{background: #00E8D7;}
  ul li:hover a{color: orange;}
  ul{position: relative;}
  .content{
  position: absolute;top:0;left: 220px;
  width: 800px;height: 300px;
  border: 1px solid #00FF66;
  display: none;
  }
 </style>
 </head>
 <body>
 <p style="margin: 20px;">
  end():结束当前链条中最近的筛选操作,并将匹配元素还原为之前的匹配状态。
 </p>
 <div class="box">
  <h3><a href="" target=" rel="external nofollow" _blank">全部菜单</a></h3>
  <ul>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   11111111111111111111111111
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   22222222222222222222222222
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   33333333333333333333333333333
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   44444444444444444444
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   5555555555555555555555555555
   </div>
  </li>
  <li>
   <a href="">一级导航</a>
   <div class="content">
   6666666666666666666666666666666666
   </div>
  </li>
  </ul>
 </div>
 </body>
</html>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
 $('ul li').hover(function(){
  $(this).find('.content').show().end().siblings().find('.content').hide();
 },function(){
  $(this).find('.content').hide();
 }); 
 })
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
Javascript 二维数组
Nov 26 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
javascript中神奇的 Date对象小结
Oct 12 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
js实现简单的获取验证码按钮效果
Mar 03 #Javascript
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python遍历numpy数组的实例
2018/04/04 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python多进程编程常用方法解析
2020/03/26 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
python selenium 获取接口数据的实现
2020/12/07 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
办公室打字员岗位职责
2014/04/16 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
nginx配置限速限流基于内置模块
2022/05/02 Servers