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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
js实现简单的随机点名器
Sep 17 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获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php生成QRcode实例
2014/09/22 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python模拟用户登录验证
2017/09/11 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python set内置函数的具体使用
2019/07/02 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
推广普通话主题班会
2015/08/17 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Mysql中存储引擎的区别及比较
2021/06/04 MySQL