Sadržaj

• Kročiti
• Dio 1 od 2: Pisanje HTML-a
• Dio 2 od 2: Pisanje CSS-a
• Savjeti

Pomoću padajućeg izbornika stvarate jasan i hijerarhijski pregled svih važnih dijelova stranice i pododjeljaka koje stranica sadrži. Morate samo pomaknuti miš iznad glavnih odjeljaka kako bi se pojavili pododjeljci. Možete stvoriti padajući izbornik koristeći samo HTML i CSS.

Kročiti

Dio 1 od 2: Pisanje HTML-a

1. Izradite svoj odjeljak za navigaciju. Obično koristite nav> za navigacijsku traku na cijelom web mjestu, zaglavlje> za manje odjeljke veza koji su vezani za stranicu ili div> ako se čini da nijedna druga opcija ne odgovara. Smjestite ovo u element div> kako biste mogli prilagoditi stil spremnika i samog izbornika.
   • div>
   • nav>
   • / nav>
   • / div>
2. Svakom odjeljku dajte atribut klase. Atribut class koristit ćemo kasnije za modificiranje stila ovih elemenata s CSS-om. Dajte i spremniku i izborniku svoj atribut klase.
   • div>
   • nav>
   • / nav>
   • / div>
3. Dodajte popis stavki izbornika. Neuređeni popis (ul>) sadrži stavke glavnog izbornika (stavke popisa li>), ako korisnik pređe mišem preko njega, vidi padajuće izbornike. Dodajte klasu "clearfix" na svoj element popisa; do toga ćemo doći kasnije u CSS proračunskoj tablici.
   • div>
   • nav>
   •       ul>
   •          li> Početna / li>
   •          li> Zaposlenici
   •          li> Kontakt
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Dodajte veze. Ako ove stavke izbornika najviše razine također vode do vlastitih stranica, sada možete umetnuti poveznice. Veza do nepostojećeg sidra (poput "#!"), Čak i ako se ne povezuju ni s čim, pa će pokazivač korisnika izgledati drugačije. U ovom primjeru Kontakt ne vodi nikamo, ali ostale dvije stavke izbornika jesu:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Dom/ a>/ li>
   • li>a href = "/ Zaposlenici">Članovi/ a>
   • / li>
   • li>a href = "#!">Kontakt/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Stvorite podliste za padajuće stavke. Nakon stvaranja stila, ovi popisi tvore padajući izbornik. Stavite popis u stavku popisa preko koje će korisnik prijeći mišem. Dodajte atribut klase i vezu kao i prije.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Početna / a> / li>
   • li> a href = "/ Zaposlenici"> Zaposlenici / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontakt / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Prijavi problem / a> / li>
   •             li> a href = "/ support"> Korisnička podrška / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Dio 2 od 2: Pisanje CSS-a

1. Otvorite CSS tablicu stilova. Pošaljite vezu na svoju CSS tablicu stilova u odjeljak glave vašeg HTML dokumenta ako veza već nije tamo. U ovom članku nećemo pokrivati ​​osnove CSS-a, poput postavljanja fonta i boje pozadine.
2. Dodajte kôd jasnog popravka. Sjećate se da ste na popis izbornika dodali klasu "clearfix"? Elementi padajućeg izbornika obično imaju prozirnu pozadinu koja omogućuje premještanje ostalih elemenata. Jednostavna prilagodba CSS-u može riješiti ovaj problem. Evo lijepog, brzog rješenja, iako to neće raditi u Internet Exploreru 7 i starijim verzijama:
   • .clearfix: nakon {
   • sadržaj: "";
   • zaslon: tablica;
   • }
3. Stvorite osnovni dizajn. Ovim kodom možete postaviti svoj izbornik na vrh stranice i sakriti padajuće elemente. Ovo je namjerno vrlo jednostavno, tako da se možemo usredotočiti na odgovarajući kod. Kasnije ga možete izmijeniti dodatnim CSS kodom, poput popunjavanja i margine.
   • .nav-omot {
   • širina: 100%;
   • pozadina: # 008B8B;
   • }
   •  
   • .nav izbornik {
   • položaj: relativan;
   • zaslon: inline-block;
   • }
   •  
   • .sub izbornik {
   • položaj: apsolutni;
   • zaslon: nema;
   • pozadina: # 555;
   • }
4. Neka se padajuće stavke prikazuju kada zadržite pokazivač miša iznad njih. Elementi s padajućeg popisa sada su postavljeni tako da se ne prikazuju. Evo kako možete učiniti da se cijeli popis pojavi čim zadržite pokazivač iznad "roditelja":
   • .nav-menu ul li: hover> ul {
   • prikaz: blok;
   • }
   • Napomena - ako su dodatni izbornici skriveni u stavkama izbornika na padajućem izborniku, ovdje dodana svojstva primijenit će se na sve izbornike. Ako želite da se stil primijeni samo na prvu razinu padajućih izbornika, umjesto toga upotrijebite ".nav-menu> ul".
5. Strelicom označite da postoji padajući izbornik. Web dizajneri obično strelicom prema dolje pokazuju da element otvara padajući izbornik. Ovaj kod dodaje tu strelicu svakom elementu u vašem izborniku:
   • .nav izbornik> ul> li: nakon {
   • sadržaj: " 25BC"; / * pobjegao unicode za strelicu dolje * /
   • veličina slova: .5em;
   • prikaz: blok;
   • položaj: apsolutni;
   •    }
   • Napomena - Podesite položaj strelice svojstvima gornji, donji, desni ili lijevi.
   • Napomena - Ako nemaju sve stavke izbornika padajuće padajuće, nemojte mijenjati izgled cijelog navigacijskog izbornika klase. Umjesto toga dodajte svaki razred (poput padajućeg izbornika) u svaki element li gdje želite strelicu. Pogledajte tu klasu u gornjem kodu.
6. Prilagodite obloge, pozadinu i druga svojstva. Jelovnik bi sada trebao raditi, ali još nije baš lijepo. Svojstvima u CSS-u možete prilagoditi kako svaki razred ili element izgleda i gdje se nalaze.

Savjeti

• Ako obrascu želite dodati padajući izbornik, to je vrlo jednostavno u HTML5 s elementom select>.
• Veza a href = "#"> pomiče se do vrha stranice, a veza koja upućuje na nepostojeće sidro, poput href = "#!">, Ne pomiče se. Ako vam se čini previše traljavo, možete promijeniti izgled kursora pomoću CSS-a.
• Kada kopirate i zalijepite uzorak koda, uklonite sve oznake.