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. 执行mount命令时找不到介质或者mount:no medium found的解决办法

    使用vmware时,在虚拟机设置里,设置CD/DVD为系统镜像,挂载时,有时会有找不到介质或者no medium found之类的提示. 根本原因是iso镜像并没有加载到虚拟机系统内. 解决办法: 首 ...

  2. 第一个WP8程序，照相机

    安装win8 64位,vs2013(包含wp8 sdk),百度各种得到学生开发者账户之后,终于可以试一下将自己的app部署到手机上的感觉了. 首先来个简单练练手的照相机功能 照相 即从主界面进入到照相 ...

  3. 实验箱FPGA部分测试报告及A8与FPGA链接测试报告

    其实,我一开始还以为实验箱不会有什么问题只是让我们多学习东西才做这个测试的,结果发现还真的有不少问题. 1.实验准备部分 安装驱动时,win10系统无法正确安装usb-blaster Windows ...

  4. java <? super Fruit>与<? extends Fruit>

    package Test2016; import java.util.ArrayList; import java.util.List; public class Test2016 { public ...

  5. 【JVM】模板解释器--如何根据字节码生成汇编码？

    1.背景 仅针对JVM的模板解释器: 如何根据opcode和寻址模式,将bytecode生成汇编码. 本文的示例中所使用的字节码和汇编码,请参见上篇博文:按值传递还是按引用? 2.寻址模式 本文不打算 ...

  6. python3 入门 (三) 函数与lambda表达式、闭包

    函数 是组织好的.可重复使用的.用来实现单一或相关联功能的代码段. 函数代码块以def关键词开头,后接函数标识符名称和圆括号() 任何传入参数和自变量必须放在圆括号中间.圆括号之间可以用于定义参数 函 ...

  7. WCF入门 （13）

    前言 公司略无聊,周三前同事推荐跳槽,于是会去更新了一下简历,突然发现,快一年了,我竟然想不出我可以往简历上添加点什么值得自豪的东西.下午和小伙伴聊了一会天,他告诉我,可以往简历上写上“英语口语水平有 ...

  8. Moqui学习Day3

    添加一个新建表单 添加一个按钮来弹出新建表单,并创建一个转换来处理输入数据操作. 在FindTutorial.xml文件中添加一个转换. <!--新增 列表 --> <transit ...

  9. 第四次个人作业——关于微软必应词典android客户端的案例分析

    [前言] 第一次搞测评这种东西,如果有什么疏漏,请多多谅解.测评内容如题. 第一部分 调研,评测 评测:(设备:Lenovo A806) 软件的bug,功能评测,黑箱测试 bug等级划分方式 5级分类 ...

  10. myeclipse自动import

    不管包什么的 直接把代码全写出来 再按 ctrl + shift +o 这是自动导包的 前提是你写的代码是正确的