web-dev-qa-db-fra.com

Disposition du menu déroulant sous Bootstrap

Je suis novice dans l'utilisation de Bootstrap et JS n'est pas mon langage le plus fort, donc j'ai du mal à atteindre ce que je recherche.

J'ai un menu pour un site généré avec php comme ceci:

<?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

Je veux que le premier menu déroulant soit positionné en dehors de l'en-tête parent.

Ensuite, chaque élément de la première liste déroulante devrait également être cliquable pour vous amener à cette rubrique sur la page du magasin.

Le survol des premiers éléments du menu déroulant devrait afficher son sous-menu sur le côté.

Éditer

Je ne voulais pas publier l'intégralité du code HTML généré comme étant énorme, j'ai donc coupé un exemple des premières rubriques et uniquement les premières catégories de chacune

<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>
javascriptphphtmlcssbootstrap-4
10
Paddy Hallihan

J'ai mis cela ensemble avec Bootstrap 4 et quelques CSS personnalisés:

.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>

Voici un jsFiddle avec SCSS au lieu de CSS simple.

Je ne sais pas à quel point c'est proche du résultat que vous recherchez, mais j'espère que cela vous aidera.

6
Razvan Zamfir