精华内容
下载资源
问答
  • JS下拉菜单

    2015-03-24 18:02:05
    JS下拉菜单
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0px; padding:0px;}
    body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
    #nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
    ul{ list-style:none;}
    ul li{ float:left; line-height:40px; text-align:center; width:100px;}
    a{ text-decoration:none; color:#000; display:block;}
    a:hover{ color:#F00; background-color:#666;}
    ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}
    ul li ul{ display:none; }
    </style>
     <script type="text/javascript">
    
            function OpenSub(li){                                //鼠标悬浮触发函数,传参为当前元素对象
                var subMenu = li.getElementsByTagName("ul")[0];  //获取当前li元素对象下面的所有ul元素数组的第一个ul元素
                subMenu.style.display ="block";                 //将元素样式设置为以块显示   
            }
            function HideSub(li) {                                  //鼠标悬浮触发函数,传参为当前元素对象
                var subMenu = li.getElementsByTagName("ul")[0];     //获取当前li元素对象下面的所有ul元素数组的第一个ul元素
                subMenu.style.display = "none";                     //将元素样式设置为隐藏
            }   
    </script>
    </head>
    <body>
    <div id="nav">
    <ul>
      <li><a href="#">首页</a></li>
    
    <li onmouseover="OpenSub(this)" onmouseout="HideSub(this)"><a href="#">课程大厅</a>
    
         <ul>
             <li><a href="#">JavaScript</a></li>
             <li><a href="#">Html</a></li>
             <li><a href="#">Css</a></li>
         </ul>    
    </li> 
    <li onmouseover="OpenSub(this)" onmouseout="HideSub(this)"><a href="#">学习中心</a>
          <ul>
    
                <li><a href="#">视频学习</a></li>        
                <li><a href="#">实例练习</a></li>      
                <li><a href="#">问与答</a></li>    
            </ul>  
      </li> 
    <li><a href="#">经典案例</a></li>
    <li><a href="#">关于我们</a></li>
    </ul>
    
    </div>
    </body>
    </html>
    
    

    注:当时在练习的时候怎么调测都调不出来,后发现是在设置显示隐藏的值时“”中有空格导致的

    展开全文
  • js下拉菜单

    2015-01-02 00:11:03
    js下拉菜单制作 首页 菜单一 菜单一 菜单一 菜单一 菜单一 菜单一 菜单二 菜单二 菜单二 菜单二 菜单二 菜单三 菜单三 菜单三 菜单三 菜单三

    js下拉菜单制作

    <ul id="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">菜单一</a>
        <ul>
          <li><a href="#">菜单一</a></li>
          <li><a href="#">菜单一</a></li>
          <li><a href="#">菜单一</a></li>
          <li><a href="#">菜单一</a></li>
          <li><a href="#">菜单一</a></li>
        </ul>
      </li>
      <li><a href="#">菜单二</a>
        <ul>
          <li><a href="#">菜单二</a></li>
          <li><a href="#">菜单二</a></li>
          <li><a href="#">菜单二</a></li>
          <li><a href="#">菜单二</a></li>
        </ul>
      </li>
      <li><a href="#">菜单三</a>
        <ul>
          <li><a href="#">菜单三</a></li>
          <li><a href="#">菜单三</a></li>
          <li><a href="#">菜单三</a></li>
          <li><a href="#">菜单三</a></li>
        </ul>
      </li>
      <li><a href="#">菜单四</a>
        <ul>
          <li><a href="#">菜单四</a></li>
          <li><a href="#">菜单四</a></li>
          <li><a href="#">菜单四</a></li>
          <li><a href="#">菜单四</a></li>
          <li><a href="#">菜单四</a></li>
          <li><a href="#">菜单四</a></li>
        </ul>
      </li>
      <li><a href="#">菜单五</a>
        <ul>
          <li><a href="#">菜单五</a></li>
          <li><a href="#">菜单五</a></li>
          <li><a href="#">菜单五</a></li>
          <li><a href="#">菜单五</a></li>
          <li><a href="#">菜单五</a></li>
          <li><a href="#">菜单五</a></li>
        </ul>
      </li>
    </ul>
    css部分

    * {
    	margin:0;
    	padding:0;
    	border:0;
    }
    body {
    	font-family: arial, 宋体, serif;
    	font-size:12px;
    }
    #nav {
    	line-height: 24px;
    	list-style-type: none;
    	background:#666;
    }
    #nav a {
    	display: block;
    	width: 80px;
    	text-align:center;
    }
    #nav a:link {
    	color:#666;
    	text-decoration:none;
    }
    #nav a:visited {
    	color:#666;
    	text-decoration:none;
    }
    #nav a:hover {
    	color:#FFF;
    	text-decoration:none;
    	font-weight:bold;
    }
    #nav li {
    	float: left;
    	width: 80px;
    	background:#CCC;
    }
    #nav li a:hover {
    	background:#999;
    }
    #nav li ul {
    	line-height: 27px;
    	list-style-type: none;
    	text-align:left;
    	left: -999em;
    	width: 180px;
    	position: absolute;
    }
    #nav li ul li {
    	float: left;
    	width: 180px;
    	background: #F6F6F6;
    }
    #nav li ul a {
    	display: block;
    	width: 156px;
    	text-align:left;
    	padding-left:24px;
    }
    #nav li ul a:link {
    	color:#666;
    	text-decoration:none;
    }
    #nav li ul a:visited {
    	color:#666;
    	text-decoration:none;
    }
    #nav li ul a:hover {
    	color:#F3F3F3;
    	text-decoration:none;
    	font-weight:normal;
    	background:#C00;
    }
    #nav li:hover ul {
    	left: auto;
    }
    #nav li.sfhover ul {
    	left: auto;
    }
    #content {
    	clear: left;
    }


    js部分

    function menuFix() { 
             var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
             for (var i=0; i<sfEls.length; i++) { 
                sfEls[i].οnmοuseοver=function() { 
                this.className+=(this.className.length>0? " ": "") + "sfhover"; 
              } 
             sfEls[i].onMouseDown=function() { 
                 this.className+=(this.className.length>0? " ": "") + "sfhover"; 
             } 
             sfEls[i].onMouseUp=function() { 
                 this.className+=(this.className.length>0? " ": "") + "sfhover"; 
             } 
             sfEls[i].οnmοuseοut=function() { 
                 this.className=" "; 
             } 
         } 
    } 
    window.οnlοad=menuFix;


    展开全文
  • js 下拉菜单

    2021-02-11 13:19:35
    js下拉菜单案例 html结构部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...

    js中下拉菜单案例
    html结构部分

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            a {
                text-decoration: none;
                color: #000;
            }
            
            li {
                list-style: none;
            }
            
            body {}
            
            p {
                position: absolute;
                display: inline-block;
                width: 0;
                height: 0;
                top: 7px;
                right: -4px;
                border-style: solid;
                border-width: 10px;
                border-color: #000 transparent transparent transparent;
                font-size: 0;
                line-height: 0;
            }
            
            .nav {
                width: 251px;
                height: 21px;
                margin: 100px 190px;
                background: #f1f1f1;
            }
            
            .nav>a {
                color: #000;
            }
            
            .nav li {
                position: relative;
                float: left;
                width: 80px;
                height: 40px;
                padding-left: 5px;
            }
            
            .nav .myjdlist {
                display: none;
                width: 251px;
                height: 150px;
                margin-left: -5px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-top: 0;
            }
            
            .myjdlist li {
                height: 20px;
                padding: 10px;
                font-size: 12px;
                color: #999;
                padding-left: 5px;
            }
        </style>
    </head>
    
    <body>
        <ul class="nav">
            <li>
                <a href="">我的京东</a>
                <p></p>
                <ul class="myjdlist">
                    <li><a href="">待处理订单</a></li>
                    <li><a href="">消息</a></li>
                    <li><a href="">返修退换货</a></li>
                    <li><a href="">我的问答</a></li>
                    <li><a href="">降价商品</a></li>
                    <li><a href="">我的关注</a></li>
                </ul>
            </li>
        </ul>
    </body>
    
    </html>
    

    js 部分代码
    1,先获取元素
    2,循环遍历
    3,创建事件
    4,添加事件

    <script>
            var nav = document.querySelector('.nav'); //获取元素
            var lis = nav.children; // 获取nav下面的子元素li
            for (var i = 0; i < lis.length; i++) { // 循环                                                
                lis[i].onmousemove = function() { //li里面的第i个 鼠标经过触发                   a, p,ul
                        this.children[2].style.display = 'block'; //this(当前)的childre(子元素) [0,1,2] 这里的是2是指ul标签
                    }                                             //ul的样式 显示
                lis[i].onmouseout = function() { //li里面的第i个 鼠标移出触发
                    this.children[2].style.display = 'none'; //当前的子元素 隐藏
                }
            }
        </script>
    
    展开全文
  • JS 下拉菜单

    2016-08-14 16:00:00
    HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉菜单</title> 6 <link rel="stylesheet" hre...

    HTML 

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>下拉菜单</title>
     6         <link rel="stylesheet" href="css/style.css">
     7         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     8         <script src="js/script.js"></script>
     9     </head>
    10     <body>
    11         <div id="nav">
    12             <ul>
    13                 <li><a href="#">首页</a></li>
    14                 <li><a href="#">学习 +</a>
    15                     <ul>
    16                         <li><a href="#">JavaScript</a></li>
    17                         <li><a href="#">jQuery</a></li>
    18                     </ul>
    19                 </li>
    20                 <li><a href="#">案例 +</a>
    21                     <ul>
    22                         <li><a href="#">JavaScript ></a>
    23                             <ul>
    24                                 <li><a href="#">下拉菜单</a></li>
    25                                 <li><a href="#">图片轮播</a></li>
    26                                 <li><a href="#">拖拽效果</a></li>
    27                             </ul>
    28                         </li>
    29                         <li><a href="#">jQuery ></a>
    30                             <ul>
    31                                 <li><a href="#">下拉菜单</a></li>
    32                                 <li><a href="#">图片轮播</a></li>
    33                                 <li><a href="#">拖拽效果</a></li>
    34                             </ul>
    35                         </li>
    36                     </ul>
    37                 </li>
    38                 <li><a href="#">关于</a></li>
    39             </ul>
    40         </div>
    41     </body>
    42 </html>
    View Code

     

    CSS实现三级菜单

     1 /*静态页面样式*/
     2 * {
     3     margin:0;
     4     padding:0;
     5 }
     6 
     7 #nav {
     8     width: 500px;
     9     height: 50px;
    10     margin: 50px auto;
    11     background-color: #ccc;
    12     border-radius: 10px;
    13 }
    14 
    15 ul li {
    16     list-style: none;
    17 }
    18 
    19 #nav>ul>li {
    20     float: left;
    21 }
    22 
    23 ul a {
    24     text-decoration: none;
    25     color: black;
    26     display: block;
    27     text-align: center;
    28     height: 50px;
    29     line-height: 50px;
    30     width: 125px;
    31     background-color: #ccc;
    32     border-radius: 10px;
    33 }
    34 
    35 
    36 ul a:hover {
    37     color: white;
    38     background-color: black;
    39     border-radius: 10px;
    40 }
    41 
    42 ul ul {
    43     position: absolute;
    44     display: none;
    45 }
    46 
    47 ul ul ul {
    48     position: absolute;
    49     margin-left: 125px;
    50     margin-top: -50px;
    51     display: none;
    52 }
    53 
    54 
    55 /*CSS显示下拉菜单*/
    56 ul li:hover>ul {
    57     display: block;
    58 }
    View Code

     

    JS实现三级菜单

     1 window.onload = showMenu;
     2 
     3 function showMenu() {
     4     var nav = document.getElementById("nav");
     5     var list = nav. getElementsByTagName("li");
     6 
     7     for (var i = 0, l = list.length; i < l; i++) {
     8         list[i].onmouseover = function() {
     9             var sub_menu = this.getElementsByTagName("ul")[0];
    10             if(sub_menu) {
    11                 sub_menu.style.display = "block";
    12             }
    13         }
    14         list[i].onmouseout = function() {
    15             var sub_menu = this.getElementsByTagName("ul")[0];
    16             if(sub_menu) {
    17                 sub_menu.style.display = "none";
    18             }
    19         }
    20     }
    21 }
    View Code

     

    jQuery实现三级菜单

    1 $(document).ready(function() {
    2     $("#nav").find("li").mouseover(function() {
    3         $(this).children("ul").show();
    4     });
    5     $("#nav").find("li").mouseout(function() {
    6         $(this).children("ul").hide();
    7     });
    8 })
    View Code

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

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

     

    JS实现动画菜单

     1 window.onload = showMenu;
     2 
     3 function showMenu() {
     4     var nav = document.getElementById("nav");
     5     var list = nav.getElementsByTagName("li");
     6 
     7     for (var i = 0, l = list.length; i < l; i++) {
     8         list[i].onmouseover = function() {
     9             var sub_menu = this.getElementsByTagName("ul")[0];
    10             if(sub_menu) {
    11                 sub_menu.style.display = "block";
    12                 var addH = function() {
    13                     var h = sub_menu.offsetHeight;
    14                     h += 5;
    15                     if(h >= 100) {
    16                         sub_menu.style.height = 100 + "px";
    17                     } else {
    18                         sub_menu.style.height = h + "px";
    19                     }
    20                 };
    21                 setInterval(addH, 50);
    22             }
    23         }
    24 
    25         list[i].onmouseout = function() {
    26             var sub_menu = this.getElementsByTagName("ul")[0];
    27             if(sub_menu) {
    28                 var subH = function() {
    29                     var h = sub_menu.offsetHeight;
    30                     h -= 5;
    31                     if(h <= 0) {
    32                         sub_menu.style.height = 0 + "px";
    33                         sub_menu.style.display = "none";
    34                     } else {
    35                         sub_menu.style.height = h + "px";
    36                     }
    37                 };
    38                 setInterval(subH, 50);
    39             }
    40         }
    41     }
    42 }
    View Code

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

    只能显示二级菜单,三级菜单被吃了?!

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

     

    CSS实现动画菜单

     1 /*静态页面样式*/
     2 * {
     3     margin:0;
     4     padding:0;
     5 }
     6 
     7 #nav {
     8     width: 500px;
     9     height: 50px;
    10     margin: 50px auto;
    11     background-color: #ccc;
    12     border-radius: 10px;
    13     box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
    14 }
    15 
    16 #nav>ul>li>a {
    17     border-radius: 10px;
    18 }
    19 
    20 #nav ul li {
    21     list-style: none;
    22 }
    23 
    24 #nav>ul>li {
    25     float: left;
    26 }
    27 
    28 #nav a {
    29     text-decoration: none;
    30     color: black;
    31     display: block;
    32     height: 50px;
    33     width: 125px;
    34     text-align: center;
    35     line-height: 50px;
    36     background-color: #ccc;
    37 }
    38 
    39 #nav ul ul {
    40     position: absolute;
    41     /*display: none;*/
    42     opacity: 0;
    43     margin: 20px 0 0 0;
    44     transition: all 1s ease-in-out;
    45 }
    46 
    47 #nav ul ul ul {
    48     margin-top: -30px;
    49     margin-left: 160px;
    50 }
    51 
    52 #nav ul ul a {
    53     border-radius: 10px 10px 0 0;
    54     border-bottom: 1px solid white;
    55 }
    56 
    57 #nav a:hover {
    58     color: white;
    59     background-color: black;
    60 }
    61 
    62 #nav>ul>li:hover>ul {
    63     /*display: block;*/
    64     opacity: 1;
    65     margin: -15px 0 0 0;
    66 }
    67 
    68 #nav>ul ul>li:hover>ul {
    69     /*display: block;*/
    70     opacity: 1;
    71     margin-left: 140px;
    72     margin-top: -50px;
    73 } 
    74 
    75 /*CSS画三角形*/
    76 #nav>ul>li>ul>li:first-child:before {
    77     content: "";
    78     display: block;
    79     border-top: 15px solid transparent;
    80     border-right: 15px solid transparent;
    81     border-bottom: 15px solid #ccc;
    82     border-left: 15px solid transparent;
    83     width: 0;
    84     margin-left: 50px;
    85 }
    86 
    87 #nav ul ul ul>li:first-child:before {
    88     content: "";
    89     position: absolute;
    90     display: block;
    91     border-top: 15px solid transparent;
    92     border-right: 15px solid #ccc;
    93     border-bottom: 15px solid transparent;
    94     border-left: 15px solid transparent;
    95     width: 0;
    96     margin-left: -30px;
    97     margin-top: 13px;
    98 }
    View Code

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

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

     

    转载于:https://www.cnblogs.com/cc156676/p/5770389.html

    展开全文
  • js 下拉菜单实现代码

    2020-10-29 02:50:37
    js 下拉菜单实现代码,原理比较简单,需要的朋友可以参考下,具体的美化要靠自己。
  • 非常小巧的JS下拉菜单代码
  • 主要介绍了js下拉菜单生成器dropMenu的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Vue.js下拉菜单组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了js 下拉菜单点击旁边收起实现(踩坑记),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • CSS+JS下拉菜单制作软件CSS+JS下拉菜单制作软件CSS+JS下拉菜单制作软件CSS+JS下拉菜单制作软件
  • 大家对下拉菜单并不陌生吧,下面为大家介绍下使用js实现下拉菜单语言选项,具体实现如下,喜欢的朋友可以看看
  • css+js下拉菜单

    2020-12-11 05:20:11
    css菜单演示 产品介绍 产品一 产品一 产品一 产品一 产品一 产品一 服务介绍 服务二 服务二 服务二 ... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]纯css下拉菜单 老Y天下-网页特效-导航菜
  • 利用下拉菜单轮换显示提示信息
  • 旗子图片(function($) {var jSelect = $(".jsSelect");$(jSelect).find("li:first").hover(function(){$(".s").css("background","url(images/68_60.png) 54px 0px no-repeat");h=$(this).parent("ul").find("li")....
  • 示例代码:htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">select联动functionselct(arr){vartoList=document.form1.elements["slt2"];...
  • 原文地址:http://www.cnblogs.com/yes123/p/3944047.html纯css+js下拉菜单实例代码分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错。例子:<...<head><met...
  • jS下拉菜单原理

    千次阅读 2007-06-04 14:33:00
    那么,在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。1、 S下拉菜单原理下拉菜单实际上就是在开始的时候显示一级
  • CSS+JS下拉菜单制作软件 带设计器,所见即所得

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,182
精华内容 1,272
关键字:

js下拉菜单