04/07/2023
Skab en responsiv Bulma Navigationsbar
En velfungerende og responsiv navigationsbar er essentiel for enhver moderne hjemmeside. Den sikrer, at brugere nemt kan navigere på tværs af dit indhold, uanset hvilken enhed de bruger. Bulma, et moderne CSS-framework baseret på Flexbox, gør det utroligt nemt at skabe elegante og funktionelle navigationsbarer. Denne guide vil tage dig igennem processen med at oprette en responsiv navigationsbar fra bunden, inklusiv den ikoniske 'burger' menu, der gemmer sig på mindre skærme.
Bulma's navbar-komponent er designet til at være fleksibel og tilpasningsdygtig. Den består af flere kerneelementer, der arbejder sammen for at skabe en sammenhængende brugeroplevelse:
.navbar: Hovedcontaineren for hele navigationsbaren..navbar-brand: Indeholder typisk logoet eller navnet på din hjemmeside og er altid synlig..navbar-burger: Den 'burger'-ikon, der vises på mobile enheder og som, når den klikkes, udløser visningen af menuen..navbar-menu: Selve menuen, der indeholder links og andre elementer. Den er skjult som standard på mobile enheder..navbar-start: Elementer, der skal placeres i venstre side af menuen på desktop..navbar-end: Elementer, der skal placeres i højre side af menuen på desktop..navbar-item: Enkeltstående navigationslinks eller elementer inden i menuen..navbar-link: Bruges til at indikere et menupunkt, der åbner en dropdown-menu..navbar-dropdown: Containeren for dropdown-menuens indhold..navbar-divider: En vandret linje til at adskille elementer i en dropdown-menu.
Lad os starte med den grundlæggende HTML-struktur for en navbar, der fungerer godt på desktop-skærme. Først skal du inkludere Bulma's stylesheet i din HTML-fils <head> sektion:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"> Derefter kan du opbygge selve navigationsbaren:
<nav class="navbar" id="my-nav" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> Din Logo </a> <!-- Burger ikon tilføjes her senere --> </div> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Hjem </a> <a class="navbar-item"> Om Os </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Produkter </a> <div class="navbar-dropdown"> <a class="navbar-item"> Produkt A </a> <a class="navbar-item"> Produkt B </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-primary"> <strong>Tilmeld</strong> </a> <a class="button is-light"> Log ind </a> </div> </div> </div> </div> </nav>I dette eksempel har vi en simpel navbar med et logo, et par links, en dropdown-menu og login/tilmeld-knapper. Bemærk, at .navbar-menu indeholder både .navbar-start og .navbar-end for at strukturere indholdet korrekt.
For at gøre navigationsbaren responsiv, skal vi tilføje 'burger'-ikonet, der aktiverer menuen på mindre skærme. Dette ikon placeres typisk som det sidste barn i .navbar-brand elementet.
<div class="navbar-brand"> <a class="navbar-item" href="/"> Din Logo </a> <a role="button" id="burger-button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="my-nav-menu"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="my-nav-menu" class="navbar-menu"> ... </div> Her har vi tilføjet et <a> tag med klassen .navbar-burger og et unikt ID, #burger-button. De tre <span> elementer er essentielle for at visualisere de tre linjer i burger-ikonet. Vi har også tilføjet data-target="my-nav-menu" til burger-knappen for at linke den til .navbar-menu elementet med det tilsvarende ID.
JavaScript for Responsivitet
For at få burger-menuen til at fungere, skal vi tilføje lidt JavaScript. Dette script vil lytte efter klik på burger-knappen og derefter tilføje eller fjerne .is-active klassen på både burger-knappen og menuen. Dette skifter visuelt mellem burger-ikonet og et 'luk'-ikon samt viser/skjuler menuen.
const burgerButton = document.getElementById('burger-button'); const navbarMenu = document.getElementById('my-nav-menu'); burgerButton.addEventListener('click', () => { burgerButton.classList.toggle('is-active'); navbarMenu.classList.toggle('is-active'); }); Placer dette JavaScript-snippet, helst lige før din </body> tag afslutning, eller i en separat JS-fil, der importeres.
Farvemodifikatorer
Bulma tilbyder en række prædefinerede farvemodifikatorer, som du nemt kan anvende på din .navbar for at ændre baggrundsfarven. Disse inkluderer:
is-primaryis-linkis-infois-successis-warningis-dangeris-lightis-darkis-blackis-white
Eksempel:
<nav class="navbar is-primary" role="navigation" aria-label="main navigation"> ... </nav> For at oprette en dropdown-menu, skal du bruge klasserne .has-dropdown og .is-hoverable på et .navbar-item. Inden i dette element placeres .navbar-link for selve linket og .navbar-dropdown for indholdet.
<div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Produkter </a> <div class="navbar-dropdown"> <a class="navbar-item"> Produkt A </a> <a class="navbar-item"> Produkt B </a> <hr class="navbar-divider"> <a class="navbar-item"> Se Alle </a> </div> </div> Du kan også gøre dropdowns aktive via JavaScript ved at tilføje klassen .is-active til .navbar-item.has-dropdown og styre dette programmatisk.
For at skabe en menu, der popper opad i stedet for nedad (nyttigt for f.eks. faste navigationsbarer i bunden), kan du tilføje klassen .has-dropdown-up til .navbar-item.has-dropdown.
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable"> <a class="navbar-link"> Menu Opad </a> <div class="navbar-dropdown"> ... </div> </div> Højre Justering af Dropdowns
Hvis du ønsker, at en dropdown-menu skal starte fra højre side i stedet for venstre, kan du tilføje klassen .is-right til .navbar-dropdown elementet.
<div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Højre Menu </a> <div class="navbar-dropdown is-right"> ... </div> </div> Du kan fastgøre din navigationsbar til enten toppen eller bunden af siden ved at tilføje klasserne .is-fixed-top eller .is-fixed-bottom til .navbar elementet. Husk at tilføje den tilsvarende padding til html eller body for at undgå, at indholdet bliver skjult bag den faste navbar.
<!-- Fast i toppen --> <nav class="navbar is-fixed-top">......| Klasse | Beskrivelse |
|---|---|
.navbar | Grundlæggende container for navigationsbaren. |
.navbar-brand | Indeholder logo/navn, altid synlig. |
.navbar-burger | Burger-ikonet, der viser/skjuler menuen på mobile enheder. |
.navbar-menu | Selve menuen, skjult på mobile som standard. |
.navbar-start | Venstre side af menuen på desktop. |
.navbar-end | Højre side af menuen på desktop. |
.navbar-item | Et enkelt element i navigationsbaren. |
.navbar-link | Et link, der kan åbne en dropdown. |
.navbar-dropdown | Container for dropdown-indhold. |
.navbar-divider | Vandret skillelinje i dropdowns. |
.is-active | Aktiverer burger-ikonet (som kryds) og viser menuen. |
.is-hoverable | Får dropdown til at vises ved hover. |
.has-dropdown-up | Får dropdown til at poppe opad. |
.is-right | Justerer dropdown til højre. |
.is-transparent | Fjerner standard baggrundsfarve og hover-effekter. |
.is-boxed | Giver dropdown en boks-stil med afrundede hjørner. |
.is-primary, is-link, etc. | Farvemodifikatorer til navbar-baggrunden. |
.is-fixed-top / .is-fixed-bottom | Fastgør navigationsbaren til toppen/bunden af siden. |
Ofte Stillede Spørgsmål (FAQ)
Ja, absolut. Ved at inkludere .navbar-burger elementet og bruge det tilhørende JavaScript til at toggle .is-active klassen, kan du nemt opnå en responsiv burger-menu.
Hvordan tilføjer jeg et nyt link til en Bulma stylesheet?
Du tilføjer et nyt link ved at indsætte et <a class="navbar-item" href="#">Dit Link element inden i enten .navbar-start eller .navbar-end div'en, afhængigt af hvor det skal placeres.
Tilføj en af Bulma's farvemodifikatorer som .is-primary, .is-info, .is-success osv. direkte til <nav class="navbar"...> elementet.
Kræver Bulma JavaScript for at fungere?
Nogle Bulma-komponenter, især dem der involverer interaktivitet som dropdowns og toggles (f.eks. burger-menuen), kræver JavaScript for fuld funktionalitet. Bulma's CSS alene giver styling, men interaktiviteten skal ofte håndteres med JavaScript.
Konklusion
Med Bulma er det en ligetil proces at skabe en moderne og responsiv navigationsbar. Ved at forstå de grundlæggende komponenter og klasser, samt hvordan man implementerer den essentielle JavaScript-logik for interaktivitet, kan du bygge en professionel navigationsoplevelse for dine brugere på alle enheder. Eksperimenter med de forskellige farvemodifikatorer, dropdown-muligheder og faste positioneringer for at skræddersy din navbar præcis til dine behov.
Hvis du vil læse andre artikler, der ligner Skab en responsiv Bulma Navigationsbar, kan du besøge kategorien Teknologi.