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

im9ewurl  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(1)|浏览(149)

我正在开发一个DNN/Evoq皮肤,并尝试使用简单侧边栏(https://blackrockdigital.github.io/startbootstrap-simple-sidebar/)示例实现mmenu(http://mmenu.frebsite.nl)。
我有这个工作正常和mmenu的工作,因为它应该。
但是当我点击切换按钮打开/关闭侧边栏 Package 器时,mmenu被锁定为140 px的宽度,并且不会让侧面板完全关闭。
也许我不能像这样实现这两个,但任何援助将不胜感激。
谢谢

uhry853o

uhry853o1#

这是在我下载了最新版本的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" />

相关问题