Responzivní horizontální menu

inpirováno GreedyNav

by Petr Haluza

HTML

<div id="MB22-module-header">
    <nav id="MB22-module-navigation">
        <ul class="MB22-module-navigation-links">
          <li><a href="#"><i class="bi bi-badge-hd"></i>Helpdesk</a></li>
          <li><a href="#"><i class="bi bi-diagram-3"></i>Projektový Helpdesk</a></li>
          <li><a href="#"><i class="bi bi-file-earmark-play"></i>Pracovní postupy</a></li>
          <li><a href="#"><i class="bi bi-card-checklist"></i>Kategorie článků</a></li>
          <li class="has-dropdown">
            <input type="checkbox" id="M1_toggle">
            <label for="M1_toggle"><i class="bi bi-shop"></i>Marketing</label>
            <ul class="is-dropdown">
              <li><a href="/marketingove-akce">Marketingové akce</a></li>
              <li><a href="/promoakce">Promoakce</a></li>
              <li><a href="/marketing-prezenty/kampane">Prezenty</a></li>
            </ul>
          </li>
          <li class="has-dropdown">
            <input type="checkbox" id="m2_toggle">
            <label for="m2_toggle"><i class="bi bi-file-easel"></i>Poptávky a projekty</label>
            <ul class="is-dropdown">
              <li><a href="/poptavky">Poptávky</a></li>
              <li><a href="/projekty">Projekty</a></li>
            </ul>
          </li>
          <li class="has-dropdown">
            <input type="checkbox" id="M3_toggle">
            <label for="M3_toggle"><i class="bi bi-pencil-square"></i>Redakční systém</label>
            <ul class="is-dropdown">
              <li><a href="/rs-clanky">Články</a></li>
              <li><a href="/rs-reklamnisystem">Reklamní systém</a></li>
              <li><a href="/rs-statickestranky">Statické stránky</a></li>
            </ul>
          </li>
        </ul>
        
        <button>Více</button>
        <ul class='MB22-module-navigation-hiddenlinks hidden'></ul>
       
      </nav>  
  </div><!-- /MB22-module-header-->

CSS

#MB22-module-navigation { position: relative; display: flex; align-items: center;}
#MB22-module-navigation button { align-self: stretch; padding: 0 1rem 0 1.5rem; outline: 0; border: 0; font-weight: bold; background: #c8c8c8; color: #404040}
#MB22-module-navigation button.hidden { display: none;}
#MB22-module-navigation button::after { content: attr(count);
  display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: #9f9f9f; color: #f2f2f2; border-radius: 50%; font-size: 14px; line-height: 14px; margin-left: 1rem;  margin-right: calc(-1rem + -8px)}
.MB22-module-navigation-links { display: flex; justify-content: flex-end; flex: 1; overflow: hidden; list-style:none}
.MB22-module-navigation-links li { flex: none; padding: 0 1rem;}
.MB22-module-navigation-links li a { color: #404040;}
.MB22-module-navigation-links > li.has-dropdown > label:after{content: "\f59e";display: inline-block; font-family: bootstrap-icons !important; font-weight: normal !important; margin: 0 0 0 auto; opacity:.25}
.MB22-module-navigation-links > li > ul,
.MB22-module-navigation-links > li > input[type=checkbox] { display: none}
.MB22-module-navigation-links > li > input[type=checkbox]:checked ~ ul { display: block}

/* přesunuto do skrytého seznamu*/
.MB22-module-navigation-hiddenlinks { position: absolute; background: #d8d8d8; right: 0; top: 100%;}
.MB22-module-navigation-hiddenlinks li a { color: #404040; padding-right: 1rem;}
.MB22-module-navigation-hiddenlinks.hidden { display: none;}
.MB22-module-navigation-hiddenlinks li { padding: 1rem;}

JavaScript

$(function() {
  var $nav = $('#MB22-module-navigation');
  var $btn = $('#MB22-module-navigation button');
  var $vlinks = $('.MB22-module-navigation-links');
  var $hlinks = $('#MB22-module-navigation .MB22-module-navigation-hiddenlinks');
  var numOfItems = 0;
  var totalSpace = 0;
  var breakWidths = [];

  // Get initial state
  $vlinks.children().outerWidth(function(i, w) {
    totalSpace += w;
    numOfItems += 1;
    breakWidths.push(totalSpace);
  });

  var availableSpace, numOfVisibleItems, requiredSpace;

  function check() {

    // Get instant state
    availableSpace = $vlinks.width() - 10;
    numOfVisibleItems = $vlinks.children().length;
    requiredSpace = breakWidths[numOfVisibleItems - 1];

    // There is not enought space
    if (requiredSpace > availableSpace) {
      $vlinks.children().last().prependTo($hlinks);
      numOfVisibleItems -= 1;
      check();
      // There is more than enough space
    } else if (availableSpace > breakWidths[numOfVisibleItems]) {
      $hlinks.children().first().appendTo($vlinks);
      numOfVisibleItems += 1;
    }
    // Update the button accordingly
    $btn.attr("count", numOfItems - numOfVisibleItems);
    if (numOfVisibleItems === numOfItems) {
      $btn.addClass('hidden');
    } else $btn.removeClass('hidden');
  }

  // Window listeners
  $(window).resize(function() {
    check();
  });

  $btn.on('click', function() {
    $hlinks.toggleClass('hidden');
  });

  check();

});