Mobile Menu Plug-in

So the mobile menu plug-in is based on the DNN menu skinobject. All the styles and JavaScript works with the menu skinobject. The plug-in is based on an existing jQuery Plug-In and optimized for DNN.

Before you start you have to register 2 skinobjects, menu and search, as the example below.

<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="/portals/16/~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MENU" Src="/portals/16/~/Admin/Skins/Menu.ascx" %>

1. Create and configure the main menu skinobject

• Create a file with the name: mainMenu.txt;
• Add following code in the mainMenu.txt file:

 

<ul class="nav">
 [*>NODE-TOP]
</ul>
[>NODE-TOP]
 <li class="[?FIRST] first[/?][?LAST] last[/?][?SELECTED] active[/?][?NODE] dropdown[/?]">
 [?ENABLED]
 <a class="transFx" href="[=URL]">[=TEXT] [?NODE]<span></span>[/?]</a>
 [?ELSE]
 <a class="transFx" href="#">[=TEXT] [?NODE]<span></span>[/?]</a>
 [/?]
 [?NODE]
 <ul class="subLevel1 dropdown-menu">
 [*>NODE]
 </ul>
 [/?]
 </li>
[/>]
[>NODE]
 <li class="[?FIRST] first[/?][?LAST] last[/?][?SELECTED] active[/?][?NODE] dropdown[/?]">
 [?ENABLED]
 <a href="[=URL]">[=TEXT] [?NODE]<span></span>[/?]</a>
 [?ELSE]
 <a href="#">[=TEXT] [?NODE]<span></span>[/?]</a>
 [/?]
 [?NODE]
 <ul class="subLevel2 dropdown-menu">
 [*>NODE]
 </ul>
 [/?]
 </li>
[/>]

 

2. Create and configure the menudef.xml

• Create a file called: menudef.xml;
• Add following code in the menudef.xml:

 

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
    <template>mainMenu.txt</template>
</manifest>

 

3. Add skinobject's

• Add following DNN code to your skin:

 

<div id="mobileMenuMaster" class="sb-slidebar sb-right sb-style-push">
    <div id="searchBarMob" class="hidden-md hidden-lg"> 
        <dnn:SEARCH runat="server" id="dnnSEARCH_mob" CssClass="ServerSkinWidget" ShowSite="false" ShowWeb="false" Submit="<img src=&quot;images/iconSearch.svg&quot; alt=&quot;Zoek&quot; title=&quot;Zoek&quot; /&gt;"/>
    </div>
    <div id="navMasterMob" class="hidden-md hidden-lg">
        <dnn:MENU id="dnnMENU_mob" MenuStyle="mainMenu" runat="server"></dnn:MENU>
    </div>
</div>

 

Now you've created the lay-out for your menu skinobject. To let the menu work you should add class="sb-site" to the upper div of your webpage, as shown in the JSFiddle.

• Add the JavaScript & CSS to your Skin;
• Add images add the empty places and your Mobile Menu is free to go.