Tips_一级菜单栏实现

1.纵向

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>menu01</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         a{
12             text-decoration: none;
13             display: block;
14         }
15         ul{
16             list-style:none;
17         }
18         .menu{
19             width: 600px;
20             margin: 300px auto;
21         }
22         ul li a{
23             width: 120px;
24             height: 30px;
25             line-height: 30px;
26             text-align:center;
27             /*padding-left: 20px;*/
28             /*text-indent: 20px;*/
29             background: pink;
30             color:#fff;
31             margin-bottom: 5px;
32         }
33         a:hover{
34             background: #EE7A23;
35         }
36     </style>
37     
38 </head>
39 <body>
40  <div class="menu">
41     <ul>
42         <li><a href="javascript:;">首页</a></li>
43         <li><a href="javascript:;">行业解决方案</a></li>
44         <li><a href="javascript:;">资讯</a></li>
45         <li><a href="javascript:;">招聘</a></li>
46         <li><a href="javascript:;">服务</a></li>
47     </ul>
48  </div>
49 </body>
50 </html>

实现效果：

注意：

解决方案：

2.横向（注意：把<a>标签设置为：display: block;）

实现效果：

3.圆角

实现效果：

4.向上增加高度

效果图：

5.水平增加宽度（JS）

 1 <script type="text/javascript">
 2         window.onload=function(){
 3             var a_num = document.getElementsByTagName("a");
 4             for(let i=0;i<a_num.length;i++){
 5                 a_num[i].onmouseover=function(){
 6                     clearInterval(this.time);
 7                     var $this = this;
 8                     $this.time = setInterval(function(){
 9                         $this.style.width = $this.offsetWidth+8+"px";
10                         if($this.offsetWidth>=120){
11                             clearInterval($this.time);
12                         }
13                     },30)
14                 }
15 
16                 a_num[i].onmouseout=function(){
17                     clearInterval(this.time);
18                     var $this = this;
19                     $this.time = setInterval(function(){
20                         $this.style.width = $this.offsetWidth-8+"px";
21                         if($this.offsetWidth<=120){
22                             $this.style.width = "120px";
23                             clearInterval($this.time);
24                         }
25                     },30)
26                 }
27 
28             }
29         }
30 
31 
32     </script>

6.水平增加宽度（JQ）

 1 <script type="text/javascript">
 2     $ (function(){
 3         $("a").hover(
 4             function(){
 5                 $(this).stop().animate({"width":"160px"},200);
 6             },
 7             function(){
 8                 $(this).stop().animate({"width":"120px"},200);
 9             }
10         )
11     })
12     </script>

 

posted @ 2017-08-26 17:45  忍冬。  阅读(146)  评论(0)  编辑  收藏  举报