.NET CMS DNN

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.