jQuery实现导航条的淡入淡出

最新推荐文章于 2021-08-05 10:00:56 发布

weixin_34319111

最新推荐文章于 2021-08-05 10:00:56 发布

阅读量91

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/dongteng/blog/684402

版权

2019独角兽企业重金招聘Python工程师标准>>>

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title>菜单的淡入淡出</title>
 4     <script src="jquery.min.js"></script>
 5     <!--调用jQuery插件实现淡入淡出的效果-->
 6     <script type="text/javascript">
 7         $(function () {
 8             $(".nav li").hover(function () {
 9                 $('ul', this).fadeIn();
10             }, function () {
11                 $('ul', this).fadeOut();
12             });
13         });
14     </script>
15 <style type="text/css">
16         body{
17             font-family:Arial,sans-serif ;/*界面字体*/
18             font-size:15px;
19         }
20         .nav{/*导航条设置*/
21              margin:0;
22              padding:0;
23              list-style:none;/*去掉一级菜单的列表符号*/
24         }
25         .nav li{
26             float:left;
27             width:150px;
28             position:relative;
29         }
30             .nav li a{
31                 background: #262626;
32                 color: #fff;
33                 display: block;
34                 padding: 8px 7px 8px 7px;
35                 text-align:center;
36                 text-decoration:none;
37                 text-transform:uppercase;/*将小写的英文字母变成大写*/
38             }
39              .nav li a:hover{/*将鼠标悬停在上面时字体的颜色变化*/
40                  color:#bf3826;
41              }
42             .nav ul {
43                 position: absolute; /*相对位置*/
44                 left: 0;
45                 display: none;/*隐藏子列表项，用于在jQuery中动画实现*/
46                 margin: 0 0 0 -1px;
47                 padding: 0;
48                 list-style: none;
49                 border-bottom: 3px solid #bf3826;
50             }
51               .nav ul li{
52                   width:180px;
53                   float:left;
54                   border-top:none;
55               }
56                .nav ul a{
57                    display:block;
58                    height:15px;
59                    padding:8px 7px 13px 7px;
60                    color:#fff;
61                    border-top:none;
62                    text-decoration:none;
63                    border-bottom:1px dashed #6b6b6b;
64                }
65                .nav ul a:hover{
66                    color:#bf3826;
67                }
68     </style>
69 </head>
70 <body>
71     <div style="width:650px;margin:0 auto">
72         <ul class="nav">
73             <!--一级菜单-->
74             <li><a href="#">home</a></li>
75             <li><a href="#">phone</a>
76             <ul>
77                 <!--二级菜单-->
78                 <li><a href="#">iphone4</a></li>
79                 <li><a href="#">iphone4s</a></li>
80                 <li><a href="#">iphone5</a></li>
81                 <li><a href="#">iphone5s</a></li>
82             </ul>
83             </li>
84             <li><a href="#">ipad</a>
85             <ul>
86                 <li><a href="#">ipad mini</a></li>
87                 <li><a href="#">ipad Air</a></li>
88                 <li><a href="#">ipad Ari2</a></li>
89             </ul>
90             </li>
91         </ul>
92 
93     </div>
94 </body>
95 </html>