With all the introduction of the DDRMenu to DotNetNuke, we've experienced much more manage above what is rendered from the menu. This has authorized for a a lot more semantic menu and custom made styling for easy menus to mega menus. There are numerous methods to create the template that the DDR makes use of but we'll be using the token primarily based templating because it is quite easy.


Menu Template (Bootstrap Nav)

I copied the easy folder from your Gravity pores and skin that will come with DNN 7, which incorporates a manifest file “menudef.xml” and the “SimpleToken.txt” file. I updated the SimpleToken.txt file as follows:
Notice: this isn’t a tutorial on DDRMenu, just how to apply Bootstrap.

<ul class="nav nav-pills">
    [*>NODE]
    </ul>
    [>NODE]
        <li class="[?NODE]dropdown [/?][?SELECTED]active[/?]">
        [?ENABLED]
            <a href="[=URL]">[=TEXT] [?NODE]<b class="caret"></b>[/?]</a>
        [?ELSE]
            <a href="#">[=TEXT] [?NODE]<b class="caret"></b>[/?]</a>
        [/?]
        [?NODE]
            <ul class="dropdown-menu">
            [*>NODE]
            </ul>
        [/?]
        </li>
    [/>]

  1. Add the classes nav and nav-pills to the outer ul. Individually, I favor the simplicity in the Simple tablets nav that bootstrap gives. This appears to be the easiest to override with my own custom design and style as I have a tendency to use more flat UI’s in my style.
  2. Include the category “dropdown” for the list merchandise if it's youngsters using the [?NODE] examination.
  3. Add the category “active” for the listing product whether it is selected utilizing the [?SELECTED] examination.
  4. Add a caret to the merchandise if it's a baby item.

Up coming, we are able to include the HTML and pores and skin object within the pores and skin as follows:


Logo and Menu pores and skin objects (Bootstrap Navbar)

<div class="navbar">
        <div class="navbar-inner">
            <span class="brand">
                <dnn:LOGO runat="server" id="dnnLOGO" />
            </span><!--/Logo-->
            <dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
        </div><!-- END navbar-inner -->
    </div><!-- END navbar -->


  1. add link with class “btn” and btn-navbar”. Also, requires markup for collapse. You are able to use either JavaScript or information attributes.
  2. Wrap dnn:MENU pores and skin item using a div using the adhering to class
    “nav-collapse” and “collapse” - this permits the menu to break down at smaller display screen sizes
    “pull-right” to drift the menu to the correct side, if you so desire.

 

Note: making use of this process will disable a menu merchandise which has children. In order that this is a click to open up motion. This can be to make things function much better for contact units.