MainMenu Widget

Standard sintax

    <div id="mainMenu" data-mmFixed="on|off" data-mmHeightToFixed="px|default|off">
      <div id="mainMenuLogo">
        <img src="img/logo_getdbjs.png" alt="logo" />
      </div>
      <div id="mainMenuNav">
        <ul>
          <li class="menuItem">
            <a href="#">Menu 1</a>
            <ul class="subMenu">
              <li class="subMenuItem"><a href="#">Submenu 1</a></li>
              <!-- Submenu item -->
            </ul>
          </li>
          <li class="menuItem"><a href="#">Menu 2</a></li>
          <!-- Menu item -->
        </ul>
      </div>
    </div>
  

Questo widget permette di avere a disposizione un menù principale per il sito web.
Può essere utilizzato in tre modi differenti:

• nel normale flusso del documento, senza impostare i relativi data attributes che di default sono ad off;
• come menù fixed, impostando data-mmFixed ad on;
• infine come fixed variabile, quindi lasciando data-mmFixed ad off e impostando la proprietà data-mmHeightToFixed con un valore numerico che corrisponderà a quinti pixel dall'altro sarà necessario scrollare il documento per far si che il menù diventi fixed o impostare default qualora si voglia che il menù diventi fixed quando si sia effettuato uno scroll di tanti pixel qunta è la sua altezza di offset.

Il widget prevede la possibilità di visualizzare un sottomenù qualora si inserisca un ul in una delle voci, questo apparirà all'hover dell'elemento li corrispondente (nella vesione mobile il submenu non sarà visivile).

Come accennato il MainMenu widget è anche responsive: al di sotto di 1024px di larghezza dello schermo sarà visibile un'icona che lo espanderà all'occorrenza.

Lo style di default del widget è molto semplice ovviamente come sempre la libreria dBJs lascia ampià possibilità di pesonalizzazione inserendo solo lo stile essenziale per il funzionamento.
Nell'esempio seguente oltre allo stile di base sono state aggiunte delle semplice regole per una migliore apparenza dell'esempio stesso.
La tipologia di utilizzo proposta in questo esempio, ma sarà facile testare anche le altre, è quella di un menù che diventa fisso quando il documento è stato scrollato di almeno 100px, impostando la proprietà data-mmFixed a off e la proprietà data-mmHeightToFixed a 100.

    <div id="mainMenu" data-mmFixed="off" data-mmHeightToFixed="100">
      <div id="mainMenuLogo">
        <img src="img/logo_getdbjs.png" alt="logo" />
      </div>
      <div id="mainMenuNav">
        <ul>
          <li class="menuItem">
            <a href="#">Menu 1</a>
            <ul class="subMenu">
              <li class="subMenuItem"><a href="#">Submenu 1</a></li>
              <!-- Submenu item -->
            </ul>
          </li>
          <li class="menuItem"><a href="#">Menu 2</a></li>
          <!-- Menu item -->
        </ul>
      </div>
    </div>