부트 스트랩 v3.3.7 - 간단한 사이드 바 - MMenu

Question

DNN/Evoq 스킨에서 일하고 있는데 간단한 사이드 바 (https://blackrockdigital.github.io/startbootstrap-simple-sidebar/) 예와 함께 mmenu (http://mmenu.frebsite.nl)를 구현하려고합니다.

제대로 작동하고 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" />