css漂亮的侧导航栏,jQuery+css实现非常漂亮的水平导航菜单效果

本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

用到的背景图片tab.gif如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery+css水平导航菜单

$(function() {

$("ul>li").click(function() {

$("ul>li").each(function() { $(this).removeClass("_lishow"); });

$(this).addClass("_lishow");

});

});

ul

{

list-style-type: none;

border: 0px blue solid;

height: 27px;

width: 480px;

}

ul li

{

list-style-type: none;

float: left;

width: 74px;

height: 27px;

line-height: 27px;

text-align: center;

background-color: #CCCCFF;

background: url(../images/tab.gif);

background-position: -74px 0px;

}

ul li:hover

{

cursor: pointer;

}

._lishow

{

background: url(../images/tab.gif);

background-position: 0px 0px;

}

• Menu1
• Menu2
• Menu3
• Menu4
• Menu5
• Menu6

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。