Bootstrap-子菜单下拉布局

时间：2019-07-12 12:45:23

标签： javascript php html css bootstrap-4

我刚开始使用Bootstrap，而JS并不是我最强的语言，所以我正在努力实现自己想要的东西。

我有一个用php生成的网站菜单，如下所示：

<?php
$products_menu = '';
$sql1 = "SELECT * FROM headings";
$stmt1 = DB::run($sql1);
while($row = $stmt1->fetch(PDO::FETCH_ASSOC)){
    $heading_id = $row['id'];
    $heading = $row['heading'];

    $products_menu .= '<li class="dropdown-item d-block">';
    $products_menu .= '<a class="submenu-item" href="store#'.$heading_id.'">'.$heading.'</a>';
    $products_menu .= '<ul class="dropdown-submenu">';

    $params = [$heading_id];
    $sql = "SELECT categories.category,categories.url FROM categories INNER JOIN category_headings on categories.id=category_headings.category WHERE category_headings.heading=?";
    $stmt = DB::run($sql,$params);
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $category = $row['category'];
        $url = $row['url'];

        $products_menu .= '<li class="d-block"><a href="category/'.$url.'">'.$category.'</a></li>';
    }
    $products_menu .= '</ul>';
    $products_menu .= '</li>';
}
?>

<nav class="navbar navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon">
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
            <li class="nav-item text-center dropdown">
                <a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
                <ul class="dropdown-menu">
                    <?php echo $products_menu; ?>
                </ul>
            </li>
            <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
            <li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
            <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
        </ul>
    </div>
</nav>

enter image description here

我希望第一个下拉菜单位于父标题的外部。

然后，第一个下拉菜单中的每个商品也应可单击，以将您带到商店页面上的标题。

将鼠标悬停在第一个下拉菜单项上，应将其子菜单显示在侧面。

对于我如何实现这一目标的任何帮助或建议，将不胜感激。

// -----编辑----- //

我不想将所生成的整个HTML都发布为巨大，因此我从每个示例中删去了前几个标题和前几个类别的示例

<div class="page-header header-bottom">
    <div class="container">
        <div class="row">

            <div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
                <a href="/"><img src="media/logo.png" alt="Logo" class="logo"></a>
            </div>

            <div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
                <form class="form-inline search">
                    <div class="input-group">
                        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
                            <div class="input-group-append">
                            <button class="btn btn-default bg-orange" type="submit">
                            <img src="media/icons/search.png" alt="search icon" class="icon">
                            </button>
                        </div>
                    </div>
                </form>         
            </div>

            <div class="col-lg-4 col-md-2 col-sm-2 col-xs-2">

                <nav class="navbar navbar-expand-lg">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <img src="media/icons/menu.png" alt="Menu" class="icon">
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
                            <li class="nav-item text-center dropdown">
                                <a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-item d-block">
                                        <a class="submenu-item" href="store#1">Lifters &amp; Accessories</a>
                                        <ul class="dropdown-submenu">
                                            <li class="d-block"><a href="category/Hooks-Weld-On-Hooks">Hooks - Weld On Hooks</a></li>
                                            <li class="d-block"><a href="category/Manhole-Cover-Lifters">Manhole Cover Lifters</a></li>
                                            <li class="d-block"><a href="category/Salt-Spreaders">Salt Spreaders</a></li>
                                            <li class="d-block"><a href="category/ID-Tags">ID Tags</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-item d-block">
                                        <a class="submenu-item" href="store#2">Lifting &amp; Measurement Attachments</a>
                                        <ul class="dropdown-submenu">
                                            <li class="d-block"><a href="category/Big-Bag-Lifters">Big Bag Lifters</a></li>
                                            <li class="d-block"><a href="category/Crane-Slung-Safety-Cages">Crane Slung Safety Cages</a></li>
                                            <li class="d-block"><a href="category/Gas-Bottle-Handlers">Gas Bottle Handlers</a></li>
                                            <li class="d-block"><a href="category/Weighers-Crane-Weighers">Weighers - Crane Weighers</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-item d-block">
                                        <a class="submenu-item" href="store#3">Forklift &amp; Crane Attachments</a>
                                        <ul class="dropdown-submenu">
                                            <li class="d-block"><a href="category/Forklift-Magnetic-Sweepers">Forklift Magnetic Sweepers</a></li>
                                            <li class="d-block"><a href="category/Wheelie-Bin-Tippers">Wheelie Bin Tippers</a></li>
                                            <li class="d-block"><a href="category/Forklift-Safety-Cages">Forklift Safety Cages</a></li>
                                            <li class="d-block"><a href="category/Fork-Extensions">Fork Extensions</a></li>
                                            <li class="d-block"><a href="category/Forklift-Base-Emptying-Stillages">Forklift Base Emptying Stillages</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-item d-block">
                                        <a class="submenu-item" href="store#4">Forklift Hooks &amp; Jibs</a>
                                        <ul class="dropdown-submenu">
                                            <li class="d-block"><a href="category/Forklift-Mounted-Hook-Fixed">Forklift Mounted Hook - Fixed</a></li>
                                            <li class="d-block"><a href="category/Forklift-Mounted-Hook-Adjustable">Forklift Mounted Hook - Adjustable</a></li>
                                            <li class="d-block"><a href="category/Crane-Spreader-Beams">Crane Spreader Beams</a></li>
                                            <li class="d-block"><a href="category/Forklift-Jibs">Forklift Jibs</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
                            <li class="nav-item text-center"><a class="nav-link nav" href="page/About">About Us</a></li>
                            <li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact Us</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

