HTML

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>下拉菜单</title>

         <link rel="stylesheet" href="css/style.css">

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

         <script src="js/script.js"></script>

     </head>

     <body>

         <div id="nav">

             <ul>

                 <li><a href="#">首页</a></li>

                 <li><a href="#">学习 +</a>

                     <ul>

                         <li><a href="#">JavaScript</a></li>

                         <li><a href="#">jQuery</a></li>

                     </ul>

                 </li>

                 <li><a href="#">案例 +</a>

                     <ul>

                         <li><a href="#">JavaScript ></a>

                             <ul>

                                 <li><a href="#">下拉菜单</a></li>

                                 <li><a href="#">图片轮播</a></li>

                                 <li><a href="#">拖拽效果</a></li>

                             </ul>

                         </li>

                         <li><a href="#">jQuery ></a>

                             <ul>

                                 <li><a href="#">下拉菜单</a></li>

                                 <li><a href="#">图片轮播</a></li>

                                 <li><a href="#">拖拽效果</a></li>

                             </ul>

                         </li>

                     </ul>

                 </li>

                 <li><a href="#">关于</a></li>

             </ul>

         </div>

     </body>

 </html>

CSS实现三级菜单

 /*静态页面样式*/

 * {

     margin:;

     padding:;

 }

 #nav {

     width: 500px;

     height: 50px;

     margin: 50px auto;

     background-color: #ccc;

     border-radius: 10px;

 }

 ul li {

     list-style: none;

 }

 #nav>ul>li {

     float: left;

 }

 ul a {

     text-decoration: none;

     color: black;

     display: block;

     text-align: center;

     height: 50px;

     line-height: 50px;

     width: 125px;

     background-color: #ccc;

     border-radius: 10px;

 }

 ul a:hover {

     color: white;

     background-color: black;

     border-radius: 10px;

 }

 ul ul {

     position: absolute;

     display: none;

 }

 ul ul ul {

     position: absolute;

     margin-left: 125px;

     margin-top: -50px;

     display: none;

 }

 /*CSS显示下拉菜单*/

 ul li:hover>ul {

     display: block;

 }

JS实现三级菜单

 window.onload = showMenu;

 function showMenu() {

     var nav = document.getElementById("nav");

     var list = nav. getElementsByTagName("li");

     for (var i = 0, l = list.length; i < l; i++) {

         list[i].onmouseover = function() {

             var sub_menu = this.getElementsByTagName("ul")[0];

             if(sub_menu) {

                 sub_menu.style.display = "block";

             }

         }

         list[i].onmouseout = function() {

             var sub_menu = this.getElementsByTagName("ul")[0];

             if(sub_menu) {

                 sub_menu.style.display = "none";

             }

         }

     }

 }

jQuery实现三级菜单

 $(document).ready(function() {

     $("#nav").find("li").mouseover(function() {

         $(this).children("ul").show();

     });

     $("#nav").find("li").mouseout(function() {

         $(this).children("ul").hide();

     });

 })

show()和hide()不能传入参数，传入参数就有bug，原因未知。。。

而且也不支持slide和fade。。。

JS实现动画菜单

 window.onload = showMenu;

 function showMenu() {

     var nav = document.getElementById("nav");

     var list = nav.getElementsByTagName("li");

     for (var i = 0, l = list.length; i < l; i++) {

         list[i].onmouseover = function() {

             var sub_menu = this.getElementsByTagName("ul")[0];

             if(sub_menu) {

                 sub_menu.style.display = "block";

                 var addH = function() {

                     var h = sub_menu.offsetHeight;

                     h += 5;

                     if(h >= 100) {

                         sub_menu.style.height = 100 + "px";

                     } else {

                         sub_menu.style.height = h + "px";

                     }

                 };

                 setInterval(addH, 50);

             }

         }

         list[i].onmouseout = function() {

             var sub_menu = this.getElementsByTagName("ul")[0];

             if(sub_menu) {

                 var subH = function() {

                     var h = sub_menu.offsetHeight;

                     h -= 5;

                     if(h <= 0) {

                         sub_menu.style.height = 0 + "px";

                         sub_menu.style.display = "none";

                     } else {

                         sub_menu.style.height = h + "px";

                     }

                 };

                 setInterval(subH, 50);

             }

         }

     }

 }

可以正常显示菜单，但是无法隐藏菜单。。。

只能显示二级菜单，三级菜单被吃了？！

随着鼠标不停地滑过，显示菜单的速度越来越快。。。

