在MVC3中使用Jquery 制作导航。
在导航的航标中。一级菜单为<lu class="menu">的标签。而每一个一级标签中，根据data-menu属性，对应二级菜单的class类名的lu标签。不管是一级菜单还是二级菜单，他们的高亮区分为class=“on”的区别，class="on"时，则代表当前的导航为高亮。好了，详细的页面布局就说这么了。
<!DOCTYPE html>
<html>
<head>
<title>居民健康卡应用交互平台 | @ViewBag.Title</title>
<link href="@Url.Content("~/Content/css/style.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/login_style.css")" rel="stylesheet" type="text/css" />
@if (IsSectionDefined("css"))
{
@RenderSection("css", false)
}
@section css{
<style type="text/css">
.tab_content td a{color:#069;}
</style>
}
</head>
<body>
<!--header start-->
@Html.Partial("~/Views/Shared/_Top.cshtml")
<div class="top_img w960"></div>
<div class="manu_bg w960">
<div class="mainnav">
<ul class="menu">
<li class="@ViewBag.jigou" data-menu="jigou">机构管理</li>
<li class="@ViewBag.kaguan" data-menu="kaguan">健康卡管理</li>
<li class="@ViewBag.sam" data-menu="sam">SAM卡管理</li>
<li class="@ViewBag.produce" data-menu="produce" >生产单位管理</li>
<li class="@ViewBag.statics" data-menu="statics">统计分析</li>
<li class="@ViewBag.audit" data-menu="audit">权限管理</li>
</ul>
</div>
<div class="subnav">
<ul class="jigou">
<li class="@ViewBag.item_01"><a href="#">注册管理中心管理</a></li>
<li class="@ViewBag.item_02"><a href="/jkh/">医疗卫生机构管理</a></li>
<li class="@ViewBag.item_03"><a href="#">制卡机构管理</a></li>
<li class="@ViewBag.item_04"><a href="/jkb/">金融机构管理</a></li>
</ul>
<ul class="kaguan">
<li class="@ViewBag.item_05"><a href="#">制卡管理</a></li>
<li class="@ViewBag.item_06"><a href="#">发卡管理</a></li>
<li class="@ViewBag.item_07"><a href="#">卡应用维护</a></li>
<li class="@ViewBag.item_08"><a href="#">黑名单管理</a></li>
<li class="@ViewBag.item_09"><a href="#">卡应用监管</a></li>
</ul>
<ul class="sam">
<li class="@ViewBag.item_10"><a href="#">制卡管理</a></li>
<li class="@ViewBag.item_11"><a href="#">发卡管理</a></li>
<li class="@ViewBag.item_12"><a href="#">卡应用维护</a></li>
<li class="@ViewBag.item_13"><a href="#">黑名单管理</a></li>
<li class="@ViewBag.item_14"><a href="#">卡应用监管</a></li>
</ul>
<ul class="produce"></ul>
<ul class="statics">
<li class="@ViewBag.item_15"><a href="/jks/">发卡统计</a></li>
<li class="@ViewBag.item_16"><a href="/jks/cash">刷卡统计</a></li>
</ul>
<ul class="audit">
<li class="@ViewBag.item_17"><a href="/jka/">个人资料</a></li>
<li class="@ViewBag.item_18"><a href="/jka/admin">用户管理</a></li>
</ul>
</div>
</div>
<!--header end-->
<div class="divh5"></div>
<!--maint start-->
<div class="main">
@RenderBody()
<br class="clear" />
</div>
<!--maincontainer end-->
<div class="gray w960"></div>
@Html.Partial("~/Views/Shared/_Footer.cshtml")
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/common.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//首先是根据当前的一级高亮焦点去添加二级的高亮
var nav = $(".mainnav .menu li.on").data("menu");
$(".subnav ul.on").removeClass("on");
$("." + nav).addClass("on");
//进入一级导航li标签鼠标的移入移出
$(".menu li").hover(function () {
var s = $(".subnav");
var t = s.data("time");
if (t!== undefined) {
s.removeData("time");
clearTimeout(t);
}
var curmenu = $(".menu li.on").removeClass("on");
if ($(".menu").data("current") === undefined) $(".menu").data("current", curmenu);
$(this).addClass("on");
$("ul.on",s).removeClass("on");
var data_menu = $(this).data("menu");
$("." + data_menu).addClass("on");
}, function () {
var sub=$(".subnav");
//当鼠标离开时增加延时，延迟二级导航的显示时间
var t = setTimeout(function () {
$(".menu .on").removeClass("on");
$(".menu").data("current").addClass("on");
$(".subnav ul.on").removeClass("on");
var nav = $(".mainnav .menu li.on").data("menu");
$("." + nav).addClass("on");
sub.removeData("time");
}, 300);
sub.data("time",t);
});
//进入二级导航DIV的移入移出
$(".subnav").hover(function () {
var o = $(this);
var t = o.data("time");
if (t!== undefined) {
o.removeData("time");
clearTimeout(t);
}
}, function () {
var t = $(".menu").data("current");
var cur = $(".menu .on");
if (t !== undefined && !cur.is(t)) {
cur.removeClass("on");
t.addClass("on");
$(".subnav ul.on").removeClass("on");
$("." + t.data("menu")).addClass("on");
}
});
});
</script>
@if (IsSectionDefined("js"))
{
@RenderSection("js", false);
}
</body>
</html>
