jQuery+css打造的带箭头指示的导航菜单
<!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>jQuery+css打造的带箭头指示的导航菜单丨芯晴网页特效丨CsrCode.Cn</title>
<script type="text/javascript" src="http://www.csrcode.cn/images/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.csrcode.cn/imagesforcode/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="http://www.33567.cn" target="_blank">快播电影</a></span>
<span class="m1"><a href="http://changshi.csrcode.cn" target="_blank">生活常识</a></span>
<span class="m1"><a href="http://www.7caidy.com" target="_blank">Qvod电影</a></span>
<span class="m1"><a href="http://bbs.33567.cn" 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>
<br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href="http://www.csrcode.cn/images/jquery-1.4.2.min.js">jquery-1.4.2.min.js</a>、所需png图片：<img src="http://www.csrcode.cn/imagesforcode/201208/bg.png"><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+css打造的带箭头指示的导航菜单丨芯晴网页特效丨CsrCode.Cn</title>
<script type="text/javascript" src="http://www.csrcode.cn/images/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.csrcode.cn/imagesforcode/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="http://www.33567.cn" target="_blank">快播电影</a></span>
<span class="m1"><a href="http://changshi.csrcode.cn" target="_blank">生活常识</a></span>
<span class="m1"><a href="http://www.7caidy.com" target="_blank">Qvod电影</a></span>
<span class="m1"><a href="http://bbs.33567.cn" 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>
<br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href="http://www.csrcode.cn/images/jquery-1.4.2.min.js">jquery-1.4.2.min.js</a>、所需png图片：<img src="http://www.csrcode.cn/imagesforcode/201208/bg.png"><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
网页特效：www.CsrCode.cn 快播电影：www.33567.cn丨www.7caidy.com
