MB22 - horní lišta (s menu)

by Petr Haluza

HTML

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

<div id="MB22">

<header>

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

    <div class="MB22-open-main-menu">
      <input type="checkbox" id="module-navigation_toggle" class="resetable">
      <label for="module-navigation_toggle" title="Menu modulů MegaBase">
        <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-module-navigation">
        <ul>
          <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>
   ...

CSS

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

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



:root {
  --main-text-color: #348;
  --header-height: 48px;
  --header-background-color: #456;
  --header-item-hover-background-color: #678;
  --light-item-hover: #f0f5fa}


/* bootstrap svg ikony */
i.bi {display:flex}

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




/*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%;}

#MB22 label,
#MB22 a {cursor:pointer}



/* header-lišta */
#MB22 > header {height:var(--header-height); background:var(--header-background-color); }
#MB22 > header > div { display:flex; height: 100%; }
#MB22-main-header { color:white }
#MB22-main-header > div { display:flex; height: 100%;align-items:center }
#MB22-main-header > div > label{ padding: 0 .75em; height: 100%; display: flex; align-items: center;}
#MB22-main-header > div > label:hover {background:var(--header-item-hover-background-color)}
#MB22-main-header nav {max-height: calc(100vh - var(--header-height)); overflow-y: auto}
#MB22-main-header div.has-dropdown { position:relative}
#MB22-main-header div.has-dropdown > input[type=checkbox],
#MB22-main-header div.has-dropdown > nav { display: none}
#MB22-main-header div.has-dropdown > input[type=checkbox]:checked ~ nav { display: block}
#MB22-main-header div.has-dropdown .MB22-header-dropdown-menu { position:absolute; top:var(--header-height); }

/* header-lišta menu modulů */
.MB22-open-main-menu > nav,
.MB22-open-main-menu > input[type=checkbox] { display: none}
.MB22-open-main-menu > input[type=checkbox]:checked ~ nav {...

JavaScript

$('input.resetable').on('click', function (e) {
    e.stopPropagation();
});

$('main').click(function () {
    $('input.resetable').prop("checked", false);
});