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 <a> tag. Give the <a> 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
- Idea here being we'll hide all child items under the class loading.
Step 3: Modify the script
- 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