Bootstrap v3.3.7 - Простая боковая панель - MMenu

Question

Я работаю над кожей DNN/Evoq, и я пытаюсь реализовать mmenu (http://mmenu.frebsite.nl) с примером простой боковой панели (https://blackrockdigital.github.io/startbootstrap-simple-sidebar/).

У меня это работает правильно, и mmenu работает так, как должно.

Но когда я нажимаю кнопку переключения, чтобы открыть/закрыть боковую панель, mmenu заблокирован в ширину 140 пикселей и не позволит боковой панели полностью закрыться.

Может быть, я не могу реализовать оба подобного, но любая помощь будет очень признательна.

Спасибо ..

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" />