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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
简单实现python爬虫功能
2015/12/31 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
法人授权委托书
2014/04/03 职场文书
平安工地汇报材料
2014/08/19 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
详解Python flask的前后端交互
2022/03/31 Python