JS 下拉菜单

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 下拉菜单的更多相关文章

CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
（二）js下拉菜单
默认的select标签比较难看,UI比较漂亮,如果想要实现UI上的下拉样式,好像必须用js写select,从网上拷贝而且修改了一个下拉框,为了方便以后引用所以记录下来. /* diy_select * ...
css中overflow:hidden的属性可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
js下拉菜单默认值为当前年份，下拉菜单的选项为当前年份往前推5年
1:在jsp或者HTML页面中新建一个下拉框年度:<select id="cx_nd" name="cx_nd" style="width: ...
JS 下拉菜单案例
css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...
原生js下拉菜单
var oDiv = document.getElementById("sunav"); var oLi = oDiv.getElementsByClassName("s ...
-第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数思路给一级 ...
bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

随机推荐

WCF4.0 –- RESTful WCF Services (1) (入门)
WCF 很好的支持了 REST 的开发, 而 RESTful 的服务通常是架构层面上的考虑. 因为它天生就具有很好的跨平台跨语言的集成能力,几乎所有的语言和网络平台都支持 HTTP 请求,无需去实现复 ...
vi 命令用法
一.Unix编辑器概述编辑器是使用计算机的重要工具之一,在各种操作系统中,编辑器都是必不可少的部件.Unix及其相似的ix 操作系统系列中,为方便各种用户在各个不同的环境中使用,提供了一系列的ex编 ...
android布局 FrameLayout(帧布局)详解
看到一篇很有趣的文章对我就是冲着萌妹子看的 FrameLayout(帧布局) 前言作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域, 当我们往里面添加组件的时候 ...
20135326、20135303-linux实验三实验报告
北京电子科技学院(BESTI) 实验报告课程:信息安全系统设计基础实验班级:1353 姓名:魏昊卿王亦可学号:20135303 20135326 成绩: ...
WIN7下USB多点触摸，一次发多个数据包的延迟问题，重要！
这个问题很常见, 花了差不多一个星期时间来解决.硬件相关的东西太多坑了,而且这些坑不像代码那样可见. 使用混合模式,每次最多报告2个点.如果是5点则需要上报三次. 问题就来了,atmel的CTP最 ...
UEditor编辑文章出现多余空行问题的解决办法
网站后台管理编辑文章以后,保存.再次打开编辑是文章前后多出多余的空行.一直以为是编辑器有问题,也没在意,但是自己编辑文章多了,感觉太麻烦了.想一定可以解决这个问题.百度一下果然找到原因.原来是加载编辑 ...
[AHOI2013]立方体（三维bit)
[Ahoi2013]立方体 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 130 Solved: 55[Submit][Status] Descrip ...
[Aaronyang] 写给自己的WPF4.5 笔记[2依赖属性]
人生的意义不在于拿一手好牌,而在于打好一手坏牌 --Aaronyang的博客(www.ayjs.net)-www.8mi.me =============时隔两年后再看WPF========== 因为 ...
每天一个linux命令（19）：Linux 目录结构
对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面 ...
js回掉页面后台代码-简单demo
后台代码: public partial class WebForm1 : System.Web.UI.Page, ICallbackEventHandler { protected void Pag ...

JS 下拉菜单

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

随机推荐

热门专题