zoukankan      html  css  js  c++  java
  • Jquery制作下拉菜单实现二级菜单缓慢淡出入效果

    1.实现出入效果--Jquery

    <html>
    <title>nav</title>
    <head>
    <style>
    *{margin:0; padding:0}
    ul{margin:0, auto;list-style:none}
    #nav{background:#eee; 572px; height:60px;margin:0 auto;}
    ul li{float:left; text-align:center; line-height:60px;padding:0px;position:relative;}
    a{text-decoration:none; color:#000;display:block;padding:0 45px;}
    a:hover{color:#FFF;background-color:#666;}
    ul li ul li{float:none;background-color:#eee;margin-top:2px;}
    ul li ul{position:absolute;left:0px;top:60px;display:none}
    ul li ul li a{padding:0 25px}
    
    </style>
    <script src="C:Usersaaron.li01Desktop
    eview devjquery-3.1.1.min.js"></script>
    <script type="text/javascript">
    
    
        $(document).ready(function(){
           $(".top-nav li").mousemove(function(){
             $(this).find("ul").slideDown("1000");
           });
           $(".top-nav li").mouseleave(function(){
             $(this).find("ul").slideUp("slow");
           });
        });
    </script>
    </head>
    <body>
    <div id="nav">
    <ul class="top-nav">
    <li class="navmenu"><a href="#">Home</a>
     <ul>
         <li><a href="#">BlueSea</a></li>
         <li><a href="#">WhiteHouse</a></li>
     </ul>
    </li>
       
    <li><a href="#">Species</a>
    <ul>
         <li><a href="#">BlueSea</a></li>
         <li><a href="#">WhiteHouse</a></li>
     </ul>
    </li>
    <li><a href="#">Management</a>
    <ul>
         <li><a href="#">BlueSea</a></li>
         <li><a href="#">WhiteHouse</a></li>
     </ul>
    </li>
    <li><a href="#">About</a></li>
    </ul>
    </div>
    
    
    </body>
    </html>

    2.普通的二级菜单的显示(鼠标经过时)

    <html>
    <title>nav</title>
    <head>
    <style>
    *{margin:0; padding:0}
    ul{margin:0, auto;list-style:none}
    #nav{background:#eee; 572px; height:60px;margin:0 auto;}
    ul li{float:left; text-align:center; line-height:60px;padding:0px;position:relative;}
    a{text-decoration:none; color:#000;display:block;padding:0 45px;}
    a:hover{color:#FFF;background-color:#666;}
    ul li ul li{float:none;background-color:#eee;margin-top:2px;}
    ul li ul{position:absolute;left:0px;top:60px;display:none}
    ul li ul li a{padding:0 25px}
    
    </style>
    <script src="C:Usersaaron.li01Desktop
    eview devjquery-3.1.1.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(".navmenu").mouseover(function(){
          $(this).children("ul").show();
        })
        
        $(".navmenu").mouseout(function(){
          $(this).children("ul").hide();
        })  
    }); 
    
    </script>
    </head>
    <body>
    <div id="nav">
    <ul class="top-nav">
    <li class="navmenu"><a href="#">Home</a>
     <ul>
         <li><a href="#">BlueSea</a></li>
         <li><a href="#">WhiteHouse</a></li>
     </ul>
    </li>
       
    <li><a href="#">Species</a>
    <ul>
         <li><a href="#">BlueSea</a></li>
         <li><a href="#">WhiteHouse</a></li>
     </ul>
    </li>
    <li><a href="#">Management</a>
    <ul>
         <li><a href="#">BlueSea</a></li>
         <li><a href="#">WhiteHouse</a></li>
     </ul>
    </li>
    <li><a href="#">About</a></li>
    </ul>
    </div>
    
    
    </body>
    </html>
  • 相关阅读:
    Java +安卓 定时任务
    android动画解析(初级)
    语义化版本 2.0.0
    团队中的 Git 实践
    Spring和SpringBoot比较,解惑区别
    Spring boot 拦截器和过滤器
    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-install-plugin:2.4:install (default-cli) on project kircp-js-plan-resource: The packaging for this project did not assign a file to the bu
    Java函数优雅之道
    在springMVC的controller中获取request,response对象的一个方法
    Kotlin 数据类型(数值类型)
  • 原文地址:https://www.cnblogs.com/Aaron-Lee/p/6406162.html
Copyright © 2011-2022 走看看