Bootstrap 4 горизонтальная центрированная суб навигация при наведении - PullRequest
0 голосов
/ 19 апреля 2019

Мне нужна помощь в изменении поведения стандартного выпадающего меню навигации Bootstrap 4 для выполнения следующих действий без дублирования элементов навигации.

Мне удалось показать элементы суб-навигации при наведении, но я не смогдля решения следующих вопросов.Любое руководство будет очень ценится

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Font Awsome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">



        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
     <link rel="stylesheet" href="https://www.waterpik.com/oral-health/css/styles.css">
        <link rel="stylesheet" href="style.css">


        <!-- livereload script -->
    <script type="text/javascript">
        document.write('<script src="http://'
            + (location.host || 'localhost').split(':')[0]
            + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
    </script>




    <title>Nav Test</title>
    <style type="text/css" media="screen">

#topNav .nav-link {
  font-size: 0.8rem;}

.navbar-nav .nav-link {
  font-size: 1.2rem;}

.dropdown-item {
  font-size: 1.0rem;
}

.dropdown-toggle::after {
  border: none;
  color: #999;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0c9";
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1rem;
  border: solid 1px #999;
  border-radius: .25rem;
  vertical-align: middle;
  text-align: center;
  float: right;
  margin-right: 12px;
}

.dropdown-menu {
    font-size: 1rem;
    color: #212529;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
  }

 @media (min-width: 992px) {

.dropdown-menu {
   left: 50%;
   transform: translateX(-50%);
}
.dropdown-toggle::after {
  display:none;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 20px;
  padding-left: 20px;
}
  }

    </style>
  </head>
  <body>
    <div class="container-fluid bg-primary py-2">
      <div class="row">
        <div class="col">
            <ul id="topNav" class="nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Support</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Registration</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      </div>
    </div>

<nav class="navbar navbar-expand-lg navbar-light shadow ">
  <div class="container">
  <a class="navbar-brand" href="#">
    <img src="https://via.placeholder.com/150x75.png?text=Logo+Image"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Our Products
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="d-md-flex">
          <a class="dropdown-item" href="#">Catagory 1</a>
          <a class="dropdown-item" href="#">Catagory 2</a>
          <a class="dropdown-item" href="#">Catagory 3</a>
          <a class="dropdown-item" href="#">Catagory 4</a>
          <a class="dropdown-item" href="#">Catagory 5</a>
        </div>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          The Company
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="d-md-flex">
          <a class="dropdown-item" href="#">Who We Are</a>
          <a class="dropdown-item" href="#">What We Do</a>
          <a class="dropdown-item" href="#">Why We Do It</a>
          <a class="dropdown-item" href="#">Where to Find Us</a>
          <a class="dropdown-item" href="#">Contact</a>
        </div>
      </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Opportunites
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="d-md-flex">
          <a class="dropdown-item" href="#">Opportunites Sell Our Products</a>
          <a class="dropdown-item" href="#">Territories</a>
          <a class="dropdown-item" href="#">Affiliates</a>
          <a class="dropdown-item" href="#">Susscess Stories</a>
          <a class="dropdown-item" href="#">Contact</a>
        </div>
      </div>
      </li>

      <li class="nav-item dropdown" >
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Media
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <div class="d-md-flex" >
          <a class="dropdown-item" href="#">News & Press</a>
          <a class="dropdown-item" href="#">Blog</a>
          <a class="dropdown-item" href="#">Videos</a>
          <a class="dropdown-item" href="#">Testimonials</a>
          <a class="dropdown-item" href="#">Press Kit</a>
        </div>
      </div>
      </li>
    </ul>
        <form class="form-inline my-2 my-lg-0 ">
      <input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>
  </div>
</div>
</nav>
<div class="container my-3">
  <div class="row">
    <div class="col">
      <h1>Page Title</h1>
      <p>Remember how free clouds are. They just lay around in the sky all day long. These things happen automatically. All you have to do is just let them happen. There are no mistakes. You can fix anything that happens. Volunteering your time; it pays you and your whole community fantastic dividends. You create the dream - then you bring it into your world. You can do anything here - the only prerequisite is that it makes you happy. A tree needs to be your friend if you're going to paint him. Nice little clouds playing around in the sky. Pretend you're water. Just floating without any effort. Having a good day. Nature is so fantastic, enjoy it. Let it make you happy.</p>
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


        <script>
      function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
  }, e.type === 'mouseleave' ? 300 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);


    </script>
  </body>
</html>

https://jsfiddle.net/jpmoran/94ycqdhe/#&togetherjs=PnfBLETxv6

Вид рабочего стола:

  • Распределить интервал между основными элементами навигации (justify-content-Между)
  • Отображение подменю активной навигации по страницам по горизонтали и по центру под основной навигацией при просмотре на рабочем столе.
  • Переключение или всплывающая текущая суб-навигация при наведении курсора на другие основные элементы навигации и восстановление активной суб-навигациипри наведении мыши
  • Разрешить основным элементам навигации иметь кликабельные URL-адреса
  • Расширить область навигации по вертикали для размещения суб-навигации при необходимости

Home page without sub nav

Page with sub navigation

Мобильный просмотр:

  • Переместить панель поиска перед навигацией
  • Ссылка на основные элементына страницы
  • Развернуть подпункты только с помощью значков в правом столбце

Mobile view

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...