How do I customize my menu in 3.5?

ima9ines wrote:

On it.

P.S. Can you recommend me some good Affiliate/consultants plugin where consultants can track their sales, downlines and commission?

ima9ines wrote:

We're sorry, an internal error occurred.

Our supporting staff has been notified of this error and will address the issue shortly.

We apologize for the inconvenience.

Please try clicking your browsers 'back' button or try reloading the home page.

If you continue to receive this message, please try again in a little while.

Thank you for your patience.

ima9ines wrote:

@model TopMenuModel
@using Nop.Core.Domain
@using Nop.Core.Infrastructure
@using Nop.Web.Models.Catalog;
@{
    var isRtl = this.ShouldUseRtlTheme();
    var supportResponsive = EngineContext.Current.Resolve<StoreInformationSettings>().ResponsiveDesignSupported;
}
@helper RenderCategoryLine(CategorySimpleModel category, int level, bool responsiveMobileMenu)
{
    <li>
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
        @if (category.NumberOfProducts.HasValue)
        {
            <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
        }
        </a>
        @{
            var levelClass = "";
            if (level == 0)
            {
                levelClass = "firstLevel";
                <div class="top-menu-triangle"></div>
            }
            if (category.SubCategories.Count > 0)
            {
                if (responsiveMobileMenu)
                {
                    <span class="expand">&nbsp;</span>
                }
                <ul class="sublist @levelClass">
                    @foreach (var subCategory in  category.SubCategories)
                    {
                        @RenderCategoryLine(subCategory, level + 1, responsiveMobileMenu)
                    }
                </ul>
            }
        }
    </li>
}

<ul class="top-menu">
    @Html.Widget("header_menu_before")

    @foreach (var category in Model.Categories)
    {
        @RenderCategoryLine(category, 0, false)
    }
    @foreach (var topic in Model.Topics)
    {
        <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
    }
    @if (Model.Categories.Count == 0 && Model.Topics.Count == 0)
    {
        //no categories or topis to display? in this case let's diplay some default menu items (should we?)
        <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
        if (Model.RecentlyAddedProductsEnabled)
        {
            <li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
            </li>
        }
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        if (Model.BlogEnabled)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        if (Model.ForumEnabled)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }
    @Html.Widget("header_menu_after")
</ul>

<script type="text/javascript">
    $('li', '.top-menu').on('mouseenter', function () {
        $('a', $(this)).first().addClass('hover');
        if (!$(this).parent().hasClass('top-menu')) {
            var width = $(this).innerWidth();
            $('.sublist', $(this)).first().css('@(isRtl ? "right" : "left")', width + 15);
        }
        $('.sublist', $(this)).first().addClass('active');
        $('.top-menu-triangle', $(this)).addClass('active');
    });

    $('li', '.top-menu').on('mouseleave', function () {
        $('a', $(this)).first().removeClass('hover');
        $('.sublist', $(this)).first().removeClass('active');
        $('.top-menu-triangle', $(this)).removeClass('active');
    });

</script>

@if (supportResponsive)
{
    <div id="mob-menu-button">
        <a href="">
            <span class="icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
            @{
                var responsiveMenuTitle = Model.Categories.Count > 0 ? T("Categories") : T("Menu");
            }
            <span>@responsiveMenuTitle</span>
        </a>
    </div>
    <ul class="mob-top-menu">
        @Html.Widget("mob_header_menu_before")
        @foreach (var category in Model.Categories)
        {
            @RenderCategoryLine(category, 0, true)
        }
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
        }
        @if (Model.Categories.Count == 0 && Model.Topics.Count == 0)
        {
            //no categories  or topis to display? in this case let's diplay some default menu items (should we?)
            <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
            if (Model.RecentlyAddedProductsEnabled)
            {
                <li>
                    <a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
                </li>
            }
            <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
            <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
            if (Model.BlogEnabled)
            {
                <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
            }
            if (Model.ForumEnabled)
            {
                <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
            }
            <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
        }
        @Html.Widget("mob_header_menu_after")
    </ul>
    <script type="text/javascript">
        $('a', $('#mob-menu-button')).toggle(function() {
                $('.mob-top-menu').addClass('show');
            },
            function() {
                $('.mob-top-menu').removeClass('show');
            }
        );

        $(function($) {
            $('.mob-top-menu .expand').click(function() {
                var parent = $(this).parent();
                if (parent.hasClass('active')) {
                    $(".sublist:first", parent).hide(300);
                    parent.removeClass('active');
                } else {
                    $(".sublist:first", parent).show(300);
                    parent.addClass('active');
                }
            });
        });
    </script>
}


this is original code right now. can you help?

Hi, following is entire modified source code for this file (TopMenu.cshtml)

