大气/蓝色底边、带箭头的导航菜单

时间：2013-04-01 22:25 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实用菜单</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<style type="text/css">
body
{
	margin:0; padding:0; font-size:12px; font-family:"微软雅黑";
}
a:link {
	color:#3f3f3f; text-decoration: none;
}
a:visited {
	text-decoration:none; color: #3f3f3f;
}
a:hover {
	text-decoration:none; color: #f46662;
}
a:active {
	text-decoration: none; color:#f46662;
}
#main
{
	width:100%; background-color:#fafafa; border-top:#d1d1d1 1px solid; margin-top:100px; border-bottom:#32a1e3 4px solid; overflow:hidden;
}
#menu
{
	width:900px; margin:0 auto;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a;  border-right:#bfbfbf 1px dotted;  padding:10px; padding-top:13px; cursor:pointer; background-repeat:no-repeat; background-position:10px 12px;
}

</style>
<script type="text/javascript">
$(function(){

$(".m1").mouseover(function(){
	$(this).css("background-image","url('http://www.codefans.net/jscss/demoimg/201208/bg.png')");
}
).mouseout(function(){
$(this).css("background-image","none");
});
});
</script>
</head>
<body>
<div id="main">
<div id="menu">
<span class="m1" style="border-left:#bfbfbf 1px dotted; "><a href="#" target="_blank">论坛首页</a></span>
<span class="m1"><a href="#" target="_blank">学生工作</a></span>
<span class="m1"><a href="#" target="_blank">师资队伍</a></span>
<span class="m1"><a href="#" target="_blank">学科专业</a></span>
<span class="m1"><a href="#" target="_blank">教学改革</a></span>
<span class="m1"><a href="#" target="_blank">党建工作</a></span>
<span class="m1"><a href="#" target="_blank">联系我们</a></span>
</div></div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

大气/蓝色底边、带箭头的导航菜单，实用的导航菜单，鼠标放在某个菜单项的时候，会出现一个小箭头，以示菜单的当前位置，这个功能挺喜欢，希望朋友们也能用得上。大气/蓝色底边、带箭头的导航菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1038.html

大气/蓝色底边、带箭头的导航菜单

网页特效