mmenu插件未在ASP.NET MVC主页\索引页中使用

如何解决mmenu插件未在ASP.NET MVC主页\索引页中使用

我想在首页\索引页上的asp.net mvc上使用mmenu插件。为此，我将该插件包含在以adminLTE v.3（bootstrap v4）为主题的项目中。但是，当插件正常工作时，它将接管主体，并且菜单就在主体内部开始工作。但是它应该工作的地方是home \ index。我应该对此进行哪种设置？我需要使用此插件的人的帮助。

*** 更新后的画图恰好绘制了我想要的

我的原始AdminLTE模板；

mmenu位置不正确；

原始mmenu

mmenu在asp.net mvc主体内创建的样式

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;
}

mmenu插件未在ASP.NET MVC主页\索引页中使用

如何解决mmenu插件未在ASP.NET MVC主页\索引页中使用

相关推荐