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. 主机管理+堡垒机系统开发：webssh（十）

    一.安装shellinabox 1.安装依赖工具 yum install git openssl-devel pam-devel zlib-devel autoconf automake libtoo ...

  2. Docker：网络及数据卷设置 [四]

    一.Docker网络设置 默认情况下,docker会创建一个桥接网卡[docker 0],docker有2种映射方式,一种是随机映射,一种是指定映射 提示:生产场景一般不使用随机映射,但是随机映射的好 ...

  3. $L^p$ 调和函数恒为零

    设 $u$ 是 $\bbR^n$ 上的调和函数, 且 $$\bex \sen{u}_{L^p}=\sex{\int_{\bbR^n}|u(y)|^p\rd y}^{1/p}<\infty. \e ...

  4. Django组件-forms

    forms组件 校验字段功能 针对一个实例:注册用户 模型:models.py class UserInfo(models.Model): name=models.CharField(max_leng ...

  5. 批量检测服务器是否能telnet连通

    # coding: UTF-8import osimport sysimport jsonimport platformfrom _utils.patrol2 import data_format,r ...

  6. easyui系列一 下拉框之组合框combobox

    一.基础组合框 示例 <select class="easyui-combobox" name="state" style="width:200 ...

  7. AOP注解使用详解

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  8. 导出excel 文件

    ---恢复内容开始--- 安装  pip install xlwt ---恢复内容结束---

  9. java 小程序开发PKCS7Padding 解密方法实现，以及错误Cannot find any provider supporting AES/CBC/PKCS7Padding 解决办法

    近日在对接小程序API,其中wx.getUserInfo api返回的数据encryptedData 的解密算法要求为: AES-128-CBC,数据采用PKCS#7填充. 经过一番查询,得到java ...

  10. James Munkres Topology: Sec 18 Exer 12

    Theorem 18.4 in James Munkres “Topology” states that if a function \(f : A \rightarrow X \times Y\) ...