Defouting the new 6.1 Sitefinity Nav Menu

The new nav system in Sitefinity is great.  Just outputs exactly what we want…simple list of UL\LI elements!

Because of that it also means you can plug in literally any javascript menu system you want.  You’re certainly not *TIED* to kendo, however it is convenient :)

You might have noticed though when you implemented the new menu your page loads, you see the menu items instyled, then *POP* they’re styled.  This is called “Fout”, or “Flash of Unstyled Text”.  This gets more pronounced if you move the script to initalize the kendo menu out of the template and onto the bottom of your page (and you should do this).

The way to fix it is pretty simple…essentially the markup structure of the menu doesn’t REALLY change once it’s kendo-ized.  So knowing this you can just add in the styles to the core markup.  Kendo is just adding some classes via jQuery when it initializes so if they’re already there…it doesn’t duplicate.  End result is that the menu renders as UL\LI elements with the kendo classes on load, looks normal, THEN once the page is done kendo gets initialized and the user is none the wiser.

Here’s my implementation for the “Horizontal with dropdown menus” template, same prinicples apply to the other styles.

Step 1: Add the classes

• Find the UL with the classes “sfNavHorizontalDropDown sfNavList” and append “k-widget k-reset k-header k-menu k-menu-horizontal loading”
• Inside that UL look for the Template and SelectedTemplate nodes.
• Give the LI elements these classes  class=“k-item k-state-default” (they should have no classes by default)
• Now inside THOSE LI elements, look for the tag.  Give the tag the class of “k-link” (the selectedtemplate will already have sfSel so make it sfSel k-link)
• Below that <a> you’ll find a UL…this is the submenu dropdowns, so give it a class of “child” because we’re gonna need to hide these initally.

Step 2: Hide the children

Add this CSS to your stylesheet

 .sfNavWrap.loading .child{ display:none; }

Idea here being we’ll hide all child items under the class loading.

Step 3: Modify the script

var menu = $('.sfNavHorizontalDropDown').kendoMenu({ //set whatever config options you want }).removeClass("loading").data('kendoMenu');

So what’s happening here is that we’re creating the menu, once it’s done it then removes the loading class, then returns the jquery kendo menu object.  Be careful not to reverse the last 2 chained methods.  Removing the loading lets the default kendo scripts and styles handle hiding the child menus.

…and that should be it, no more FOUT on the menu!  Should this be in the template by default?  I GUESS…but if the user doesn’t want kendo then they likely don’t want the classes either.  I’d say though most people will just use kendo, so this should be in by default and non-kendo-ers can remove the classes as needed.  Up to telerik though…

As a reference, this is the markup on my menu