css箭头菜单
最近公司要对已有的产品进行升级，希望改变一下导航菜单的展现方式。于是，在网上搜索了一下，感觉带箭头的导航菜单方式不错，于是就模仿着写了一个，其实很简单。不废话了，看代码。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery.js"></script><title>Menu</title><style type="text/css">ul, li { list-style-type:none; padding:0; margin:0; } #menu { border:1px solid #dedede; height:35px; background:url(bg_out.gif) repeat-x;} #menu li { float:left; line-height:35px; padding-left: 10px;padding-right: 15px;} #menu li div {height: 100%;width: 100%;}.li_out {background:url(arrow_out.gif) no-repeat right center;}.li_over {cursor:hand;background:url(arrow_over.gif) no-repeat right center;color:white;}.div_over {background: url(bg_over.gif) repeat-x;margin-left: -10px;padding-left: 10px;}</style><script type="text/javascript">$(document).ready(function(){$("#menu").children("li").hover(function(){$(this).addClass("li_over");$(this).children("div").addClass("div_over");},function(){$(this).removeClass("li_over");$(this).children("div").removeClass("div_over");});});</script></head><body><ul id="menu"> <li class="li_out"><div>Home</div></li> <li class="li_out"><div>Equipment File</div></li> <li class="li_out"><div>Sparepart Account</div></li> <li class="li_out"><div>Maintenance Management</div></li> <li class="li_out"><div>System</div></li> </ul></body></html>
效果显示如下：
http://dl.iteye.com/upload/attachment/384761/30e01011-1344-3d63-8e29-d39b6510794d.gif
附件中是整个实现的代码。
2011-01-08修改：
今天和同事交流了一下，发现了更好的实现效果。感谢同事marker提出的建议和改进的帮助。
箭头样式导航菜单2.rar是marker提供的实现效果（注意，菜单栏在浏览器中是右对齐的），如图
http://dl.iteye.com/upload/attachment/385747/94684935-c596-3fcd-b4c7-c75c80339f79.gif
箭头样式导航菜单3.rar是我改进后的另一种实现效果（注意，菜单栏在浏览器中是左对齐的），如图
http://dl.iteye.com/upload/attachment/385749/30148043-78c6-39ba-8d41-612109cc8152.gif
大家给看看，是否还有bug没有测试到？欢迎指出，在此先谢谢！
页:
[1]