Blog despre frumos
Plătește că este aproape întotdeauna același lucru. O excepție. probabil, un caz: atunci când meniul drop-down site-ul. De exemplu, există un buton "lecții", care indică faptul că o listă intră: "lecții photoshop", "lecții flash", "lecții 3D Max" etc. Pentru utilizator, acest meniu de pe site este foarte convenabil, dar pentru motoarele de căutare acest design va complica și încetini indexarea.
Dar lecția de astăzi va fi pe exemplul meniului, care, împreună cu restul designului, am făcut pentru un alt site. Nu pot spune încă că acest site este un alt atu în pachetul muncii mele. Dar sper că proprietarul va continua să se angajeze să-l umple și acest lucru nu va fi un alt proiect mort și voi fi mândru în timp să-mi pun mâna pe el.
Cuvintele suficiente, hai să mergem la afaceri;)
Acest cod este plasat într-o foaie de stil cascadă (CSS). Dacă tot nu știți ce este, citiți cartea "Layout bloc" din conținutul căruia veți obține o mulțime de informații utile.
#nav width: 990px;
/ * lățimea întregului meniu de navigare * /
înălțime: 50px;
/ * și, desigur, înălțimea ei * /
fundal: url (img / nav.jpg) no-repeat # 374f37;
/ * aici setăm parametrii de fundal; prescrie imediat calea către imagine, care va servi ca fundal, apoi indică faptul că această imagine nu se repetă, iar la sfârșit indică culoarea meniului, în cazul în care utilizatorul dezactivează grafica * /
font-size: 18px;
float: stânga;
/ * face blocul de meniuri pe dreapta; de fapt, meniul este întins pe întreaga lungime a site-ului și nu pare să avem nevoie de el, dar acest parametru va fi necesar pentru ca aspectul să nu fie "mash", astfel încât meniul să fie "prietenos" cu restul blocurilor * /
#nav ul marginal: 4px 0 0 25px;
/ * schimbarea acestor parametri, eu "mișcă" butoanele relative la fundal * /
listă: nu există;
#nav li afișare: inline;
/ *, astfel încât butoanele noastre să fie aliniate, nu coloana * /
#nav float: left;
/ * indică faptul că butoanele trebuie să se alinieze de la stânga la dreapta * /
afișare: bloc;
lățime: 98px;
/ * lungimea acestui "cadru" * /
înălțime: 50px;
fundal: url ("img / key.png") nu-repeta;
/ * aici tot, ca în cazul fundalului pentru meniu; care nu au înțeles, să se întoarcă puțin și să repete * /
text-align. centru;
/ * poziția textului în interiorul "cadrului" * /
text-decoration: nici unul;
/ * face textul curat, fără nici o subliniere, de care nu avem nevoie în meniul de navigare complet * /
padding: 10px 2px 10px 0px;
/ * aceste cifre pot fi folosite pentru a corecta poziția inscripției în interiorul "cadrului", dacă ceva nu ne convine: mutați-l, coborâți-l etc. * /
culoare: #FFF;
/ * culoarea etichetei atunci când butonul nu este activ * /
#nav a: poziționați poziția fundal: 0% -50px;
culoare: # 66ff66;
/ * culoarea textului atunci când cursorul este plutind * /
Asta e tot, după cum vezi, nimic complicat. Ramane doar sa spunem despre parametrul "background-position" si de ce este necesar. În general, puteți să o faceți fără ea, ci pur și simplu să prescrieți "fundalul" și calea spre imagine (sau culoarea), la care fundalul se va schimba atunci când plasați cursorul pe hartă. În acest caz, în cazul în care utilizatorul are o viteză slabă la Internet, atunci când treceți cursorul, se va efectua o frânare: la început fundalul va dispărea complet, iar atunci când noua imagine este încărcată, se va schimba la cea dorită.
Pentru a împiedica acest lucru, trebuie să desenați ambele fundaluri într-o singură imagine: cea pe care butonul va fi în starea inactivă, cea inferioară care apare atunci când plasați cursorul pe hartă. În funcție de cât de mare este butonul, specificăm câți pixeli doriți să ridicați fundalul.
Pentru a afișa meniul de pe site, trebuie să adăugați următoarea piesă în codul paginii:
Dacă faceți un șablon pentru WordPress, atunci codul ar trebui să arate astfel: