问题描述
我想在首页\索引页上的asp.net mvc上使用mmenu插件。为此,我将该插件包含在以adminLTE v.3(bootstrap v4)为主题的项目中。但是,当插件正常工作时,它将接管主体,并且菜单就在主体内部开始工作。但是它应该工作的地方是home \ index。我应该对此进行哪种设置?我需要使用此插件的人的帮助。
*** 更新后的画图恰好绘制了我想要的
我的原始AdminLTE模板;
mmenu位置不正确;
Home \ Index.cshtml
@{
ViewBag.Title = "Index";
}
<link type="text/css" rel="stylesheet" href="~/mmenu/demo/css/demo.css" />
<link type="text/css" rel="stylesheet" href="~/mmenu/dist/mmenu.css" />
<div id="page">
<div class="header">
<a href="#menu"><span></span></a>
Demo
</div>
<div class="content">
<p>
<strong>This is a demo.</strong><br />
Click the menu icon to open the menu.
</p>
</div>
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li>
<span>About us</span>
<ul>
<li><a href="#about/history">History</a></li>
<li>
<span>The team</span>
<ul>
<li>
<a href="#about/team/management">Management</a>
</li>
<li>
<a href="#about/team/sales">Sales</a>
</li>
<li>
<a href="#about/team/development">Development</a>
</li>
</ul>
</li>
<li><a href="#about/address">Our address</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li class="Divider">Other demos</li>
<li><a href="advanced.html">Advanced demo</a></li>
<li><a href="onepage.html">One page demo</a></li>
</ul>
</nav>
</div>
@section Scripts
{<script type="text/javascript">
$(document).ready(function () {
const menu = new Mmenu(
document.querySelector('#menu')
);
});
</script>
}
<script src="~/mmenu/dist/mmenu.polyfills.js"></script>
<script src="~/mmenu/dist/mmenu.js"></script>
_Layout.cshtml
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta http-equiv="x-ua-compatible" content="ie=edge">
<title>@ViewBag.Title - Merinos Tablet</title>
<!-- Font Awesome Icons -->
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
@Html.Partial("_Header")
@Html.Partial("_Sidebar")
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">@ViewBag.Title</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
@Html.ActionLink(@ViewContext.RouteData.Values["controller"].ToString(),@ViewContext.RouteData.Values["action"].ToString(),@ViewContext.RouteData.Values["controller"])
</li>
@*@if (@ViewContext.RouteData.Values["controller"].ToString() != "Dashboard" ||
@ViewContext.RouteData.Values["action"].ToString() != "Dashboard")
{
}*@
<li class="breadcrumb-item active">@ViewBag.Title</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
@RenderBody()
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
@Html.Partial("_Footer")
@Html.Partial("_Aside")
</div>
<!-- required SCRIPTS -->
<!-- jQuery -->
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/adminlte/js")
@RenderSection("scripts",required: false)
</body>
</html>
mmenu.demo.css
.header,.content,.footer {
text-align: center;
}
.header,.footer {
background: #4bb5ef;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 44px;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
width: 100%;
height: 44px;
padding: 0 50px;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
}
.footer.fixed {
position: fixed;
bottom: 0;
left: 0;
}
.header a {
display: block;
width: 28px;
height: 18px;
padding: 11px;
margin: 2px;
position: absolute;
top: 0;
left: 0;
}
.header a:before,.header a:after {
content: '';
display: block;
background: #fff;
height: 2px;
}
.header a span {
background: #fff;
display: block;
height: 2px;
margin: 6px 0;
}
.content {
padding: 150px 50px 50px 50px;
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)