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. Lenovo GTX960M 配置CUDA

    文章是出自我的原创,是写在新浪博客里面的:http://blog.sina.com.cn/s/blog_13b7eb5b20102wvxw.html 首先,软件的版本你选择很重要,我们配置了两天才成功 ...

  2. Tuple的用法

    1经常有些类型只用一次,不想添加新类,可以使用Tuple. 例子: List<Tuple<string, string>> list = new List<Tuple&l ...

  3. phpcms-v9视频模型的添加

    1.  下载化蝶自由飞插件http://www.phpcms.cn/show-90-8-1.html 下载回去后解压,覆盖 phpcms/ 和 statics/ 目录即可. 2.  执行一个sql语句 ...

  4. 系统级IO实践学习记录

    代码分析 cp1.c 功能:复制文件. #include <stdio.h>#include <stdlib.h>#include <unistd.h>#inclu ...

  5. 20135306黄韧 附录A及第十章学习总结

    附录A  错误处理 A．1 Unix系统中的错误处理 1．Unix风格的错误处理 if ((pid = wait(NULL)) < 0) { fprintf(stderr,”wait error ...

  6. Linux命令学习

    Linux命令学习 Ubuntu常用快捷键 •Ctrl+Alt+T: 打开终端 •Ctrl+Shift+T: 新建标签页 •Tab: 终端中命令补全 •Alt+数字N: 终端中切换到第N个标签页 •↑ ...

  7. WIN7下USB多点触摸，一次发多个数据包的延迟问题，重要！

    这个问题很常见, 花了差不多一个星期时间来解决.硬件相关的东西太多坑了,而且这些坑不像代码那样可见.   使用混合模式,每次最多报告2个点.如果是5点则需要上报三次. 问题就来了,atmel的CTP最 ...

  8. 慢牛股票-基于Sencha+Cordova的股票类APP

    13,14这两年,我的业余时间都花在了移动互联网技术和股票技术分析上,14年底,终于开发完成慢牛,上线小米应用商店.应用宝.百度应用商店.   慢牛是一款数据分析类的股票APP,提供数据订阅和数据分析 ...

  9. 关于一个每天请求50W次接口的设计实现过程

    从大学开始关注博客园,到工作之后注册了博客园账号,直至今日终于能够静下心来将自己个人的所学,所得,所悟能够分享出来与大家分享,好开心~ 言归正传,需求背景是博主所在的公司为一个在线OTA公司,客户端上 ...

  10. Mongodb使用基本之——安装

    版本是:Mongodb 3.2.1 本来是想用python做个爬虫然后爬取一些数据放到数据库上的,想着想着以为NoSQL会很流行,就用了Mongodb,结果,一折腾真是不容易. 遇到的第一个问题:官网 ...