jQuery渐变发光导航菜单的实例代码
下面和大家分享一下具体的实现过程。
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仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果