MB22 - hormí menu v2

by Petr Haluza

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div id="MB22"><!-- hned v body, obaluju všchen nový kód začínající MB22 -->




<header>

  <div id="MB22-main-header">

    <div class="MB22-open-app-menu">
      <input type="checkbox" id="app-navigation_toggle" class="resetable">
      <label for="app-navigation_toggle" title="Menu aplikací">
        <i class="bi bi-three-dots-vertical"></i>
        <i class="bi bi-three-dots-vertical"></i>
        <i class="bi bi-three-dots-vertical"></i>
      </label>
      <nav id="MB22-app-navigation">
        <h4>Nejpoužívanější</h4>
        <ul>
          <li><a href="#"><i class="bi bi-bar-chart-line-fill"></i>STAT</a></li>
          <li><a href="#"><i class="MS-icon MS-sharepoint"></i>Sharepoint</a></li>
          <li><a href="#"><i class="bi bi-skype"></i>Nevim co dál</a></li>

          <li class="has-dropdown">
            <input type="checkbox" id="APP1_toggle">
            <label for="APP1_toggle"><i class="bi bi-shop"></i>Něco s podkategorií</label>
            <ul class="is-dropdown">
              <li><a href="#">Podkategorie</a></li>
              <li><a href="#">Podkategorie</a></li>
            </ul>
          </li>
        </ul>
        <h4>Další aplikace Microsoft</h4>
        <ul>
          <li><a href="#"><i class="MS-icon MS-outlook"></i>Outlook</a></li>
          <li><a href="#"><i class="MS-icon MS-teams"></i>Teams</a></li>
          <li><a href="#"><i class="MS-icon MS-excel"></i>Excel</a></li>
          <li class="has-dropdown">
            <input type="checkbox" id="APP4_toggle">
            <label for="APP4_toggle"><i class="bi bi-three-dots"></i>Více</label>
            <ul class="is-dropdown no-arrows">
              <li><a href="#"><i class="MS-icon MS-word"></i>Word</a></li>
              <li><a href="#"><i class="MS-icon MS-planner"></i>Planner</a></li>
            </ul>
          </li>
        </ul>
        <label...

CSS

/* jen demo */
* {box-sizing:border-box}
html {height: 100%;}
body {height: 100%; padding:0; margin:0}
/* /jen demo*/

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

/* Breakpoint pro mobilní zobrazení @media all and (max-width:920px) */

:root {
  --main-text-color: #345;
  --main-background-color: #f0f5fa;
  --header-height: 48px;
  --header-background-color: #456;
  --header-item-hover-background-color: #678;
  --light-item-hover: #f0f5fa;
  --quick-menu-main-color:#5c95cf;

  --ui-green-color:#35c540;
  --ui-red-color:#ea0000;
  --ui-orange-color:#ff7c0c;
  --ui-blue-color:#71b3ff;
  --ui-gray-color:#ddd}

/*global*/
#MB22 { font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; font-weight: 400; color: var(--main-text-color);
height: 100%; background: var(--main-background-color)}
#MB22 label,
#MB22 a {cursor:pointer; color:initial}
#MB22 fieldset {margin: 0; padding: 0; outline: 0; border: 0;}


/* bootstrap svg ikony */
i.bi {display:flex; justify-content: center;}
p > i.bi {display:inline}


/* uživatel všude*/
img.MB22-user-image {display: inline-block; height: 2em; width: 2em; border-radius: 50%;}

/* pokus o grid systém - neni hotovo - jen pro demo*/
.MB22-flex-row {display:flex; flex-direction: row; flex-wrap: wrap;}
.MB22-flex-col {display:flex; flex-direction: column}
.col-md-2 {width:20%}
.col-md-10 {width:80%}

/* tlačítka */
.MB22-btn-default,
.MB22-btn-gray{ background-color: var(--ui-gray-color); color: #444;}
.MB22-btn-next,
.MB22-btn-blue{ background-color: var(--ui-blue-color); color: #fff;}
.MB22-btn-save,
.MB22-btn-green{ background-color: var(--ui-green-color); color: #fff;}
.MB22-btn-orange{ background-color: var(--ui-orange-color); color: #fff;}
.MB22-btn-red{ background-color: var(--ui-red-color); color: #fff;}

.MB22-btn { padding: .7em 1em; border:...

JavaScript

// reset otevřených menu (čekboxama) při kliku jinam (mířeno na MAIN element, aby se nezavírali při kliku v menu mimo link *************************
$('input.resetable').on('click', function (e) {
    e.stopPropagation();
});
$('main').click(function () {
    $('input.resetable').prop("checked", false);
});

// horní lišta - menu modulů - přesunutí položek menu pod hamburger, pokud je menu širší nežstránka ***************************
$(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();

});

// check jestli jsme skrollnuli a fixnout header
$(window).scroll(function(){
	if...