Funktionalitet

Primär navigation

Det finns två olika utseenden av navigationen förberett i temat. Inkludera antingen styles/components/nav-one.scss eller styles/components/nav-two.scss i app.scss. Menyn fungerar utan Javascript aktivt i webbläsaren i desktop läge, men med begränsad funktionalitet.

Funktionaliteten för denna meny är en utgångspunkt som är till för att byggas vidare på och anpassas. Det gäller både Typescript-delen och CSS:en.

Sätta upp menyn

För att initiera menyn-klassen importeras PrimaryNav från ./lib/primary-nav.ts i app.ts. Menyn är i grunden väldigt simpel, men funktionaliteten kan utökas med plugins. Dessa importeras från ./plugins/primary-nav-plugins.ts.

Metoder

• mount - Används för att slutföra uppsättningen av menyn, och tar en array med plugins som kan läggas till.
  • Parametrar:
    • plugins array (frivillig) - En array med menytillägg.
• toggleMenuOpen - Öppnar menyn om den är stängd, och stänger menyn om den är öppen.
• closeMenu - Stänger menyn.

Plugin och dess funktionalitet

• useClickOutsideToClose - Gör att undermenyer stängs om man klickar utanför eller om man klickar på ett annat meny-element.
• useDocking - Gör att menyn dockas (sättas till position: fixed) efter antal px (offset) skrollat från toppen.
  • Parametrar:
    • offset number (frivillig) - Antal pixlar från toppen när menyn växlar till att vara position: fixed. Default är 150.
• useMenuItemTarget eller useIconTarget - Lägger till en ikon för undermenyer. Välj antingen det ena eller det andra pluginet.
  • useMenuItemTarget - Gör att hela menylänken används för att öppna undermenyn genom klick. Används denna är det viktigt att man ser till att bygga menyn så att föräldrasidan inte innehåller något då den inte kommer gå att navigera till. Man kan även använda en "anpassad länk" som är satt till # som föräldrasida.
  • useIconTarget - Gör att ikonen blir klickbar används för att öppna undermenyn. Menylänken kan där med navigeras till på som vanligt.
• useStopScrolling - Välj om dokumentet ska sluta skrolla när menyn har öppnats.
• useOpenMenuTree - Gör att undermenyerna öppnas upp om man besöker en sida inuti. Gäller vid mobil skärmbredd.

Exempel

import { PrimaryNav } from './lib/primary-nav';

import {
  useClickOutsideToClose,
  useDocking,
  useMenuItemTarget, // or useIconTarget
  useStopScrolling,
  useOpenMenuTree,
} from './plugins/primary-nav-plugins';

const primaryNav = new PrimaryNav();

primaryNav.mount([
  useClickOutsideToClose(),
  useDocking(),
  useMenuItemTarget(), // or useIconTarget(),
  useOpenMenuTree()
  useStopScrolling(),
  useOpenMenuTree(),
]);

Navigation ett

Detta handlar om navigationsutseendet som inkluderas med components/nav-one.scss i app.scss.

Denna meny:

• Öppnas från toppen likt en byrålåda i mobilt läge.
• Är byggd för att öppnas med ett klick. Antingen på hela menylänken ("menu-item") eller bara menyikonen ("icon").
• Rekommenderas tillsammans inställningen useClickOutsideToClose satt till true.

För att göra menyn hover-baserad för undermenyer, likt navigation två, kan detta läggas till:

.menu-item {
  &:hover,
  &:focus {
    > .sub-menu {
      @apply block;
    }
  }
}

Navigation två

Detta handlar om navigationsutseendet som inkluderas med components/nav-two i app.scss.

Denna meny:

• Öppnas från höger kant i mobilt läge.
• Är hover-baserad för undermenyer i desktopläge. Det är därför bra att ha useClickOutsideToClose satt till false.

Övrigt

Om submenuTarget är satt till icon är det bra att öka storleken på ikonen för att lättare kunna trycka på den.

Tidigare versioner

Innan version 0.10.0 av temat fungerar menyn så här. För att initiera menyn importeras ./lib/primary-nav.ts i app.ts. Det går att skicka med fem inställningar för menyn:

• submenuTarget string - Välj om undermenyer öppnas när man klickar på hela menynelementet eller bara menyikonen.
  • Tillåtna värden är menu-item och icon
  • Om värdet är satt till menu-item måste menyn byggas efter det inne i Wordpress, alltså kan inte meny föräldern vara en länk som går att besöka.
  • Default: icon.
• useClickOutsideToClose boolean - Välj att kunna stänga undermenyn om man klickar utanför eller på ett annat menyelement.
  • Detta gäller bara på desktop varianten av menyn.
  • Det är onödigt att ha detta värde satt till true om undermenyer aktiveras med hover.
  • Default: true.
• useDocking boolean - Välj om menyn ska dockas (sättas till position: fixed) efter antal px (dockingOffset) skrollat från toppen.
  • Default: false.
• dockingOffset number - Antal pixlar från toppen när menyn växlar till att vara position: fixed.
  • Default: 150.
• useStopScrolling boolean - Välj om dokumentet ska sluta skrolla när menyn har öppnats.
  • Default: false.

Exempel

import { PrimaryNav } from './lib/primary-nav';

setupPrimaryNav({
  subMenuTarget: "menu-item",
  useClickOutsideToClose: true,
  useDocking: true,
  dockingOffset: 150,
  useStopScrolling: true,
});