2 个答案:

答案 0 :(得分：5)

我将其与Bootstrap 4和一些自定义CSS结合在一起：

.navbar-nav a {
  color: #fff !important;
}
.navbar-nav a:hover {
  color: #ddd !important;
}
.navbar-nav .submenu.level-2 {
  padding-left: 1.5rem;
}
.navbar-nav .dropdown-toggle::after {
  display: none;
}

@media (min-width: 768px) {
  .navbar-nav .dropdown .submenu {
    position: absolute;
    top: 100%;
    display: none;
  }
  .navbar-nav .dropdown .submenu li {
    display: block;
  }
  .navbar-nav .dropdown .submenu li a {
    display: block;
    white-space: nowrap;
    text-decoration: none;
  }
  .navbar-nav .dropdown .submenu.level-1 {
    right: 0;
    left: auto;
  }
  .navbar-nav .dropdown .submenu.level-2 {
    padding-left: 0;
    top: 0;
    right: 100%;
    left: auto;
  }
  .navbar-nav .dropdown:hover .submenu.level-1 {
    display: block;
  }
  .navbar-nav .dropdown:hover .submenu.level-1 li {
    position: relative;
  }
  .navbar-nav .dropdown:hover .submenu.level-1 li:hover .submenu.level-2 {
    display: block;
  }
  .navbar-nav .dropdown-toggle::after {
    display: inline-block;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Career</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#">Info</a>
        <ul class="list-unstyled bg-dark text-light submenu level-1">
          <li><a class="nav-link" href="#">About</a>
            <ul class="list-unstyled bg-dark text-light submenu level-2">
              <li><a class="nav-link" href="#">Mission</a></li>
              <li><a class="nav-link" href="#">Vision</a></li>
            </ul>
          </li>
          <li><a class="nav-link" href="#">Clients</a></li>
          <li><a class="nav-link" href="#">Contact Us</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

这里是带有SCSS的 jsFiddle ，而不是纯CSS。

我不知道它与您要寻找的结果有多接近，但希望对您有帮助。

答案 1 :(得分：3)

根据我的理解，您正在寻找嵌套子菜单。如果是，以下是相同解决方案。

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover>.dropdown-menu {
  top: 0;
  left: -10rem;
  /* 10rem is the min-width of dropdown-menu */
  margin-top: -6px;
  display:block
}
.dropdown:hover>.dropdown-menu{
display:block
}

/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {
  text-decoration: underline;
  transform: rotate(-90deg);
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand pb-2" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu wider text</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu</a></li>
                <li><a class="dropdown-item" href="#">Submenu0</a></li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                  </ul>
                </li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>
 来源Skelly Codeply

相关问题
最新问题