CSS实现动画菜单

 /*静态页面样式*/

 * {

     margin:;

     padding:;

 }

 #nav {

     width: 500px;

     height: 50px;

     margin: 50px auto;

     background-color: #ccc;

     border-radius: 10px;

     box-shadow: 2px 2px 2px rgba(0,0,0,0.8);

 }

 #nav>ul>li>a {

     border-radius: 10px;

 }

 #nav ul li {

     list-style: none;

 }

 #nav>ul>li {

     float: left;

 }

 #nav a {

     text-decoration: none;

     color: black;

     display: block;

     height: 50px;

     width: 125px;

     text-align: center;

     line-height: 50px;

     background-color: #ccc;

 }

 #nav ul ul {

     position: absolute;

     /*display: none;*/

     opacity:;

     margin: 20px 0 0 0;

     transition: all 1s ease-in-out;

 }

 #nav ul ul ul {

     margin-top: -30px;

     margin-left: 160px;

 }

 #nav ul ul a {

     border-radius: 10px 10px 0 0;

     border-bottom: 1px solid white;

 }

 #nav a:hover {

     color: white;

     background-color: black;

 }

 #nav>ul>li:hover>ul {

     /*display: block;*/

     opacity:;

     margin: -15px 0 0 0;

 }

 #nav>ul ul>li:hover>ul {

     /*display: block;*/

     opacity:;

     margin-left: 140px;

     margin-top: -50px;

 } 

 /*CSS画三角形*/

 #nav>ul>li>ul>li:first-child:before {

     content: "";

     display: block;

     border-top: 15px solid transparent;

     border-right: 15px solid transparent;

     border-bottom: 15px solid #ccc;

     border-left: 15px solid transparent;

     width:;

     margin-left: 50px;

 }

 #nav ul ul ul>li:first-child:before {

     content: "";

     position: absolute;

     display: block;

     border-top: 15px solid transparent;

     border-right: 15px solid #ccc;

     border-bottom: 15px solid transparent;

     border-left: 15px solid transparent;

     width:;

     margin-left: -30px;

     margin-top: 13px;

 }

预先定义的二级菜单和三级菜单的display属性不能设置为none，如果先设置为none然后在鼠标滑过的时候改为block，将完全没有动画效果，原因未知。。。

但是如果display不设置为none，在鼠标滑过菜单（隐形）所在的位置时，也会显示出来，纠结。。。

JS 下拉菜单的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. （二）js下拉菜单

    默认的select标签比较难看,UI比较漂亮,如果想要实现UI上的下拉样式,好像必须用js写select,从网上拷贝而且修改了一个下拉框,为了方便以后引用所以记录下来. /* diy_select * ...

  3. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  4. js下拉菜单默认值为当前年份，下拉菜单的选项为当前年份往前推5年

    1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...

  5. JS 下拉菜单案例

    css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...

  6. 原生js下拉菜单

    var oDiv = document.getElementById("sunav"); var oLi = oDiv.getElementsByClassName("s ...

  7. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

  8. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  9. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

随机推荐

  1. Android 自定义NumProgressBar

    这是GitHub上的一个开源控件,由于作者是用Android Studio开发,直接导入Eclipse不能使用,这边抠出来这个功能,做成一个小Demo,供Eclipse平台使用. style配置文件中 ...

  2. LeetCode 笔记28 Maximum Gap

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  3. WPF打印原理，自定义打印

    一.基础知识 1.System.Printing命名空间 我们可以先看一下System.Printing命名空间,东西其实很多,功能也非常强大,可以说能够控制打印的每一个细节,曾经对PrintDial ...

  4. 用 CNTK 搞深度学习 （一） 入门

    Computational Network Toolkit (CNTK) 是微软出品的开源深度学习工具包.本文介绍CNTK的基本内容,如何写CNTK的网络定义语言,以及跑通一个简单的例子. 根据微软开 ...

  5. sql server 2008 登录 4064 错误解决办法

    出现这个错误是账户无法打开默认数据库导致的 修改一下该账户的默认打开数据库即可. 如果很不幸,你的sa帐号和windows身份验证默认都打开同一个数据库,那么无论换哪种方式登录都是一样没用的 如果你有 ...

  6. Node基础：域名解析DNS(ok)

    写在前面 Nodejs学习手册,基础总结之DNS模块.对从事web开发的同学来说,DNS解析再熟悉不过,在nodejs中也有一个模块可以完成dns解析的工作,使用非常简单.直接进入主题. 域名解析:d ...

  7. inconsistent line count calculation in projection snapshot

    1.现象 在vs2013中,按Ctrl + E + D格式化.cshtml代码,vs2013系统崩溃.报:inconsistent line count calculation in projecti ...

  8. Android Studio 常用快捷键及如何沿用Eclipse的快捷键

    1.显示最近编辑的文件列表 Ctrl + E 2.快速打开类 Ctrl + N 3.快速打开文件(可以是XML等各种格式后缀的文件) Ctrl + Shift + N 4.当前方法的声明 Alt + ...

  9. 定一个小目标：明年1024能成功转行web前端，光荣地成为一个程序员！

    第一次在博客园写博,我为什么要选择这里吗? 据说博客园这里的IT大牛如云,作为一个求知若渴的小白,我屁颠屁颠的跟着过来了. 于是今天早上兴高采烈的注册了账号,迫不及待的打开我的博客,呃!注册账号成功了 ...

  10. DOM系列---DOM操作样式

    发文不易,若转载传播,请亲注明出处,谢谢! 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有 ...