1.纵向

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>menu01</title>

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

         }

         a{

             text-decoration: none;

             display: block;

         }

         ul{

             list-style:none;

         }

         .menu{

             width: 600px;

             margin: 300px auto;

         }

         ul li a{

             width: 120px;

             height: 30px;

             line-height: 30px;

             text-align:center;

             /*padding-left: 20px;*/

             /*text-indent: 20px;*/

             background: pink;

             color:#fff;

             margin-bottom: 5px;

         }

         a:hover{

             background: #EE7A23;

         }

     </style>

 </head>

 <body>

  <div class="menu">

     <ul>

         <li><a href="javascript:;">首页</a></li>

         <li><a href="javascript:;">行业解决方案</a></li>

         <li><a href="javascript:;">资讯</a></li>

         <li><a href="javascript:;">招聘</a></li>

         <li><a href="javascript:;">服务</a></li>

     </ul>

  </div>

 </body>

 </html>

实现效果：

注意：

解决方案：

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

实现效果：

3.圆角

实现效果：

4.向上增加高度

效果图：

5.水平增加宽度（JS）

 <script type="text/javascript">

         window.onload=function(){

             var a_num = document.getElementsByTagName("a");

             for(let i=0;i<a_num.length;i++){

                 a_num[i].onmouseover=function(){

                     clearInterval(this.time);

                     var $this = this;

                     $this.time = setInterval(function(){

                         $this.style.width = $this.offsetWidth+8+"px";

                         if($this.offsetWidth>=120){

                             clearInterval($this.time);

                         }

                     },30)

                 }

                 a_num[i].onmouseout=function(){

                     clearInterval(this.time);

                     var $this = this;

                     $this.time = setInterval(function(){

                         $this.style.width = $this.offsetWidth-8+"px";

                         if($this.offsetWidth<=120){

                             $this.style.width = "120px";

                             clearInterval($this.time);

                         }

                     },30)

                 }

             }

         }

     </script>

6.水平增加宽度（JQ）

 <script type="text/javascript">

     $ (function(){

         $("a").hover(

             function(){

                 $(this).stop().animate({"width":"160px"},200);

             },

             function(){

                 $(this).stop().animate({"width":"120px"},200);

             }

         )

     })

     </script>

Tips_一级菜单栏实现的更多相关文章

  1. Python全栈开发记录_第二篇（文件操作及三级菜单栏增删改查）

    python3文件读写操作(本篇代码大约100行) f = open(xxx.txt, "r", encoding="utf-8") 不写“r”(只读)默认是只 ...

  2. Zabbix中文使用手册

    一.Zabbix简介 详情参考“企业监控利器-zabbix”http://waringid.blog.51cto.com/65148/904201. 二.Zabbix使用 2.1 Zabbix框架介绍 ...

  3. Zabbix 中文使用手册

    一.Zabbix简介 详情参考"企业监控利器-zabbix"http://waringid.blog.51cto.com/65148/904201. 二.Zabbix使用 2.1 ...

  4. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  5. 我搞zabbix的那两天（2）

    摘要:前一篇(我搞zabbix的那两天(1))我介绍了Zabbix的安装部署以及遇到的问题,这一篇将介绍zabbix 使用及短信等告警实现!!! Zabbix主界面及汉化方法介绍 1.1 初始化主界面 ...

  6. Python全栈开发记录_第一篇（循环练习及杂碎的知识点）

    Python全栈开发记录只为记录全栈开发学习过程中一些难和重要的知识点,还有问题及课后题目,以供自己和他人共同查看.(该篇代码行数大约:300行) 知识点1:优先级:not>and 短路原则:a ...

  7. 引：Jmeter添加变量的四种方法

    一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...

  8. IDEA插件开发总结

    一:前置步骤 1.添加开发插件所需的SDK: 1.1先添加JDK 1.2打开Project Structure-Platform Settings-SDKs 1.3添加IntelliJ Platfor ...

  9. jquery自定义插件-参数化配置多级菜单导航栏插件

    1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...

随机推荐

  1. python Django cookie和session

    在一个会话的多个请求中共享数据,这就是会话跟踪技术.例如在一个会话中的请求如下:  请求银行主页: 请求登录(请求参数是用户名和密码): 请求转账(请求参数与转账相关的数据): 请求信誉卡还款(请求参 ...

  2. ACM-ICPC 2018 徐州赛区网络预赛 A Hard to prepare(递推)

    https://nanti.jisuanke.com/t/31453 题目 有n个格子拉成一个环,给你k,你能使用任意个数的0 ~ 2^k - 1,规定操作 i XNOR j 为~(i  ^  j), ...

  3. python学习04

    数据类型-list,tuple 1) 1.1.list的表现方法:[1,2,3,4,5,6] 1.2.计算list的长度用 len() 1.3 list中的索引 a =[1,2,3,4,5] a[1] ...

  4. Best Practice API

    # 建议直接使用的第三方类 Common Lang =>StringUtils =>Validate Guava =>Cache =>Ordering JDK7(LTS JDK ...

  5. react-router v4 按需加载的配置方法

    在react项目开发中,当访问默认页面时会一次性请求所有的js资源,这会大大影响页面的加载速度和用户体验.所以添加按需加载功能是必要的,以下是配置按需加载的方法: 安装bundle-loader np ...

  6. CentOS/Linux开放某些端口

    CentOS/Linux开放某些端口 CentOS/Linux 装载系统的时候只开启了少数端口如22,80(有些连80都没有开放)等. 结果再装完Nginx+PHP+MySQL 后不能访问网站. 当然 ...

  7. 电子医疗设备创新研发应该用i.MX6Q开发板吗？为医疗设备提供解决方案

    伴随医疗信息化.移动化.智能化的不断发展,居民对自身健康的关注度持续加强,全球医疗电子产业近年来持续保持快速增长态势.同时,源于庞大的人口基数以及迅速增长的老龄化人口带来持续增长的医疗服务需求,加之全 ...

  8. Django 内置分页器

    先导入Django内置的分页器 在商品列表页或者购物车列表页导入 在渲染list.html导入 然后在views后台渲染方法写入 打开list页面结果

  9. vmware 14 密钥

    VMware 2017 v14.x 永久许可证激活密钥 FF31K-AHZD1-H8ETZ-8WWEZ-WUUVA CV7T2-6WY5Q-48EWP-ZXY7X-QGUWD 来源链接: http:/ ...

  10. HTTP协议12-HTTPS

    1)HTTP的缺点 通信使用明文(不加密),内容可能会被窃听 不验证通信方的身份,因此有可能遭遇伪装 无法证明报文的完整性,所有有可能已被篡改 1.1 通信使用明文可能会被窃听 由于HTTP本身不具备 ...