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 相关文章推荐
jQuery 入门级学习笔记及源码
Jan 22 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
jquery实现数字输入框
Feb 22 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
js实现图片无缝循环轮播
Oct 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
css3绘制百度的小度熊
2018/10/29 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
shell的种类有哪些
2015/04/15 面试题
自我评价的范文
2014/02/02 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
初三语文教学计划
2015/01/22 职场文书
法律进社区活动总结
2015/05/07 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
redis实现共同好友的思路详解
2021/05/26 Redis
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python