Блог

Есть ли лучший способ закодировать разделенную навигацию BS-4, чем то, как я закодировал следующее. В идеальном мире я хотел бы иметь только один экземпляр каждой ссылки, но я не могу понять, есть ли способ это сделать

https://jsfiddle.net/jpmoran/v8Larf2n/

 <nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="/">
            <img src="https://via.placeholder.com/50" width="50" height="50" class="d-inline-block align-top" alt="">
            <span class="navbar-text h3 pb-0 mb-0">BizCards4Less</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-none d-md-block ml-auto">
            <div class="navbar-nav ml-auto ">
                <a class="nav-item nav-link" href="#">Sign In</a>
                <a class="nav-item nav-link" href="#">Cart</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </div>
    </nav>
    <nav class="navbar navbar-expand navbar-light shadow" style="background-color: #fff;">
        <div class="navbar-nav mx-md-auto w-100 d-flex justify-content-between justify-content-sm-center">
            <a class="nav-item nav-link h6 px-auto px-md-3 mx-md-3" href="#">Shop Biz Cards</a>
            <a class="nav-item nav-link h6 px-auto px-md-3 mx-md-3" href="#">Re-Order Program</a>
            <a class="nav-item nav-link h6 px-md-3 mx-md-3 d-none d-md-block" href="#">About</a>
            <a class="nav-item nav-link h6 px-md-3 mx-md-3 d-none d-md-block" href="#">Blog</a>
        </div>
    </nav>
    <div class="collapse navbar-collapse" id="navbarToggler">
        <nav class="navbar navbar-light bg-light d-md-none shadow">
            <div class="navbar-nav mr-auto">
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Blog</a>
                <a class="nav-item nav-link" href="#">Sign In</a>
                <a class="nav-item nav-link" href="#">Cart</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </nav>
    </div>

  

Если вы хотите придерживаться статического HTML — Нет. HTML не может содержать логику, которая определяет, какие элементы навигации отображаются либо в выпадающем списке, либо в строке, либо в обоих без повторения кода.

Со сложным CSS через запросы @media (классы bootstrap 4 «.hidden-…») — Вроде того.

С JS — Да. вы можете избежать повторения кода, сохранив ссылки в некоторой форме конфигурации, которая определяет, появляется ли навигационная ссылка на панели навигации, в navdropdown или в обоих, например: navItems = [{ text: "About", href: "/about", inNavBar: false, inNavDropdown: true},...]

Затем можно выполнить итерацию по этому массиву и динамически создать два навигационных представления

Например, быстрый JSX будет:

 const navItems = [...] // your nav items config array

const navBar = () => (
  <React.Fragment>
    <div class="navbar-nav ...">
      {navItems
        .filter(({ inNavBar }) => inNavBar)
        .forEach(({ text, href }) => (
          <a class="nav-item nav-link href={href}>{text}</a>)}
    </div>
  </React.Fragment>
)
</div>

const navDropdown = () => (
  // same as navBar() but will filter for inNavDropDown == true instead of inNavBar
)
  

Реализация ванильного JS будет содержать ту же логику, но некоторую детализацию и разницу в создании элементов.