js实现二级菜单渐隐显示


Posted in Javascript onNovember 03, 2015

先给大家看一看最终的效果图:

js实现二级菜单渐隐显示

下面就是js实现二级菜单渐隐显示的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
  <title>导航菜单二级菜单滑动渐隐显示</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style type="text/css"> 
    {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    a, img
    {
      border: 0;
    }
    a, a:visited
    {
      color: #5e5e5e;
      text-decoration: none;

    }

    a:hover
    {
      color: #333;
      text-decoration: underline;
    }
    body
    {
      font: 12px/180% Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;
      color: #333;
      background: #fff;
    }
    /* navbox */

    .navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span

    {
      background: url(images/headerbg.png) no-repeat;

    }
    .navbox
    {
      height:39px;
      background-position:0 -138px;
      background-repeat:repeat-x;
      position: relative;
      z-index:9;       
    }
    .nav
    {
      width: 960px;
      margin: 0 auto;
    }
    .nav li
    {
      float: left;
      height: 39px;
      background-position: 100% -99px;
      padding: 0 3px 0 2px;
      position: relative;
    }
    .nav li.last
    {
      background: none;
    }
    .nav li a
    {
      float: left;
      display: block;
      padding: 0 0 0 4px;
      height: 39px;
      overflow: hidden;
    }
    .nav li a span
    {
      float: left;
      display: block;
      padding: 0 4px 0 0;
      line-height: 39px;
      font-size: 14px;
      color: #fff;
      font-weight: 800;
      cursor: pointer;
      width: 142px;
      text-align: center;
    }
    .nav li.selected a, .nav li a.selected
    {
      background-position: 0 -60px;
      text-decoration: none;
    }
    .nav li.selected a span, .nav li a.selected span
    {
      background-position: 100% -60px;
      color: #ff7e00;
    }
    .nav li.selected .submenu
    {
      display: block;
    }
    .nav li .submenu
    {
      display: none;
      position: absolute;
      top: 39px;
      left: 6px;
    }
    .nav li .submenu

    {
      border-style: solid;
      border-width: 0px 1px 1px 1px;
      border-color: #ddd;
      padding: 0 5px 5px 5px;
      width: 132px;
      background: #fff;
    }
    .nav li .submenu
    {
      -moz-border-radius: 0 0 3px 3px;
      -webkit-border-radius: 0 0 3px 3px;
      border-radius: 0 0 3px 3px;
      -moz-box-shadow: 0 5px 5px #D3D3D3;
      -webkit-box-shadow: 0 5px 5px #D3D3D3;
      box-shadow: 0 5px 5px #D3D3D3;
    }
    .nav li .submenu li
    {
      float: none;
      padding: 0;
      background: none;

      height:auto;

      border-bottom:dotted 1px #BEBEBE;

    }
    .nav li .submenu li.last
    {
      border: none;
    }
    .nav li .submenu li a
    {
      float:none;
      padding:0;
      text-align:center;
      height:28px;
      line-height:28px;

      background:none;
    }
    .nav li .submenu li a:hover
    {
      background:#ddd;
      font-weight:800; 
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    function dropMenu(obj) {
      $(obj).each(function () {
        var theSpan = $(this);
        var theMenu = theSpan.find(".submenu");
        var tarHeight = theMenu.height();
        theMenu.css({ height: 0, opacity: 0 });
        theSpan.hover(
      function () {
        $(this).addClass("selected");
        theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 400);
      },
      function () {
        $(this).removeClass("selected");

        theMenu.stop().animate({ height: 0, opacity: 0 }, 400, function () {
          $(this).css({ display: "none" });

        });
      }
    );
     });
    }
 
    $(document).ready(function () {
      dropMenu(".drop-menu-effect");
    });
  </script>
  <div class="navbox">
    <div class="nav">
      <ul class="clearfix">
        <li><a class="selected" target="_blank" href="javascript:void(0);"><span>网站首页</span></a></li>
        <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>内容管理</span></a>
          <ul class="submenu">
            <li><a href="#">普通文章</a></li>
            <li><a href="#">专题文章</a></li>
            <li><a href="#">材料文章</a></li>
          </ul>
        </li>
        <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>系统帮助</span></a>
          <ul class="submenu">
            <li><a href="#">参考文档</a></li>
            <li><a href="#">意见反馈</a></li>
            <li><a href="#">官方交流论坛</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
json对象转字符串如何实现
Dec 02 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
用console.table()调试javascript
Sep 04 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 #Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 #Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 #Javascript
You might like
PHP6 mysql连接方式说明
2009/02/09 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php实现的通用图片处理类
2015/03/24 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
scrapy爬虫实例分享
2017/12/28 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
浅析Python中字符串的intern机制
2020/10/03 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
酒店前厅员工辞职信
2014/01/08 职场文书
创文明城市标语
2014/06/16 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
公司员工奖惩制度
2015/08/04 职场文书
干部考核工作总结
2015/08/12 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
总结Python变量的相关知识
2021/06/28 Python