Bootstrap v3.3.7-简单的侧边栏 - mmenu

Question

我正在使用DNN/evoq皮肤工作，并且我正在使用简单的侧边栏（https：//blackrockdigital.github.io/startbootstrap-sidebar/）示例。

我的工作正常，MMENU可以按照应有的效果。

但是，当我单击"切换"按钮以打开/关闭侧边栏 - 包装器时，mmenu被锁定成140px的宽度，并且不会让侧面面板完全关闭。

也许我不能这样实施，但是任何帮助都将不胜感激。

谢谢..

Answer 1

这是工作代码，一旦我下载了最新版本的mmenu。

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
<%@ Register TagPrefix="dnn" TagName="JQUERY" Src="~/Admin/Skins/jQuery.ascx" %>
<%@ Register TagPrefix="dnn" TagName="META" Src="~/Admin/Skins/Meta.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MENU" Src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<dnn:META ID="mobileScale" runat="server" Name="viewport" Content="width=device-width, initial-scale=1.0" />
<dnn:DnnCssInclude ID="DnnCssBootstrap" runat="server" FilePath="Scripts/css/bootstrap.min.css" PathNameAlias="SkinPath" />
<dnn:DnnCssInclude ID="DnnCssmmenu" runat="server" FilePath="Scripts/css/jquery.mmenu.all.css" PathNameAlias="SkinPath" />
<dnn:DnnCssInclude ID="DnnCssSimplesidebar" runat="server" FilePath="Scripts/css/simple-sidebar.css" PathNameAlias="SkinPath" />
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <nav id="menu">
            <dnn:MENU ID="mmenuNav" MenuStyle="mmenu" runat="server"></dnn:MENU>
        </nav>
    </div>
    <!-- /#sidebar-wrapper -->
    <div id="page-content-wrapper" style="background-color:#F5FAFA;">
        <div class="container" style="background-color:#F5FAFA;">
            <div id="ContentArea" class="col-xs-12 col-sm-12 col-md-12">
                <a href="#menu-toggle" class="btn btn-default" id="menu-toggle" style="margin:15px;">Navigation Menu</a>
                <div id="ContentPane" runat="server"></div>
            </div>
        </div>
    </div><!--/.container-->
</div>
<script type="text/javascript">
    $(document).ready(function () {
      $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      }); <!-- Toggle for Left Side Menu -->
      $("#menu").mmenu({
        "offCanvas": false,
         "iconPanels": true,
         //"slidingSubmenus": false,
         "navbar": {
           "title": "Menu Title"
         },
         navbars    : [{
           height   : 4,
           content : [ 
             '<div style="text-align:center;"><img src="/Portals/0/Images/ProfilePicture.png" height="160" width="128" /></div>'
           ]
         }, true],
         "extensions": [
             "effect-panels-zoom",
             "multiline"
         ]
      });
    });
</script>
<dnn:DnnJsInclude ID="DnnJsmmenu" runat="server" FilePath="Scripts/js/jquery.mmenu.all.min.js" PathNameAlias="SkinPath" ForceProvider="DnnFormBottomProvider" />
<dnn:DnnJsInclude ID="DnnJsBootstrap" runat="server" FilePath="Scripts/js/bootstrap.min.js" PathNameAlias="SkinPath" ForceProvider="DnnFormBottomProvider" />