@model TopMenuModel
@using Nop.Core.Domain
@using Nop.Core.Infrastructure
@using Nop.Services.Configuration
@using Nop.Web.Models.Catalog
@{
    var engineContext = EngineContext.Current;
    var settingService = engineContext.Resolve<ISettingService>();
    var storeInformationSettings = engineContext.Resolve<StoreInformationSettings>();

    var supportResponsive = storeInformationSettings.ResponsiveDesignSupported;
    var isRtl = this.ShouldUseRtlTheme();

    var showDefaultMenuItems = settingService.GetSettingByKey<bool>("ShowDefaultMenuItems");
}
@helper RenderCategoryLine(CategorySimpleModel category, int level, bool responsiveMobileMenu)
{
    <li>
        <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
        @if (category.NumberOfProducts.HasValue)
        {
            <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
        }
        </a>
        @{
            var levelClass = "";
            if (level == 0)
            {
                levelClass = "firstLevel";
                <div class="top-menu-triangle"></div>
            }
            if (category.SubCategories.Count > 0)
            {
                if (responsiveMobileMenu)
                {
                    <span class="expand">&nbsp;</span>
                }
                <ul class="sublist @levelClass">
                    @foreach (var subCategory in  category.SubCategories)
                    {
                        @RenderCategoryLine(subCategory, level + 1, responsiveMobileMenu)
                    }
                </ul>
            }
        }
    </li>
}

<ul class="top-menu">
    @Html.Widget("header_menu_before")
    @if (!showDefaultMenuItems)
    {
        foreach (var category in Model.Categories)
        {
            RenderCategoryLine(category, 0, false);
        }
    }

    @if (showDefaultMenuItems || (Model.Categories.Count == 0 && Model.Topics.Count == 0))
    {
        //no categories or topis to display? in this case let's diplay some default menu items (should we?)
        <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
        if (Model.RecentlyAddedProductsEnabled)
        {
            <li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
            </li>
        }
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        if (Model.BlogEnabled)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        if (Model.ForumEnabled)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }

    @foreach (var topic in Model.Topics)
    {
        <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
    }

    @Html.Widget("header_menu_after")
</ul>

<script type="text/javascript">
    $('li', '.top-menu').on('mouseenter', function () {
        $('a', $(this)).first().addClass('hover');
        if (!$(this).parent().hasClass('top-menu')) {
            var width = $(this).innerWidth();
            $('.sublist', $(this)).first().css('@(isRtl ? "right" : "left")', width + 15);
        }
        $('.sublist', $(this)).first().addClass('active');
        $('.top-menu-triangle', $(this)).addClass('active');
    });

    $('li', '.top-menu').on('mouseleave', function () {
        $('a', $(this)).first().removeClass('hover');
        $('.sublist', $(this)).first().removeClass('active');
        $('.top-menu-triangle', $(this)).removeClass('active');
    });

</script>

@if (supportResponsive)
{
    <div id="mob-menu-button">
        <a href="">
            <span class="icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
            @{
                var responsiveMenuTitle = Model.Categories.Count > 0 ? T("Categories") : T("Menu");
                if (showDefaultMenuItems)
                {
                    responsiveMenuTitle = T("Menu");
                }
            }
            <span>@responsiveMenuTitle</span>
        </a>
    </div>
    <ul class="mob-top-menu">
        @Html.Widget("mob_header_menu_before")
        @if (!showDefaultMenuItems)
        {
            foreach (var category in Model.Categories)
            {
                @RenderCategoryLine(category, 0, true)
            }
        }

        @if (showDefaultMenuItems || (Model.Categories.Count == 0 && Model.Topics.Count == 0))
        {
            //no categories  or topis to display? in this case let's diplay some default menu items (should we?)
            <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
            if (Model.RecentlyAddedProductsEnabled)
            {
                <li>
                    <a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
                </li>
            }
            <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
            <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
            if (Model.BlogEnabled)
            {
                <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
            }
            if (Model.ForumEnabled)
            {
                <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
            }
            <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
        }
        
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
        }
        @Html.Widget("mob_header_menu_after")
    </ul>
    <script type="text/javascript">
        $('a', $('#mob-menu-button')).toggle(function() {
                $('.mob-top-menu').addClass('show');
            },
            function() {
                $('.mob-top-menu').removeClass('show');
            }
        );

        $(function($) {
            $('.mob-top-menu .expand').click(function() {
                var parent = $(this).parent();
                if (parent.hasClass('active')) {
                    $(".sublist:first", parent).hide(300);
                    parent.removeClass('active');
                } else {
                    $(".sublist:first", parent).show(300);
                    parent.addClass('active');
                }
            });
        });
    </script>
}

Hope this help :)

ima9ines wrote:

I have t thank you on this, its working. But mobile version looks very ugly  cause all is doubled, and all categories are listed and subcategories. Never mind, I will go back on original, and thats it. Anyway thank you on your time and your help.

Hi, lets see it in my demo site :).
http://nop350.jolischefs.com
And here is the result:

ima9ines wrote:

Bro thats ok, but I lost categories on phone when I added that topmenu. It would be good if we can add Categories in top menu and then all will be good on mobile phone. you can see here on video

https://www.youtube.com/watch?v=y3PEsIsYRX8&feature=youtu.be

ima9ines wrote:

You see, if we PIN Categories here in top menu like on picture below I will fix all my nightmares. When we pin Categories in top menu they will show up on mobile version too. All this new products, search, blog I will untick and replace thats not a problem.



something like this to add in top menu (this is also nopcommerce)
or whatever only to show up on mobile version. :(

Guys can anyone help me to setup 2 pages in Top Menu? I have to add Homepage and Contact Us pages in Top Menu but that have to be on mobile version also included. Like this on picture below.

ima9ines wrote:

Hi Tuấn Đỗ.

Can you pls send me how to resize top menu buttons/space between buttons? see picture bellow.