Vsebina

• Stopati
• 1. del 2: Pisanje HTML-ja
• 2. del 2: Pisanje CSS
• Nasveti

S spustnim menijem ustvarite jasen in hierarhičen pregled vseh pomembnih delov na strani in pododdelkov, ki jih vsebuje stran. Premaknite miško nad glavne odseke, da se prikažejo pododdelki. Spustni meni lahko ustvarite samo z uporabo HTML in CSS.

Stopati

1. del 2: Pisanje HTML-ja

1. Ustvarite svoj odsek za navigacijo. Običajno uporabljate nav> za navigacijsko vrstico po celotnem spletnem mestu, glavo> za manjše odseke povezav, ki so vezani na stran, ali div>, če se zdi, da ne ustreza nobena druga možnost. To postavite v element div>, tako da lahko prilagodite slog vsebnika in samega menija.
   • div>
   • nav>
   • / nav>
   • / div>
2. Vsakemu odseku dodelite atribut razreda. Atribut class bomo kasneje uporabili za spreminjanje sloga teh elementov s CSS. Vsebniku in meniju dodelite lastni atribut razreda.
   • div>
   • nav>
   • / nav>
   • / div>
3. Dodajte seznam elementov menija. Neurejeni seznam (ul>) vsebuje elemente glavnega menija (elementi seznama li>); če uporabnik premakne miško nad njim, vidi spustne menije. Dodajte razredu "clearfix" elementu seznama; do tega bomo prišli pozneje v preglednici CSS.
   • div>
   • nav>
   •       ul>
   •          li> Domov / li>
   •          li> Zaposleni
   •          li> Stik
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Dodaj povezave. Če ti elementi menija na najvišji ravni vodijo tudi do lastnih strani, jih lahko zdaj vstavite. Povezava do neobstoječega sidra (na primer "#!"), Tudi če se ne povežejo z ničemer, zato bo uporabnikov kazalec videti drugače. V tem primeru stik ne vodi nikamor, druga dva elementa v meniju pa:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Domov/ a>/ li>
   • li>a href = "/ Zaposleni">Osebje/ a>
   • / li>
   • li>a href = "#!">Kontakt/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Ustvarite pod sezname za spustne elemente. Ko je slog ustvarjen, so ti seznami v spustnem meniju. Seznam postavite v element seznama, ki ga bo uporabnik pomaknil z miško. Dodajte atribut razreda in povezavo, tako kot prej.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Domov / a> / li>
   • li> a href = "/ Zaposleni"> Zaposleni / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Stik / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Prijavi težavo / a> / li>
   •             li> a href = "/ support"> Podpora strankam / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

2. del 2: Pisanje CSS

1. Odprite tabelo s slogi CSS. Če povezava še ni tam, v odseku glave dokumenta HTML objavite povezavo do vašega sloga CSS. V tem članku ne bomo pokrivali osnov CSS, na primer nastavitve pisave in barve ozadja.
2. Dodajte kodo clearfix. Se spomnite, da ste na seznam menijev dodali razred "clearfix"? Elementi spustnega menija imajo običajno prozorno ozadje, ki omogoča premikanje drugih elementov. Preprosta prilagoditev CSS lahko reši to težavo. Tu je lepa, hitra rešitev, čeprav v Internet Explorerju 7 in starejših različicah ne bo delovala:
   • .clearfix: po {
   • vsebina: "";
   • zaslon: tabela;
   • }
3. Ustvari osnovno zasnovo. S to kodo lahko svoj meni postavite na vrh strani in skrijete spustne elemente. To je namenoma zelo preprosto, da se lahko osredotočimo na ustrezno kodo. Kasneje ga lahko spremenite z dodatno kodo CSS, na primer z oblazinjenjem in robom.
   • .nav-wrapper {
   • širina: 100%;
   • ozadje: # 008B8B;
   • }
   •  
   • .nav meni {
   • položaj: sorodnik;
   • zaslon: vrstni blok;
   • }
   •  
   • .sub meni {
   • položaj: absolutno;
   • zaslon: noben;
   • ozadje: # 555;
   • }
4. Spustni elementi naj se prikažejo, ko z njimi premaknete miško. Elementi na spustnem seznamu so zdaj nastavljeni tako, da niso prikazani. Tukaj je opisano, kako narediti celoten seznam, takoj ko premaknete miškin kazalec nad "nadrejeno":
   • .nav-menu ul li: hover> ul {
   • zaslon: blok;
   • }
   • Opomba - če so v menijih v spustnem meniju skriti dodatni meniji, bodo tukaj dodane lastnosti veljale za vse menije. Če želite, da slog velja samo za prvo raven spustnih menijev, namesto tega uporabite ".nav-menu> ul".
5. S puščico označite, da obstaja spustni meni. Spletni oblikovalci običajno s puščico navzdol prikažejo, da element odpre spustni meni. Ta koda doda puščico vsakemu elementu v vašem meniju:
   • .nav meni> ul> li: po {
   • vsebina: " 25BC"; / * pobegnil unicode za puščico dol * /
   • velikost pisave: .5em;
   • zaslon: blok;
   • položaj: absolutno;
   •    }
   • Opomba - Položaj puščice prilagodite z lastnostmi zgoraj, spodaj, desno ali levo.
   • Opomba - Če nimajo vsi spustni meniji vseh elementov menija, ne spreminjajte videza celotnega nav menija za razrede. Namesto tega dodajte drug razred (na primer spustni meni) vsakemu elementu li, kjer želite puščico. Glejte ta razred v zgornji kodi.
6. Prilagodite oblazinjenje, ozadje in druge lastnosti. Meni bi moral zdaj delovati, vendar še ni zelo lep. Z lastnostmi v CSS lahko prilagodite, kako izgleda vsak razred ali element in kje se nahajajo.

Nasveti

• Če želite obrazcu dodati spustni meni, je v HTML5 z elementom select> zelo enostavno.
• Povezava a href = "#"> se pomakne na vrh strani in povezava, ki kaže na neobstoječe sidro, na primer href = "#!">, Se ne pomakne. Če se vam zdi preveč površen, lahko s CSS spremenite videz kazalca.
• Ko kopirate in prilepite vzorčno kodo, odstranite vse oznake.