Submenu flashes on the screen.

3 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2016

    Posted 03 Nov Link to this post

    I have a menu with a submenu using MVC.  When the page is displayed, an unformatted image of the menu and submenu is displayed on the screen for a brief second before the menu is formatted and the submenu hidden.  Any way to stop this?

     

    <div>
            <ul id="menu">
                <li>@Html.ActionLink("Work Orders", "Index", "Orders")</li>
                <li>@Html.ActionLink("User Management", "Index", "Users")</li>
                <li>Reports
                <ul>
                    <li>@Html.ActionLink("Ad Hoc Report", "Index", "Reports")</li>
                    <li><a target="_blank" href="http://ws01/ReportingService/Reports.html">All Reports</a></li>
                    <li><a target="_blank" href="http://ws01/ReportingService/MonthlyShippedOrders.html">Monthly Shipped Orders</a></li>
                    <li><a target="_blank" href="http://ws01/ReportingService/ActiveOrders.html">Active Orders</a></li>
                    <li><a target="_blank" href="http://ws01/ReportingService/LTL.html">LTL Orders</a></li>
                    <li><a target="_blank" href="http://ws01/ReportingService/VendorBilling.html">Vendor Billing Spreadsheet</a></li>
                    <li><a target="_blank" href="http://ws01/ReportingService/Telephony.html">Telephony Active Orders</a></li>
                </ul>
                </li>
                <li>@Html.ActionLink("Admin", "Index", "Admin")</li>
            </ul>
        </div>

     

    Thanks,

    Chris

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    50 posts

    Posted 04 Nov Link to this post

    Hello Christopher,

    This behavior is know as a Flash of Unstyled Content, or FOUC, and is theoretically possible, if the page is too heavy or if there is something that slows down the browser before the Menu is initialized.

    This may include large script files registered in the <body> (instead of the <head>) or too many widgets being initialized before the Menu. If this is the case, some simple optimizations and refactoring of the front-end code should resolve the problem.

    Otherwise, the solution is to hide the raw HTML and show it back in a way similar to this:

    <script>
       $(document).ready(function () {
          $("#menu").kendoMenu();
          $("#menu").fadeIn();
       });
    </script>
    <style>
       #menu {
          display: none;
       }
    </style>

    I hope this helps-

    Regards,
    Eduardo Serra
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2016

    Posted 04 Nov in reply to Eduardo Serra Link to this post

    Eduardo:

    That was perfect!  Thanks so much for your help!

    -Chris

Back to Top