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. openstack项目【day23】：KVM介绍

    阅读目录 什么是kvm 为何要用kvm kvm的功能 常见虚拟化模式 KVM架构 KVM工具集合 一 什么是kvm KVM 全称 Kernel-Based Virtual Machine.也就是说 K ...

  2. idea设置java内存

    -Xms1024m -Xmx10240m -XX:MaxPermSize=512m 设置环境变量JAVA_OPTS="-server -Xms800m -Xmx800m -XX:PermSi ...

  3. html设置背景图片并自适应

    <style> html{ height:100%; } body{ padding: 0; margin: 0; background: url(images/2.jpg); backg ...

  4. 四十三、Linux 线程——线程同步之线程信号量

    43.1 信号量 43.1.1 信号量介绍 信号量从本质上是一个非负整数计数器,是共享资源的数目,通常被用来控制对共享资源的访问 信号量可以实现线程的同步和互斥 通过 sem_post() 和 sem ...

  5. 时间序列函数resamlpe详解

    resample与groupby的区别:resample:在给定的时间单位内重取样groupby:对给定的数据条目进行统计 函数原型:DataFrame.resample(rule, how=None ...

  6. idea+maven+ssm搭建boot_crm项目遇到的问题

    使用idea+maven+ssm搭建一个boot_crm项目,遇到的问题如下: 1.环境搭建好了,相关配置文件都配置好了,也部署到了tomcat,但是无法启动首页. 通过百度,google找到了,原因 ...

  7. Android Camera MSM HAL

    高通新的camera驱动架构设计发生了一些变化,借用互联网上常用的一种结构,大致的原理如此:将camera的所有功能划分为不同的模块,让模块自己来决定自己的事情(高内聚,低耦合),模块需要有统一的接口 ...

  8. 初学python之路-day01

    第一天学习python,先了解到了进制之间的转换关系. 如二进制与十进制的转换,如1111转成十进制为15,1111从左向右可看出2^3+2^2+2^1+2^0为8+4+2+1=15.记住前8位1的二 ...

  9. KNN与K-Means的区别

    KNN(K-Nearest Neighbor)介绍 Wikipedia上的 KNN词条 中有一个比较经典的图如下: KNN的算法过程是是这样的: 从上图中我们可以看到,图中的数据集是良好的数据,即都打 ...

  10. Win7+keras+tensorflow使用YOLO-v3训练自己的数据集

    一.下载和测试模型 1. 下载YOLO-v3 git clone https://github.com/qqwweee/keras-yolo3.git 这是在Ubuntu里的命令,windows直接去 ...