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. Eclipse之JSP页面的使用

    Eclipse之JSP页面的使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用Eclipse创建JSP文件 1>.点击new file,选择jsp File 2&g ...

  2. NOI-OJ 1.13 ID:34 确定进制

    整体思路 对于任意的p,q,r,可能使得p*q=r的最小进制应该是p,q,r三个数的所有数位中最大的数字+1,例如,6,9,42三个数中所有数位中最大的数字是9,故可能成立的最小进制是9+1,即10. ...

  3. django分页器

    网站页面的分页效果可以通过分页器实现 分页器的使用 urls.py from django.contrib import admin from django.urls import path from ...

  4. 【hdu 5217】Brackets

    Description Miceren likes playing with brackets. There are N brackets on his desk forming a sequence ...

  5. 给Myeclipse配置tomcat服务器

    1.安装好Tomcat 7.x服务器 2.window->perference,在搜索框中搜索Tomcat: 3.将MyEclipse自带的Tomcat及其他的Tomcat服务器禁用: 4.启用 ...

  6. LOJ #2116 Luogu P3241「HNOI2015」开店

    好久没写数据结构了 来补一发 果然写的时候思路极其混乱.... LOJ #2116 Luogu P3241 题意 $ Q$次询问,求树上点的颜色在$ [L,R]$中的所有点到询问点的距离 强制在线 询 ...

  7. android系统添加预置APP（so库自动释放)

    将APK直接放入系统目录中,会导致APK找不到so文件.正常情况下的安装是使用PackageManager,它会将so文件拷贝到系统读取的so目录(system/lib或system/lib64)下, ...

  8. Python3.6及以上pip安装pymssql错误的解决办法[Windows&Linux freetds安装]

    只有由于Python3.6装不上 pymssql,所以一直用Python3.5的版本. 报错界面 现在有了新的解决方法: 原帖如下: https://docs.microsoft.com/en-us/ ...

  9. 【原创】大叔问题定位分享（27）spark中rdd.cache

    spark 2.1.1 spark应用中有一些task非常慢,持续10个小时,有一个task日志如下: 2019-01-24 21:38:56,024 [dispatcher-event-loop-2 ...

  10. Mac 解决 Sourcetree 同步代码总需要密码的问题

    git config --global credential.helper osxkeychain