U današnjem digitalnom dobu, responzivne web stranice postale su standard. Korisnici pristupaju web sadržaju putem različitih uređaja, uključujući pametne telefone, tablete i stolna računala. Stoga je važno imati navigaciju koja se prilagođava veličini ekrana. U ovom članku istražit ćemo kako izraditi responzivnu navigaciju koristeći Tailwind CSS, popularni CSS framework koji omogućuje brzu i jednostavnu izradu stilova.
Prvo, što je Tailwind CSS? Tailwind CSS je utility-first framework koji omogućuje programerima da brzo stvaraju prilagođene dizajne bez potrebe za pisanjem vlastitog CSS-a. Umjesto toga, koriste se unaprijed definirane klase koje se primjenjuju izravno na HTML elemente. Ovo omogućuje veliku fleksibilnost i brzinu u razvoju web stranica.
Kada govorimo o navigaciji, ona je obično jedna od najvažnijih komponenti web stranice. Dobro dizajnirana navigacija pomaže korisnicima da se lako kreću kroz sadržaj i pronađu ono što traže. Osim toga, responzivna navigacija osigurava da se navigacijski elementi pravilno prikazuju na svim uređajima, bez obzira na veličinu ekrana.
Za početak, trebamo uključiti Tailwind CSS u naš projekt. To možemo učiniti tako da dodamo sljedeći link u <head> sekciju našeg HTML dokumenta:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">Jednom kada uključimo Tailwind CSS, možemo započeti s izradom naše navigacije. Osnovna struktura navigacije može izgledati ovako:
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white font-bold text-xl">Moja Web Stranica</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Početna</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">O nama</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Usluge</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Kontakt</a>
</div>
<div class="md:hidden">
<button class="text-gray-300 hover:bg-gray-700 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
</nav>U ovom primjeru, navigacija koristi Tailwind CSS klase za stilizaciju. Ovdje imamo kontejner s pozadinom u tamnoj boji i svijetlim tekstom. Na velikim ekranima, linkovi su vidljivi, dok su na manjim ekranima skriveni i zamijenjeni gumbom koji može otvoriti izbornik. Za izradu responzivnog izbornika moramo dodati malo JavaScript koda koji će omogućiti otvaranje i zatvaranje izbornika.
Dodajmo JavaScript kod ispod našeg navigacijskog HTML-a:
<script>
const button = document.querySelector('button');
const menu = document.querySelector('.md:flex');
button.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>Ovaj kod dodaje funkcionalnost gumbu za otvaranje izbornika. Kada korisnik klikne na gumb, izbornik će se prikazati ili sakriti, ovisno o trenutnom stanju. Sada imamo funkcionalnu responzivnu navigaciju koja će se prilagoditi različitim uređajima.
U zaključku, Tailwind CSS omogućuje jednostavno i brzo stvaranje responzivnih navigacija koje su ključne za poboljšanje korisničkog iskustva na web stranicama. Isprobajte ovaj pristup u svojim projektima i uživajte u prednostima koje donosi Tailwind CSS.
