Demo - Drawer Menu från JSON URL

Hur det fungerar

Istället för att manuellt inkludera ett loader-skript kan du nu enkelt konfigurera navbar att ladda menyn från en JSON-fil genom att sätta drawerMenuJsonUrl i konfigurationen:

<script>
    window.NAVBAR_CONFIG = {
        height: 80,
        scrolledHeight: 50,
        language: 'sv',
        logoUrl: '../assets/swedac-logo-inverted.svg',
        drawerMenuJsonUrl: '../assets/menu-structure.json'
    };
</script>

<script src="../navbar/navbar.js"></script>
            

✨ Fördelar

Ingen extra loader-script behövs
Automatisk laddning vid navbar-initiering
Fallback till window.SITEMAP om laddning misslyckas
Stöder både relativa och absoluta URL:er

Testa funktionaliteten

Klicka på hamburgermenyn i övre högra hörnet för att se den automatiskt inladdade menystrukturen från menu-structure.json.

JSON-strukturen

JSON-filen ska ha följande format:

{
  "menuItems": [
    {
      "text": "Huvudmeny",
      "href": "https://example.com/",
      "children": [
        {
          "text": "Undermeny",
          "href": "https://example.com/sub/",
          "children": []
        }
      ]
    }
  ]
}
            

📝 Fältbeskrivning

menuItems - Array med alla huvudmenyposter
text - Texten som visas i menyn
href - URL som menyn länkar till
children - Array med undermenyer (kan vara tom [])

Fallback-beteende

Om JSON-filen inte kan laddas (felaktig URL, nätverksfel, etc.) faller navbar tillbaka till:

window.SITEMAP.menuItems - Om denna är definierad
Standardmeny - En enkel fallback-meny med länk till www.swedac.se

⚠️ Felhantering

Om laddningen misslyckas visas en varning i console.log med information om felet. Detta hjälper vid felsökning utan att hindra navbar från att fungera.

Exempel med olika URL:er

Relativ URL (lokalt projekt):

drawerMenuJsonUrl: '../assets/menu-structure.json'

Absolut URL (extern server):

drawerMenuJsonUrl: 'https://api.example.com/menu.json'

Samma origin:

drawerMenuJsonUrl: '/api/menu'

🎉 Drawer Menu från JSON URL