标签：
.mainmenu {
display: block;
bottom: 0px;
top: 80px;
position: absolute;
width: 100%;
}
.mainmenu li {
display: block;
height: 40px;
color: rgb(152,162,171);
overflow-y: auto;
overflow-x: hidden;
cursor: pointer;
line-height: 40px;
padding-left: 20px;
}
.mainmenu li:hover {
background-color: lightgreen;
color: black;
}
.mainmenu li.active {
color: white;
background-color: rgb(40,183,121);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testboard</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<style>
</style>
</head>
<body>
<div class="leftPane">
<div class="logo">
<span class="icon-grid-view place-left"></span>Testboard
</div>
<div class="mainmenu">
<div id="accordion">
<h3><span class="icon-new place-left"></span>New Item</h3>
<div>
<ol>
<li>Project</li>
<li>Sprint</li>
<li>Cycle</li>
<li>Task</li>
<li>Issue</li>
<li>User</li>
</ol>
</div>
<h3><span class="icon-paypal place-left"></span>Test Projects</h3>
<div>
<ol>
<li>Work Folders</li>
<li>IBiza</li>
<li>MP</li>
<li>RDP</li>
<li>Mohoro</li>
<li>Microsoft Azure</li>
<li>Work Folders</li>
<li>IBiza</li>
<li>MP</li>
<li>RDP</li>
<li>Mohoro</li>
<li>Microsoft Azure</li>
<li>Work Folders</li>
<li>IBiza</li>
<li>MP</li>
<li>RDP</li>
<li>Mohoro</li>
<li>Microsoft Azure</li>
</ol>
</div>
<h3><span class="icon-cog place-left"></span>Quick Tools</h3>
<div>
<ol>
<li>User Profile</li>
<li>Team Profile</li>
<li>Access Level</li>
<li>Request</li>
<li>5</li>
<li>6</li>
</ol>
</div>
<h3><span class="icon-history place-left"></span>History</h3>
<div>
<ol>
<li data-controller="Home" data-action="Details">Details</li>
<li data-controller="Home" data-action="Result">Result</li>
<li data-controller="Home" data-action="Index">Index</li>
<li data-controller="Home" data-action="Search">Search</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</div>
</div>
</div>
<div class="rightPane">
<div class="toolbox">
<ul>
<li></li>
<li>Admin</li>
<li>Browse</li>
<li>Exit</li>
<li>@User.Identity.Name</li>
<li></li>
</ul>
<div class="search">
<input type="text" />
<input type="submit" value="Search" />
</div>
</div>
<div class="navigator">
Home > Sprint > Create
</div>
<div class="body">
@RenderBody()
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)
<script>
$(function () {
$("#accordion").accordion({
heightStyle: "fill", collapsible: true, fillSpace: true
});
});
$(".mainmenu li").click(function () {
$(".mainmenu li").removeClass("active");
$(this).addClass("active");
});
$("#accordion li").click(function () {
var controller = $(this).attr("data-controller");
var action = $(this).attr("data-action");
$(".body").empty();
$(".body").append("Loading......");
$.ajax({
type: "GET",
url: "/" + controller + "/" + action,
cache: false,
datatype: "html",
success: function (data) {
$(".body").empty();
$(".body").append(data);
},
error: function (data) {
$(".body").empty();
$(".body").append("Error");
}
});
});
//$(function () {
// $("#accordion-resizer").resizable({
// minHeight: 140,
// minWidth: 200,
// resize: function () {
// $("#accordion").accordion("refresh");
// }
// });
//});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/liguoxi134/p/4351186.html
