当前位置:96看吧 > 实用代码 > 导航菜单 > div+css打造清爽绿色的网站导航菜单

div+css打造清爽绿色的网站导航菜单

时间:2013/06/17
作者:马文栋
来源:织梦采集侠
查看:
标签:导航菜单

div+css打造清爽绿色的网站导航菜单,热这个夏天清爽些吧!我们动手打造清爽的网站导航菜单。

编 辑 者:马文栋

创意来源:织梦采集侠 www.caijixia.com

sytle代码样式如下:

<style type="text/css">
/* menu */
#menu { height:38px; padding:0 15px; }
#menu ul { display:block; background:url(nav_bg.jpg) repeat-x; height:38px; border-radius:3px; border-left:solid 1px #090; border-right:solid 1px #090; }
#menu ul li { float:left; padding-right:0px; width:93px; height:38px; line-height: 38px; background: url(nav_line.jpg) no-repeat; }
#menu ul li a { text-align:center; height:38px; width:93px; color:#FFF; display:block; font-size:14px; }
#menu ul li a:hover, #menu ul li a.current { text-decoration:none; background:url(nav_cur.jpg) no-repeat center center; }
</style>

用到三张图片:

菜单背景图片:nav_bg.jpg

当前位置背景:nav_cur.jpg

菜单背景图片:nav_line.jpg

当前位置的效果实现,使用jQuery+Css组件,代码如下:

<script type="text/javascript"> 
$("#menu li:eq(1) a").addClass("current"); //当前位置的jQuery事件
</script>

提醒:使用jquery代码前,记得在<body>前放置jquery.js文件

上一篇:仿flash效果jQuery导航菜单
下一篇:百度蓝色科技感jQuery导航菜单
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
相关最新
相关热门