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. Hadoop启动脚本分析

    Hadoop启动脚本分析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 能看到这篇博客的你估计对Hadoop已经有一个系统的了解了,最起码各种搭建方式你应该是会的,不会也没有关系, ...

  2. 使用Eclipse创建动态的web工程

    使用Eclipse创建动态的web工程 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.修改工作区的编码 1>.点击Window选择Preferences 2>.将默 ...

  3. [再寄小读者之数学篇](2014-04-01 from 2103471050@qq.com 曲线积分)

    求 $\int_\vGa y^2\rd s$, 其中 $\vGa$ 由 $\dps{\sedd{\ba{rl} x^2+y^2+z^2&=a^2\\ x+z&=a \ea}}$ 决定. ...

  4. SSH框架之hibernate《三》

    Hibernate03     一.多表设计         1.1多表设计的总则             问题:我们为什么要学习多表映射?             答:                ...

  5. shell使用lftp连接ftp和sftp,并可以指定私钥

    lftp连接ftp在脚本中可以 lftp -c "open username:password@host:port; ls /Friso/20180822/click/mobile/SUCC ...

  6. Blender 快捷键笔记

    A Select All/Unselect All shift+A Create Z 切换wireframe和solid mode TAB Start or quit EditMode B Activ ...

  7. webpack学习笔记——打包后直接访问页面，图片路径错误

    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...

  8. 第29月第2天 charles

    1. https://www.jianshu.com/p/55a8c84e0f24

  9. 使用tablayout和recyclerview的时候,报重复添加Fragment错误

    原因: 在添加的子Fragment报错了, 出现了空值错误, 此时报出来错误是前一个Fragment重复添加

  10. Python爬虫基础之认识爬虫

    一.前言 爬虫Spider什么的,老早就听别人说过,感觉挺高大上的东西,爬网页,爬链接~~~dos黑屏的数据刷刷刷不断地往上冒,看着就爽,漂亮的校花照片,音乐网站的歌曲,笑话.段子应有尽有,全部都过来 ...