Bootstrap v3.3.7 - 简单侧边栏 - 菜单

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