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 相关文章推荐
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
js时间控件只显示年月
Jan 08 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
js实现简单掷骰子小游戏
Oct 24 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
Ant Design的Table组件去除
Oct 24 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
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
理解javascript封装
2016/02/23 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
详解用python生成随机数的几种方法
2019/08/04 Python
softmax及python实现过程解析
2019/09/30 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
卫校毕业生自我鉴定
2013/10/31 职场文书
三八节主持词
2014/03/17 职场文书
股东合作协议书范本
2014/04/14 职场文书
小学五年级学生评语
2014/04/22 职场文书
商场消防安全责任书
2014/07/29 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
cypress测试本地web应用
2022/06/01 Javascript