首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现控制的多级下拉菜单

Posted in Javascript onJuly 05, 2015

最近身体不适，所以没能如期的更新，抱歉。这里直接把代码贴上，如果有不明白的地方，留言就行。

<!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>
    <title>下拉菜单</title>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
      .navi ul {
        padding: 0;
        list-style-type: none;
      }
      .navi ul li {
        text-align: center;
        float: left;
        position: relative;
        width: 200px;
        background-color: #0F8CFF;
      }
      a {
        color: #086808;
        text-decoration: none;
      }
      .navi ul li a {
        display: block;
        border: 1px solid #fff;
      }
      .navi ul li ul {
        display: none;
        left: 0;
      }
      .navi ul li ul li ul{
        position: absolute;
        left:200px;
        top: 0;
      }
      .navi ul li:hover ul a {
        color: yellow;
      }
    </style>
 
    <script type="text/javascript">
      function showNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "block";
      }
      function hideNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "none";
      }
    </script>
  </head>
 
  <body>
 
    <div class="navi">
      <ul >
        <li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
              <a href="javascript:;" >传奇</a>
 
              <ul>
                <li>
                  <a href="javascript:;" >1</a>
                </li>
                <li>
                  <a href="javascript:;" >2</a>
                </li>
                <li>
                  <a href="javascript:;" >3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
        <li class="li_1">
          <a href="javascript:;" >游戏</a>
          <ul>
            <li>
              <a href="javascript:;" >传奇</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
 
  </body>
 
</html>

效果图如下：　

javascript实现控制的多级下拉菜单

以上所述就是本文的全部内容了，希望大家能够喜欢。

javascript实现控制的多级下拉菜单

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
javascript遇到html5的一些表单属性
Jul 05 #Javascript
浅谈angularJS 作用域
Jul 05 #Javascript
javascript 应用小技巧方法汇总
Jul 05 #Javascript
javascript常用功能汇总
Jul 05 #Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 #Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 #Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 #Javascript
小缇娜的奇幻之地(1) 战锤40K(1) 暴雪(1) 我的世界(1) 守望先锋(1) 巫师(1) LOL(1) 艾尔登法环(1) 东方异文石(1) 最终幻想(1)
You might like
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python事件驱动event实现详解
2018/11/21 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
python能自学吗
2020/06/18 Python
python如何实现读取并显示图片（不需要图形界面）
2020/07/08 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
七年级生物教学反思
2014/01/30 职场文书
大学毕业感言100字
2014/02/03 职场文书
小小的船教学反思
2014/02/21 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
网络安全倡议书（3篇）
2019/09/18 职场文书
详解Python类和对象内容
2021/06/22 Python