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. Linux 图形化操作

    //Linux图形化操作 #include <stdio.h> #include <stdlib.h> #include <string.h> #include & ...

  2. 深入了解Ant构建工具 命令

    深入了解Ant构建工具 标签: ant工具任务jarjavaclass 2010-05-29 21:16 1346人阅读 评论(2) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  3. 北京联想招聘-IOS高级 加入qq 群：220486180 或者直接在此 留言咨询

    ios 高级开发 Job ID #: 47980 Position Title: 高级iOS development engineer Location: CHN-Beijing Functional ...

  4. iOS新加速计事件（陀螺仪和加速计）

    iOS新加速计事件 [iOS新加速计事件] 1.iOS5.0以前,可以使用UIAcceleration来监听加速计事件. 2.Bug iOS5.0以后,UIAccelerometerDelegate已 ...

  5. 工作随笔——CentOS6.4支持rz sz操作

    yum一句话解决: yum -y install lrzsz

  6. 3.SQLAlchemy文档-SQLAlchemy Core（中文版）

    这里的文描述了关于SQLAlchemy的的SQL渲染引擎的相关内容,包括数据库API的集成,事务的集成和数据架构描述服务.与以领域为中心的ORM使用模式相反,SQL表达式语言提供了一个数据构架为中心的 ...

  7. [BZOJ 1797][AHOI2009]最小割（最小割关键边的判断）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1797 分析: 在残余网络中看: 对于第1问: 1.首先这个边必须是满流 2.其次这个边 ...

  8. [bzoj 1503][NOI 2004]郁闷的出纳员（平衡树）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1503 分析: 经典的平衡树题,我用Treap做的 下面有几点注意的: 1.可能出现新加入的人的 ...

  9. Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板）

    详情请查看http://aehyok.com/Blog/Detail/23.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  10. Xdebug开源PHP程序调试器

    Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. 本文为大家讲解的是在linux下xdebug的安装和配置方法,感兴趣的同学参考下 ...