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>

更多专业前端知识，请上【猿2048】www.mk2048.com

Tips_一级菜单栏实现相关推荐

HTML+CSS制作二级菜单栏
今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈! 效果图附上: 首先:我已链接了外部样式重 ...
使用js实现二级菜单栏切换
js实现二级菜单栏切换一.一级菜单栏和二级菜单在同一个盒子内. 当鼠标经过水果盒子时,让下面的内容显示. <!DOCTYPE html> <html lang="en&q ...
谁还期待iPhone 13？
深燃原创,作者 | 王敏终于等到了"加州来电".北京时间9月15日凌晨,不到一个半小时,苹果年度大事件"秋季发布会"以飞快的节奏从开始到结束. 这次发布会,苹 ...
（三）PYTHON字典元祖列表尝试应用
(三)PYTHON字典元祖列表尝试应用 1. 使用 join 方法将下划线添加到列表的每一个元素拼接成字符串,li ＝ ['alex', 'eric', 'rain'] li = ['boom', ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
网络相册(只能本地)
网络相册网络相册网络相册登陆注册界面关于gui及图片的上传,下载,删除功能,还有一个界面设计关于图片的浏览登陆注册界面太久太久没有在c站作总结了,今天来这里补一篇开学老师给我们布置的小任 ...
第三方移动支付类产品竞品分析：支付宝VS微信支付VS云闪付
第三方移动支付类产品竞品分析:支付宝VS微信支付VS云闪付文章目录第三方移动支付类产品竞品分析:支付宝VS微信支付VS云闪付一.分析背景与竞品选择 1.竞品分析目的 2.行业研究与市场趋势分析 ...
PyQt5开发的数据编辑器（一）
前言一直在做游戏服务器的开发工作,很多时候都要与数据打交道,很多数据都是手动修改,费时间也不易维护.一直想写一个工具一键导出游戏数据,不知从何写起:恰好现在新开发游戏,开发新游戏的同时,也写一个简简 ...
痞子衡嵌入式：存储器大厂Micron的NOR Flash芯片特殊丝印设计(FBGA代码)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是存储器大厂Micron的NOR Flash芯片特殊丝印设计(FBGA代码). 痞子衡之前写过一篇文章 <J-Flash在Micron ...

Tips_一级菜单栏实现

Tips_一级菜单栏实现相关推荐

最新文章

热门文章