06/08/2023
I en verden, hvor mobiltelefonen er den primære måde, mange tilgår internettet på, er brugervenlighed afgørende. En af de mest effektive måder at forbedre navigationsoplevelsen på mobile enheder er gennem en veludført bund-navigation. Denne type navigation, ofte set i mobilapps, giver brugere nem adgang til de vigtigste funktioner med tommelfingeren inden for rækkevidde. I denne omfattende guide vil vi dykke ned i, hvordan du kan skabe en responsiv og visuelt tiltalende bund-navigation ved hjælp af standard webteknologier: HTML og CSS. Selvom nogle animationer kan kræve en smule JavaScript, vil du opdage, at grundstrukturen og designet kan opnås med ren HTML og CSS.
En bund-navigation er en menu, der forbliver fastgjort til bunden af skærmen på en mobil enhed. Den består typisk af 3-5 ikoner, der repræsenterer de mest essentielle sektioner eller funktioner i en applikation eller på et responsivt website. Formålet er at give brugeren hurtig og nem adgang til kernefunktioner uden at skulle scrolle eller åbne en skjult menu. Dette design er især populært, fordi det udnytter tommelfingerens naturlige rækkevidde på store smartphoneskærme, hvilket forbedrer den samlede brugeroplevelse.
Bund-navigationer er ikke kun forbeholdt native mobilapps; de er blevet en standardpraksis inden for responsivt webdesign, da de efterligner den velkendte app-oplevelse. Med den rette implementering kan din hjemmeside føles lige så intuitiv og strømlinet som en dedikeret mobilapp.
Implementering af en bund-navigation medfører en række klare fordele, der kan forbedre din mobiloplevelse markant:
- Forbedret Brugeroplevelse (UX): Giver nem og hurtig adgang til kernefunktioner, hvilket reducerer friktion og forbedrer navigationens effektivitet.
- Øget Tilgængelighed: Placeringen i bunden af skærmen er ideel for tommelfingeren, hvilket gør den nem at nå, selv på store skærme. Dette er især vigtigt for enhver, der bruger en telefon med én hånd.
- Pladsoptimering: Holder indholdsområdet rent og ryddeligt, da navigationen er diskret placeret i bunden, men stadig altid tilgængelig.
- Konsistens: Brugere er vant til dette mønster fra mobilapps, hvilket skaber en velkendt og betryggende navigationsstruktur.
- Forbedret Engagement: Ved at gøre de vigtigste funktioner let tilgængelige kan brugere interagere mere med dit indhold og dine tjenester.
Lad os nu gennemgå trinene for at opbygge en robust bund-navigation. Vi vil starte med HTML-strukturen og derefter style den med CSS.
Trin 1: Den Grundlæggende HTML-Struktur
Den grundlæggende struktur for vores bund-navigation vil bestå af et nav-element, der indeholder en uordnet liste (ul) af listeelementer (li). Hvert listeelement vil indeholde et link (a) og et ikon (repræsenteret af et i-tag fra en ikonfont eller et SVG-ikon).
<div class="wrapper"> <div class="phone"> <nav class="nav nav--icons"> <ul> <li> <a href="#home"> <!-- SVG ikon for Home --> <svg class="icon icon-home" viewBox="0 0 24 24" width="24" height="24"> <path fill="currentColor" d="M21.6 8.2l-9-7c-0.4-0.3-0.9-0.3-1.2 0l-9 7c-0.3 0.2-0.4 0.5-0.4 0.8v11c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.6-0.4-0.8zM14 21h-4v-8h4v8zM20 20c0 0.6-0.4 1-1 1h-3v-9c0-0.6-0.4-1-1-1h-6c-0.6 0-1 0.4-1 1v9h-3c-0.6 0-1-0.4-1-1v-10.5l8-6.2 8 6.2v10.5z"></path> </svg> <span>Home</span> </a> </li> <li> <a href="#news"> <!-- SVG ikon for News --> <svg class="icon icon-news" viewBox="0 0 24 24" width="24" height="24"> <path fill="currentColor" d="M17 2h-10c-1.7 0-3 1.3-3 3v16c0 0.4 0.2 0.7 0.5 0.9s0.7 0.1 1-0.1l6.4-4.6 6.4 4.6c0.2 0.1 0.4 0.2 0.6 0.2s0.3 0 0.5-0.1c0.3-0.2 0.5-0.5 0.5-0.9v-16c0.1-1.7-1.2-3-2.9-3zM18 19.1l-5.4-3.9c-0.2-0.1-0.4-0.2-0.6-0.2s-0.4 0.1-0.6 0.2l-5.4 3.9v-14.1c0-0.6 0.4-1 1-1h10c0.6 0 1 0.4 1 1v14.1z"></path> </svg> <span>News</span> </a> </li> <li> <a href="#profile"> <!-- SVG ikon for Profile --> <svg class="icon icon-profile" viewBox="0 0 24 24" width="24" height="24"> <g fill="currentColor"> <path d="M16 14h-8c-2.8 0-5 2.2-5 5v2c0 0.6 0.4 1 1 1s1-0.4 1-1v-2c0-1.7 1.3-3 3-3h8c1.7 0 3 1.3 3 3v2c0 0.6 0.4 1 1 1s1-0.4 1-1v-2c0-2.8-2.2-5-5-5z"></path> <path d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zM12 4c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"></path> </g> </svg> <span>Profile</span> </a> </li> <li> <a href="#search"> <!-- SVG ikon for Search --> <svg class="icon icon-search" viewBox="0 0 24 24" width="24" height="24"> <path fill="currentColor" d="M21.7 20.3l-3.7-3.7c1.2-1.5 2-3.5 2-5.6 0-5-4-9-9-9s-9 4-9 9c0 5 4 9 9 9c2.1 0 4.1-0.7 5.6-2l3.7 3.7c0.2 0.2 0.5 0.3 0.7 0.3s0.5-0.1 0.7-0.3c0.4-0.4 0.4-1 0-1.4zM4 11c0-3.9 3.1-7 7-7s7 3.1 7 7c0 1.9-0.8 3.7-2 4.9 0 0 0 0 0 0s0 0 0 0c-1.3 1.3-3 2-4.9 2-4 0.1-7.1-3-7.1-6.9z"></path> </svg> <span>Search</span> </a> </li> </ul> </nav> </div> </div>I dette eksempel bruges SVG-ikoner direkte i HTML'en, hvilket er en robust og skalerbar løsning. Bemærk span-elementerne med tekst; disse vil i første omgang være skjult og kun blive synlige ved hover eller når et element er aktivt, hvilket skaber en pæn, pladsbesparende effekt.
Nu skal vi anvende CSS for at give vores navigation et visuelt udtryk og gøre den responsiv. Vi starter med grundlæggende styling for body og wrapper, og derefter fokuserer vi på navigationselementerne.
body { background: linear-gradient(to right, #f12711, #f5af19); margin: 0; padding: 0; font-family: sans-serif; } .wrapper { max-width: 320px; margin: 2em auto; } .phone { border: 2px solid #eee; background: #fff; border-radius: 2em; position: relative; padding-bottom: 170%; /* For at simulere en telefon-skærmstørrelse */ height: 0; overflow: hidden; width: 100%; box-shadow: 0 40px 80px rgba(0,0,0,0.15); } .nav--icons { position: absolute; bottom: 2em; left: 1em; right: 1em; } .nav--icons ul { list-style-type: none; display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 0; margin: 0; } .nav--icons ul li a { font-size: 11px; letter-spacing: 1px; text-decoration: none; color: #000; line-height: 1; vertical-align: middle; display: flex; align-items: center; border-radius: 3em; padding: 0.75em 1.25em; transition: 0.6s ease-in-out; /* Glidende overgang for hover-effekter */ } .nav--icons ul li a svg { width: 24px; height: 24px; margin-right: 0.5em; /* Afstand mellem ikon og tekst */ } .nav--icons ul li a span { display: inline-block; overflow: hidden; max-width: 0; /* Starter med skjult tekst */ opacity: 0; padding-left: 0.5em; transform: translate3d(-0.5em, 0, 0); transition: opacity 0.6s, max-width 0.6s, transform 0.6s; transition-timing-function: ease-in-out; } .nav--icons ul li a:hover, .nav--icons ul li a.is-active { color: #fff; background-color: #000; } .nav--icons ul li a:hover span, .nav--icons ul li a.is-active span { opacity: 1; max-width: 40px; /* Viser teksten ved hover/aktiv */ transform: translate3d(0, 0, 0); } Denne CSS kode definerer et responsivt layout for navigationen. display: flex på ul-elementet gør det muligt at placere menu-elementerne side om side og fordele dem ligeligt med justify-content: space-between. Teksten ved siden af ikonerne (span-elementet) er som standard skjult (max-width: 0; opacity: 0;) og bliver først synlig, når et link aktiveres eller hoveres over, takket være CSS-overgange (transition). Dette skaber en flot, pladsbesparende og dynamisk effekt.
Trin 3: Aktive Tilstande og Interaktivitet
For at gøre navigationen interaktiv, skal vi kunne markere det aktuelt valgte element. Selvom den leverede kildekode bruger JavaScript til at tilføje og fjerne en .is-active klasse, kan du i princippet også opnå en form for interaktivitet med ren CSS ved hjælp af :target pseudo-klassen, hvis du har separate sektioner, der kan linkes til. For en mere robust og app-lignende oplevelse er JavaScript dog ofte at foretrække til at håndtere klikhændelser og tildele den aktive klasse dynamisk.
Når et element har klassen .is-active, anvendes de samme stilarter som ved :hover, hvilket får ikonet og teksten til at ændre farve og baggrund. Dette giver brugeren klar visuel feedback om, hvilket menupunkt der er aktivt.
Det er værd at overveje, hvornår en bund-navigation er det bedste valg i forhold til den traditionelle hamburger menu.
| Egenskab | Bund-Navigation | Hamburger Menu |
|---|---|---|
| Synlighed af kernefunktioner | Altid synlig | Skjult bag ikon, kræver klik |
| Tilgængelighed (tommelfinger) | Høj (nem at nå) | Varierende (ofte øverst) |
| Antal elementer | Ideelt 3-5 | Kan håndtere mange |
| Pladsforbrug | Konstant bånd i bunden | Minimal når lukket, fylder meget når åben |
| Anvendelsesområde | Apps med få, vigtige sektioner | Komplekse sider med mange sider/funktioner |
Valget af navigationstype afhænger stærkt af dit projekts behov. For webapplikationer eller mobile hjemmesider, der har et begrænset antal primære sektioner, er en bund-navigation ofte det optimale valg, da den fremmer hurtig interaktion med de mest brugte funktioner. Hvis du har en meget indholdsrig side med mange undersider, kan en hamburger menu være mere passende til at organisere det store antal links.
For at sikre, at din bund-navigation er så effektiv som muligt, bør du overholde følgende bedste praksis:
- Begræns antallet af elementer: Ideelt set 3-5 ikoner. For mange elementer vil gøre dem for små og svære at trykke på.
- Brug klare ikoner og etiketter: Sørg for, at ikonerne er intuitive, og overvej at inkludere tekstetiketter, især hvis ikonets betydning kan misforstås.
- Hold det konsistent: Navigationen skal altid være tilgængelig og opføre sig ensartet på tværs af alle sider.
- Vis aktiv tilstand: Gør det tydeligt, hvilket element der er aktivt, så brugeren ved, hvor de befinder sig i applikationen.
- Test på forskellige enheder: Sørg for, at navigationen ser godt ud og fungerer korrekt på forskellige skærmstørrelser og operativsystemer.
- Undgå at blokere indhold: Sørg for, at navigationen ikke overlapper vigtigt indhold, især når tastaturet er åbent.
En bund-navigation er fastgjort til bunden af skærmen og er designet til at være let tilgængelig med tommelfingeren på mobile enheder. En top-navigation sidder øverst på skærmen og bruges ofte på desktop-websites, men også på mobile enheder til mindre kritiske, men stadig vigtige links som f.eks. login eller indstillinger. Bund-navigationen prioriterer brugervenlighed med én hånd.
Det anbefales at have mellem 3 og 5 elementer i en bund-navigation. Færre end 3 kan føles for begrænsende, mens mere end 5 kan gøre ikonerne for små, svære at adskille og forvirrende for brugeren.
Skal jeg bruge ikoner eller tekst?
Ideelt set bør du bruge både ikoner og tekstetiketter for at maksimere klarheden. Ikoner giver visuel genkendelse, mens tekst sikrer, at meningsfuldheden er entydig. Hvis pladsen er meget begrænset, og ikonerne er universelt genkendelige, kan du undlade tekst, men det er ofte bedst at inkludere begge.
Nej, den grundlæggende struktur og styling kan opnås med ren HTML og CSS. JavaScript er dog ofte nyttigt for at tilføje dynamiske effekter, som f.eks. at skifte aktiv klasse ved klik, håndtere routing i single-page applications, eller tilføje mere komplekse animationer og interaktioner.
Historisk set har bund-navigationer været mest fremtrædende i native mobilapps. Men med stigningen i responsivt webdesign og progressive web apps (PWA'er) er bund-navigationer blevet en standard og effektiv løsning for mobile websites for at give en app-lignende oplevelse direkte i browseren.
Konklusion
At skabe en effektiv og visuelt tiltalende bund-navigation er en nøglekomponent i moderne mobil webudvikling. Ved at følge de trin og principper, der er beskrevet i denne artikel, kan du forbedre brugervenligheden markant på dine mobile websites og webapplikationer. Husk at fokusere på klarhed, tilgængelighed og konsistens. En veludført navigation er ikke blot en funktion; den er en integreret del af brugerens oplevelse og kan gøre forskellen mellem en frustrerende og en glædelig interaktion med dit digitale indhold.
Hvis du vil læse andre artikler, der ligner Skab Effektive Bund-Navigationer til Mobil, kan du besøge kategorien Teknologi.