css箭头菜单

lib · 发表于 2013-2-8 01:02:32

最近公司要对已有的产品进行升级，希望改变一下导航菜单的展现方式。于是，在网上搜索了一下，感觉带箭头的导航菜单方式不错，于是就模仿着写了一个，其实很简单。不废话了，看代码。
<!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>
效果显示如下：

附件中是整个实现的代码。

2011-01-08修改：
今天和同事交流了一下，发现了更好的实现效果。感谢同事marker提出的建议和改进的帮助。

箭头样式导航菜单2.rar是marker提供的实现效果（注意，菜单栏在浏览器中是右对齐的），如图

箭头样式导航菜单3.rar是我改进后的另一种实现效果（注意，菜单栏在浏览器中是左对齐的），如图

大家给看看，是否还有bug没有测试到？欢迎指出，在此先谢谢！

		自动登录	找回密码
密码			立即注册

css箭头菜单

浏览过的版块