Navbar Demo

Detta är en demonstrationsida för en responsiv navigationskomponent. Komponenten är avsedd att kunna integreras i olika webbapplikationer och webbplatser för att skapa en enhetlig och igenkännbar navigation.

Se även: Konfigurationsexempel som visar hur du kan förkonfigurera navbar:en innan scriptet laddas.

Anpassa navigationskomponenten

Använd knapparna nedan för att testa komponentens funktionalitet:

Navigation:

Användare:

Rubrik (Parent och Child):

Tips: Parent blir klickbar om URL anges. Child visas med › separator.

Sökfunktion:

Språk:

Färger:

Hamburgermeny:

Anpassa menyinnehåll:

Kontroll:

Användning

För att använda navigationskomponenten i en webbapplikation eller på en webbplats, lägg till följande script-tagg i din HTML-kod inom head-elementet:

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

API-metoder:

Konfiguration:

Du kan konfigurera navbar:en på två sätt:

1. Förkonfiguration (rekommenderat):

Sätt window.NAVBAR_CONFIG i <head> före navbar.js laddas:

<script>
    window.NAVBAR_CONFIG = {
        height: 80,
        language: 'en',
        backgroundColor: '#1a365d'
        // ... andra inställningar
    };
</script>
<script src="../navbar/navbar.js"></script>

2. Via API efter laddning:

Använd API-metoder för att ändra inställningar dynamiskt (som denna demo visar).

Standardkonfiguration:

Automatisk CSS-klassfunktionalitet:

Navigationskomponenten söker automatiskt efter DOM-element med CSS-klassen navbar-child och lägger till deras textinnehåll som underrubrik i navigationen.