Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery渐变发光导航菜单的实例代码

jQuery渐变发光导航菜单的实例代码

发布时间:2013-11-26   编辑:www.jquerycn.cn
今天介绍一个jQuery渐变发光效果的导航菜单,这是一个简单的通过jQuery控制opacity实现的导航菜单。

下面和大家分享一下具体的实现过程。

HTML标签结构:

复制代码 代码如下:

<ul class="animation_menu">
     <li class="current">
         <a href="#">菜单一<span>菜单一</span></a>
     </li>
     <li>
         <a href="#">菜单二<span>菜单二</span></a>
     </li>
     <li>
         <a href="#">菜单三<span>菜单三</span></a>
     </li>
     <li>
         <a href="#">菜单四<span>菜单四</span></a>
     </li>
 </ul>

CSS样式:
li的样式:

复制代码 代码如下:

.animation_menu li{
    /*块状模式显示,并使其水平平铺显示*/
    display:block;
    float: left;

    /*宽高是背景图片的*/
    width: 111px;
    height: 50px;

    /*设置文字垂直水平居中*/
    line-height: 50px;
    text-align: center;

    font-weight: bold;
    font-size: 18px;
    list-style-type:none;
}

您可能感兴趣的文章:
jQuery渐变发光导航菜单的实例代码
7款风格新颖的jQuery/CSS3菜单导航分享
jquery 遮罩层效果实现的导航菜单
jquery导航固定效果实例
jQuery实现鼠标移到元素上动态提示消息框效果
jquery遮罩层效果实现导航菜单代码
canvas渐变色:canvas如何实现渐变色的效果?
jquery弹性滑动导航菜单
jQuery菜单插件 Smooth Navigational Menu
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

关键词: jQuery  渐变  导航菜单   
[关闭]