bootstrap nopCommerce 3.70 中的 Maga 菜单

Question

我正在 nopCommerce 3.70 网站上工作，我正在制作自定义 MagaMenu 下拉菜单，

我做这件事的方法是创建一个 TopMenu.cshtml 文件，然后将它放在我的主题文件夹下，因此它覆盖了默认设置，我制作了一些自定义助手和 css 基于bootstrap 的 Maga 菜单，对于移动设备，我仍在使用 DefaultClean 的标准，但我的整个想法只在主页上有效，所有其他页面都弄乱了菜单，我不知道为什么它不起作用在其他页面上，这是我的代码。

        $(document).ready(function () {
            $(".dropdown").hover(
                function () {
                    $('.dropdown-menu', this).stop().fadeIn("fast");
                },
                function () {
                    $('.dropdown-menu', this).stop().fadeOut("fast");
                });
          
            $('.menu-toggle').click(function () {
                $(this).siblings('.top-menu.mobile').slideToggle('slow');
            });
            $('.top-menu.mobile .sublist-toggle').click(function () {
                $(this).siblings('.sublist').slideToggle('slow');
            });
        });

         .navbar-default {
             color: #fff;
             background-color: #4ab2f1;
             border-color: #4ab2f1;
         }

        .navbar-default .navbar-nav > li > a { color: #fff; }

        .navbar-default .navbar-nav > .dropdown > a .caret {
            border-top-color: #fff;
            border-bottom-color: #fff;
        }

        .navbar-default .navbar-brand { color: #fff; }

        .menu-large { position: static !important; }

        .megamenu {
            padding: 20px 0px;
            width: 100%;
        }

        .megamenu > li > ul {
            padding: 0;
            margin: 0;
        }

        .megamenu > li > ul > li { list-style: none; }

        .megamenu > li > ul > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.428571429;
            color: #333333;
            white-space: normal;
        }

        .megamenu > li ul > li > a:hover,
        .megamenu > li ul > li > a:focus {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
        }

        .megamenu.disabled > a,
        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus { color: #999999; }

        .megamenu.disabled > a:hover,
        .megamenu.disabled > a:focus {
            text-decoration: none;
            background-color: transparent;
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
            cursor: not-allowed;
        }

        .megamenu.dropdown-header {
            color: #4ab2f1;
            font-size: 18px;
        }

        @media (max-width: 768px) {
            .megamenu {
                margin-left: 0;
                margin-right: 0;
            }

            .megamenu > li { margin-bottom: 30px; }

            .megamenu > li:last-child { margin-bottom: 0; }

            .megamenu.dropdown-header { padding: 3px 15px !important; }

            .navbar-nav .open .dropdown-menu .dropdown-header { color: #fff; }
        }

@model TopMenuModel
@using Nop.Web.Models.Catalog;

@helper RenderMegaMenuCategoryLine(CategorySimpleModel category, int level)
{
    <li class="dropdown menu-large">
        <a class="dropdown-toggle" data-toggle="dropdown" href="@Url.RouteUrl("Category", new {SeName = category.SeName})">

            @category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
            }
        </a>

        @{
            //subcategories
            var subCategories = category.SubCategories.Where(x => x.IncludeInTopMenu).OrderBy(m => m.Name).ToList();

            if (subCategories.Count > 0)
            {
                var itemsPerColumn = subCategories.Count();

                while (itemsPerColumn % 4 != 0)
                {
                    itemsPerColumn = itemsPerColumn + 1;
                }

                itemsPerColumn = itemsPerColumn / 4;

                var subCategoryColumn = new List<CategorySimpleModel>();
                var lastItem = subCategories.Last();

                
                <ul class="dropdown-menu megamenu row">
                    @foreach (var subCategory in subCategories)
                    {
                        subCategoryColumn.Add(subCategory);

                        if (subCategoryColumn.Count() == itemsPerColumn || subCategory.Equals(lastItem))
                        {
                            @RenderMegaMenuSubCategories(subCategoryColumn)

                            subCategoryColumn = new List<CategorySimpleModel>();
                        }
                    }
                </ul>
            }
        }
    </li>
}

@helper RenderMegaMenuSubCategories(List<CategorySimpleModel> categories)
{
    <li class="col-sm-3">
        <ul>
            @foreach (var category in categories)
            {
                <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>
                </li>
            }
        </ul>
    </li>
}

@helper RenderResponsiveCategoryLine(CategorySimpleModel category, int level)
{
    <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>
        @{
            //subcategories
            var subCategories = category.SubCategories;

            var levelClass = "";
            if (level == 0)
            {
                levelClass = "first-level";
            }
            if (subCategories.Count > 0)
            {
                <div class="sublist-toggle"></div>
                    <ul class="sublist @levelClass">
                        @foreach (var subCategory in subCategories)
                        {
                            @RenderResponsiveCategoryLine(subCategory, level + 1)
                        }
                    </ul>
            }
        }
    </li>
}


@{

    <div class="navbar navbar-default navbar-static-top hidden-sm hidden-xs">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @Html.Widget("header_menu_before")
                    @{
                        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
                    }
                    @foreach (var category in rootCategories)
                    {
                        @RenderMegaMenuCategoryLine(category, 0)
                    }
                    @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>
            </div>
        </div>
    </div>


}

@{
    //mobile menu responsive

    var rootCategoriesResponsive = Model.Categories.ToList();
    //name it "Categories" if we have only categories. Otherwise, "Menu"
    var responsiveMenuTitle = (rootCategoriesResponsive.Count > 0 && Model.Topics.Count == 0) ? T("Categories") : T("Menu");
    <div class="hidden-lg hidden-md  menu-toggle">@responsiveMenuTitle</div>
    <ul class="hidden-lg hidden-md  top-menu mobile">
        @Html.Widget("mob_header_menu_before")
        @foreach (var category in rootCategoriesResponsive)
        {
            @RenderResponsiveCategoryLine(category, 0)
        }
        @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>

}

代码都在TopMenu.cshtml页面内，js被脚本标签包围，css被脚本标签包围，当然我在@media中做了转义字符css.

有人对此有意见吗？

Answer 1

你的菜单问题是你没有包括Bootstrap。

没有任何版本的 nopCommerce 默认使用 Bootstrap，这就是为什么每当发布新版本时，开发人员都会发布支持 bootstrap 的主题，如发现这里：

Default Clean Theme Bootstrap version (Free)

您可以选择上面的主题并将您的菜单合并到那里，或者您自己将其包含在您的主题中。如果您选择后一种方法，请将 bootstrap 解压缩到主题的内容文件夹中。

然后，从主题的共享文件夹中的 _Root.Head.cshtml 文件中，添加对 bootstrap 文件的引用，如下所示：

Html.AddScriptParts(ResourceLocation.Head, "~/Themes/THEMENAME/Content/BOOTSTRAPFOLDER/dist/js/bootstrap.min.js");
Html.AddCssFileParts(ResourceLocation.Head, "~/Themes/THEMENAME/Content/BOOTSTRAPFOLDER/dist/css/bootstrap.min.css");

我目前正在自己制作 3.70 Bootstrap 主题 -- 这是我用来合并的方法 bootstrap。

Answer 2

自版本 3.80 nopCommerce 使用 Bootstrap 作为管理区域...

所以只需添加

Html.AppendScriptParts("~/Administration/Scripts/bootstrap/bootstrap.min.js");

到TopMenu.cshtml

并看看 this responsive mega menu。

bootstrap nopCommerce 3.70 中的 Maga 菜单

bootstrap Maga Menu in nopCommerce 3.70

c#

css

asp.net-mvc

twitter-bootstrap-3

nopcommerce