编程 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实现控制的多级下拉菜单

- Author -

hebedich

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

Javascript 相关文章推荐

关于div自适应高度/左右高度自适应一致的js代码

Mar 22 Javascript

JavaScript利用构造函数和原型的方式模拟C#类的功能

Mar 06 Javascript

jQuery插件Slider Revolution实现响应动画滑动图片切换效果

Jun 05 Javascript

Javascript函数式编程语言

Oct 11 Javascript

解决js图片加载时出现404的问题

Nov 30 Javascript

js 判断一组日期是否是连续的简单实例

Jul 11 Javascript

Vue.js第四天学习笔记（组件）

Dec 02 Javascript

BootStrap轮播HTML代码（推荐）

Dec 10 Javascript

Java与JavaScript中判断两字符串是否相等的区别

Mar 13 Javascript

详解如何优雅地在React项目中使用Redux

Dec 28 Javascript

vue弹窗消息组件的使用方法

Sep 24 Javascript

react-router-dom 嵌套路由的实现

May 02 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