javascript - 如何使用 Mvc 和数据库设计嵌套的 css

Question

我正在数据库中使用一个表，该表具有以下列: menuId(主键) ,MenuName, displayMenuorder ,ParentMenuId(外键) 引用 menuid(主键)。

我在数据库中有一些数据，我想呈现一个像这样的菜单:。 https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel

我尝试了很多东西，但仍然无法弄清楚，这就是我到目前为止所做的。请帮忙。提前致谢。

SQL 数据库

Menuid  Menuname displayMenuorder parentmenuid
1   Root                1       NULL
2   HOME                1       1
3   ELECTRONICS         2       1
4   APPLIANCES          3       1
5   BABY & KIDS         4       1
6   HOME & FURNITURE    5       1
7   Samsung             1       3
8   Apple               1       3   
9   Kitchen Appliances  1       4
10  Microwave           1       9

Controller

public ActionResult MainMenu()
        {
            var mainmenu = db.Menus.SingleOrDefault(x => x.ParentMenuId == null);            
            return View(mainmenu);
        }

        [ChildActionOnly]
        public ActionResult MainMenuid(int id)
        {
            var items = db.Menus.Find(id);
            return PartialView(items);
        }

查看主菜单

@model Arrivaler.Models.Menu

@{
    Layout = null;
}

<div class="container">
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">My Store</a>
        </div>
        <ul class="nav navbar-nav">
            @foreach (var menuItem in Model.ChildItems.OrderBy(x => x.DisplayMenuOrder))
            {
                @Html.Action("MainMenuid", new { id = menuItem.MenuId })
            }
        </ul>
        </nav>
</div>

查看 MainMenuId

@model Arrivaler.Models.Menu

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/test.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/navMenu.js"></script>

<li class="dropdown mega-dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">@Model.MenuName<span class="caret"></span></a>
    <ul class="dropdown-menu mega-dropdown-menu">
        <li class="col-sm-3">
            <ul>
                <li class="dropdown-header">@Model.MenuName</li>
                <li>
                    <a href="@Model.MenuId">
                        @if (Model.ChildItems.Any())
                        {
                            foreach (var menuItem in Model.ChildItems.OrderBy(x => x.DisplayMenuOrder))
                            {
                                @Html.Action("MainMenuid", new { id = menuItem.MenuId })
                            }
                        }
                    </a>
                </li>
            </ul>       
        </li>
    </ul>
</li>

CSS

.mega-dropdown {
  position: static !important;  
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;    
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  font-size:large;
  padding: 0px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 60px 5px 5px;
  line-height: 30px;
}

.carousel-control {
  width: 30px;
  height: 30px;
  top: -35px;

}
.left.carousel-control {
  right: 30px;
  left: inherit;
}
.carousel-control .glyphicon-chevron-left, 
.carousel-control .glyphicon-chevron-right {
  font-size: 12px;
  background-color: #fff;
  line-height: 30px;
  text-shadow: none;
  color: #333;
  border: 1px solid #ddd;
}

JavaScript

$(document).ready(function () {
    $(".dropdown").hover(
        function () {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("100");
            $(this).toggleClass('open');
        },
        function () {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("100");
            $(this).toggleClass('open');
        }
    );
});

我的输出是这样的。

output image

Answer 1

你可以看看这个。

CSS

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.menu-li
{
    /*background:#ddd;*/
}

#primary_nav_wrap ul li:hover
{
    background:#f6f6f6;
    z-index : 10;
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block;    
} 

主菜单操作 View

<nav id="primary_nav_wrap">
<ul>
    /*your loop*/
</ul>
</nav>

主菜单操作 View

<li>
<a></a>
<ul>
</ul>
</li>