斜角菜单

/**************************** index.html ***********************************/

<!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>菜单 Demo</title>
<link rel="stylesheet" type="text/css" href="style/base.css"/>
<link rel="stylesheet" type="text/css" href="style/style.css"/>
</head>

<body>
    <ul id="menu" class="bc mt30 f12">
        <li><a href="index.html" id="menuHome">首页</a></li>
        <li><a href="2.html">学院概况</a></li>
        <li><a href="3.html">学系设置</a></li>
        <li><a href="4.html">师资团队</a></li>
        <li><a href="5.html">教学管理</a></li>
        <li><a href="6.html">招生就业</a></li>
        <li><a href="7.html">科学研究</a></li>
        <li><a href="8.html">学生工作</a></li>
        <li><a href="9.html">校友天地</a></li>
        <li><a href="10.html">ISO</a></li>
    </ul>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(function(){
               //当前链接
               var url = window.location.toString().split("/");
                var menu_a = $("#menu > li > a:not(:first)");
                for(var i=0;i<menu_a.length;i++){
                   if (url[url.length-1] == menu_a.eq(i).attr("href") || (url[url.length-1] == "" && i==0))
                       menu_a.eq(i).addClass("onthis");
                   else
                       menu_a.eq(i).removeClass("onthis");
                }
                 //去除链接虚线框
                $("a").bind("focus",function(){ 
                    if(this.blur){  
                        this.blur(); 
                    } 
                });
               });
</script>

/**************************** style.css ***********************************/

#menu{ background:url(../images/menuBg.jpg) no-repeat; width:790px; height:28px; }
#menu li{ float:left; }
#menu li #menuHome{ width:97px; color:#FFF; margin-left:0; }
#menu li #menuHome:hover{ background:none;}
#menu li a{ width:97px; height:20px; padding:8px 0 0 0; margin-left:-20px; position:relative; text-align:center; display:block; color:#000; text-decoration:none;  }
#menu li a:hover,#menu li .onthis{ color:#f3ec02; background:url(../images/menuHoverBg.gif) 1px 0; }

#menu li a{ width:97px; height:20px; padding:8px 0 0 0; margin-left:-20px; position:relative; text-align:center; display:block; color:#000; text-decoration:none;  }

posted @ 2014-08-18 16:25  linyongqin  阅读(133)  评论(0)  编辑  收藏  举报