Shtëpi › Hipotekë › Si do të qetësohet. Çfarë ju nevojitet për të rritur biznesin tuaj nga e para. Automatizimi i promovimit në rrjetet sociale

Si do të qetësohet. Çfarë ju nevojitet për të rritur biznesin tuaj nga e para. Automatizimi i promovimit në rrjetet sociale

Lundrimi është i pranishëm në çdo faqe interneti të mirë, edhe nëse është një faqe. Në varësi të situatës, lidhjet e navigimit mund të çojnë në seksione të ndryshme të faqes ose të dërgojnë në një faqeshënues (ankorim) të vendosur në faqen aktuale. Hartimi kompetent lundrimi në të cilin përdoruesi nuk ngatërrohet kërkon njohuri dhe përvojë të caktuar. Dizajni i shiritit të navigimit gjithashtu duhet të bëhet me mençuri, dhe në këtë tutorial ne do t'ju tregojmë se si të krijoni një menu navigimi miqësore për përdoruesit.

Krijimi i navigimit

Çfarë është navigimi? Ky është një koleksion lidhjesh, shpesh të renditura dhe të grupuara sipas kuptimit. Një menu navigimi krijohet shpesh duke përdorur një etiketë të listës HTML

përmban një lidhje . Në HTML5, u prezantua një etiketë e veçantë për lundrim
, ku thjesht mund të vendosni etiketat e lidhjeve. Pasi të keni krijuar kornizën HTML, mund të kaloni në stilimin e tij me CSS, ku mund të përcaktoni se si menuja juaj do të jetë vertikale, horizontale, me rënie, etj.

Le të themi se kemi një navigim të thjeshtë me pesë lidhje, të krijuara në HTML bazuar në një listë me pika:
- Shtëpi
- Rreth
- Galeria
- Lajme
- Kontaktet
Fillimisht, pa stile, navigimi ynë duket si një listë e rregullt:

Për ta bërë këtë element më shumë si një shirit navigimi, duhet të ndërmerrni disa hapa të kërkuar. Së pari, shënuesit nuk nevojiten pranë artikujve të menusë dhe së dyti, vlerat standarde të marzhit dhe mbushjes të vendosura nga shfletuesi për listën mund të ndërhyjnë, kështu që ne i rivendosim ato në zero. Rezultati është si më poshtë:
Menuja (lloji i stilit të listës: asnjë; margjina: 0; mbushja: 0; )

Në thelb, skedari i rivendosjes së stilit kryen veprime identike në lidhje me listat Rivendos.css, prandaj, nëse e përdorni në faqen tuaj, atëherë kodi i mësipërm nuk ka nevojë të shkruhet.

Pas rivendosjes së stileve standarde të listës, mund të vazhdoni drejtpërdrejt në krijimin e stileve për navigim. Ne do t'ju tregojmë se si të bëni panele vertikale dhe horizontale.

Menu vertikale

Krijimi i një shiriti navigimi vertikal konsiderohet më i lehtë sesa krijimi i një menuje horizontale. Kryesisht sepse nuk ka nevojë të vendosni lidhjet të jenë horizontale. Kjo është thjesht një listë vertikale e faqeve në një faqe. Megjithatë, disa stile të rëndësishme do të duhet të aplikohen.

Blloko lidhjet
Para së gjithash ju duhet të bëni të gjitha etiketat Elementet e bllokut:
Menyja a ( shfaqja: bllok; )
Ka disa arsye për këtë:

Gjerësia e menysë

Gjëja tjetër që duhet të bëjmë është të vendosim gjerësinë e menusë. Nëse nuk e keni paracaktuar gjerësinë e shiritit të navigimit dhe nuk është në një kontejner që e kufizon atë, atëherë menyja do të shtrihet në të gjithë gjerësinë e dritares (si në shembullin tonë më lart) - sepse kështu është një element blloku sillet si parazgjedhje. Ju mund të vendosni gjerësinë e kërkuar për elementin .menu, për shembull:
Menuja (gjerësia: 300 px; )
Në vend të kësaj, mund të vendosni gjerësinë për artikujt
ose për lidhjet - vizualisht efekti mund të jetë i njëjtë, por kini parasysh se në këtë rast gjerësia e elementit .menu do të mbetet ende 100%.

Ndarja e artikujve

Për të ndarë vizualisht artikujt e menusë, mund t'i jepni secilit prej tyre një kufi të poshtëm ose të sipërm. Në varësi të asaj që përdorni, do të keni një kufi që mungon në krye ose në fund të menysë. Kjo mund të rregullohet duke shtuar një kufi tjetër në vetë bllokun .menu:
Menyja a (kufitare-lart: 1px blu e fortë;)
Lartësia e pikës dhe shtrirja vertikale

Aktualisht, lidhjet e menysë duken shumë të ulëta dhe shumë afër njëra-tjetrës. Nëse teksti i secilës lidhje nuk zë më shumë se një rresht, atëherë mund të rrisni lartësinë e tyre dhe ta mbani tekstin në qendër vertikalisht duke përdorur vetitë lartësi dhe lartësi rresht:
Menyja a ( lartësia: 30 px; lartësia e rreshtit: 30 px; ) GIF
Siç mund ta shihni në animacion, vetia lartësi ndikon në lartësinë e lidhjes dhe ndarja e linjës lartësi-lartësi ndryshon lartësinë e vetë rreshtit të tekstit. Sigurohuni që të vendosni të njëjtat vlera për këto dy veti nëse dëshironi që teksti i lidhjes të jetë i përqendruar vertikalisht.

Menuja horizontale

Detyra kryesore kur krijoni navigacion horizontal është të rregulloni artikujt e menusë në një rresht. Kjo mund të bëhet në disa mënyra.

Metoda e parë

Opsioni i parë është të vendosni vetinë e shfaqjes së artikujve të listës me vlerën inline ose inline-block:
Menuja (ekrani: inline; )
Në të njëjtën kohë, etiketat brenda
nuk mund të bëhet bllok, përndryshe artikujt nuk do të rreshtohen më horizontalisht dhe do të kthehen në një pozicion vertikal. Lidhjet gjithashtu mund të vendosen në inline ose inline-block. Zgjidhni këtë të fundit nëse planifikoni të futni lidhjet në të ardhmen.

Pas kësaj, mund të filloni të krijoni lidhje. Për shembull, ju mund të bëni këtë stil:
Menyja a (dekorimi i tekstit: asnjë; font-familja: sans-serif; ngjyra: #5757a0; ekrani: blloku inline; mbushja: 10 pikselë 20 px; ngjyra e sfondit: livando; kufiri i poshtëm: 5 px solid #5757a0; )
Ne shtuam një ngjyrë sfondi dhe një kufi të poshtëm në secilën lidhje dhe rritëm madhësinë e saj duke përdorur mbushjen. Vini re se ka boshllëqe të vogla midis artikujve të menusë, megjithëse nuk i kemi shtuar ato nëpërmjet stileve. Ato ndodhin sepse shfletuesi interpreton karakterin e kthimit të transportit midis etiketave mbyllëse dhe hapëse në këtë mënyrë.
. Këto boshllëqe mund të hiqen duke shkruar kodin HTML të listës në një rresht:
- Shtëpi
- Rreth
- Galeria
Sidoqoftë, kjo është e papërshtatshme, sepse këto ndryshime do të duhet të bëhen me dorë në HTML dhe kodi do të jetë i vështirë për t'u lexuar. Prandaj, mund të përpiqeni të heqni qafe boshllëqet duke përdorur vlerë negative margin-djathtas:
Meny li (diferencë-djathtas: -5 px;)
Ky kod nuk i heq boshllëqet, por i mbulon ato duke i zhvendosur elementët pesë piksel majtas. Kjo metodë nuk mund të thuhet se është shumë e besueshme, sepse madhësia e hendekut mund të ndryshojë në varësi të stileve të tjera.

Nëse hapësirat midis pikave nuk janë planifikuar në dizajnin tuaj, është më mirë të përdorni metodën e dytë të shtrirjes horizontale të elementeve.

Metoda dy

Mund ta keni marrë me mend tashmë se opsioni i dytë për krijimin e një menuje horizontale është përdorimi i vetive float. Për ta bërë këtë, shtoni një stil për etiketat
:
Menu li (lundrues: majtas; )
Siç mund ta shihni, nuk ka më boshllëqe midis pikave. Të gjitha stilet e tjera funksionojnë si më parë. Por nëse shtoni një element tjetër HTML pas navigimit (le të themi
), atëherë do të ndikohet nga mbështjellja dhe do të përafrohet me artikujt e menysë. Ju mund ta anuloni këtë veprim duke shtuar në kokë veçorinë clear: left. Por kur zhvillon një sajt me shumë faqe të ndryshme, mund të bëhet e vështirë të mbash gjurmët nëse ke harruar ta specifikosh diku këtë pronë. Është shumë më e lehtë të zhbësh mbështjelljen në anën e lundrimit. Kjo hyrje do të ndihmojë me këtë:
Menuja (mbushje: e fshehur;)
Kjo gjithashtu do të ndihmojë në kthimin e prindërve të elementëve të notuar në lartësinë e tyre normale. Ne kemi folur tashmë për këtë problem në mësimet e mëparshme, por më pas e zgjidhëm atë përmes një hak të veçantë duke përdorur pseudo-elementin:after . Shembulli i mësipërm është një mënyrë tjetër për të zgjidhur problemin me lartësinë e munguar të kontejnerit.
Shënim: nëse vendosni një sfond për një element .menu, atëherë nuk do ta shihni derisa të aplikoni overflow: fshehur në të. Logjike, sepse si mund ta shihni sfondin e një elementi lartësia e të cilit është zero?

Në mësimin tjetër do të flasim më në detaje për aftësitë e përzgjedhësve të atributeve, me të cilët mund të vendosni

Në punën e tij, ai i kushtoi shumë kohë zhvillimit lloje të ndryshme navigimi për faqet, si duke përdorur ashtu edhe duke përdorur stilin e pastër 3 pa imazhe shtesë dhe javascript. Vendosa të bashkoj të gjitha zhvillimet mbi temën dhe t'i postoj si një lloj koleksioni mësimesh për krijimin e navigimit. Rishikimi paraqet lloje të ndryshme, në stil dhe funksionalitet, shumënivelësh me nënmenu rënëse, në stilin popullor “fizarmonikë”, vertikale dhe horizontale me efekte dinamike, të thjeshta dhe komplekse në strukturë.
Bazuar në këto mësime, bazuar në shembujt e dhënë, duke eksperimentuar dhe duke përdorur pak imagjinatë, ju lehtë mund ta bëni faqen tuaj të internetit të dallohet nga turma, spektakolare dhe të paharrueshme.
✓ Duke klikuar mbi titull, do të çoheni drejtpërdrejt në një faqe me një përshkrim të detajuar të të gjithë procesit dhe duke klikuar në foto, do të shkoni në një faqe me një shembull se si funksionon menyja që keni zgjedhur. ツ
1.
Kjo meny e mahnitshme u krijua duke përdorur stile dhe veçori të pastra CSS3, pa asnjë skedar imazhi shtesë ose javascript. Me shfletuesit modernë që mbështesin standardet e reja CSS3, është bërë e mundur të përdoren të gjitha vetitë magjike të magjisë CSS3 në hartimin e faqeve të internetit. Duke vënë në praktikë këtë teknikë të krijimit të menusë, mund të arrini rezultate të mahnitshme.
2.
Në këtë tutorial, do të mësoni se si të përdorni stilet dhe vetitë e reja CSS3, pa përdorur javascript ose imazhe, mund të krijoni një menu të shkëlqyer, funksionale dhe të shpejtë të stilit fizarmonikë.
3.
Një tutorial i detajuar për krijimin e një menuje të bukur të stilit fizarmonikë duke përdorur CSS dhe jQuery. Menuja është testuar dhe funksionon shkëlqyeshëm në të gjithë shfletuesit modernë. Përdorimi i funksionit të gradientit linear css3 në dizajn e bën këtë meny më ekspresive dhe dinamike.
4.
Mësimi paraqet të gjithë procesin e krijimit të një menuje interesante, vertikale për një faqe interneti, e ndërtuar tërësisht në përdorimin e CSS dhe një skedari të vogël imazhi, të cilin mund ta modifikoni lehtësisht për t'iu përshtatur nevojave tuaja nëse dëshironi.
5.
Si vazhdim i mësimit të mëparshëm, shtuar përshkrim i detajuar opsioni për të krijuar një menu vertikale me nën-artikuj të ndërthurur
6.
Një mësim i vogël, por në të njëjtën kohë i detajuar për krijimin e një cilësie të lartë, me një sasi të vogël kodi HTML, CSS dhe JavaScript, me një ndërfaqe të bukur, një bllok navigimi në stilin "Fizarmonikë".
7.
Një zgjidhje tjetër interesante për sa i përket krijimit të një menuje navigimi me shumë nivele duke përdorur jQuery. Pajtueshmëria ndër-shfletuese e produktit përfundimtar, animacioni JQuery dhe gradienti CSS3 e bëjnë bllokun e navigimit edhe më tërheqës.
8.
Më pëlqen zgjidhja e të pasurit meny të sillen si me zbritje. Zejtarët shpesh përdorin JavaScript për të arritur këtë efekt, por ky tutorial tregon se si të arrini atë që dëshironi duke përdorur vetëm stile dhe funksione të pastra CSS.
9.
Në këtë tutorial, do të mësoni se si të krijoni një menu të bukur me nën-artikuj që lëshohen poshtë. Ajo që tërheq vëmendjen është zgjidhja jo standarde për shfaqjen e nënmenysë, jo si zakonisht, pikërisht poshtë artikujve të menysë kryesore, por elementët e nënmenusë janë rreshtuar në të majtë, me ekran direkt nën shiritin e navigimit.
10.
Përkthimi dhe versioni i përshtatur i mësimit për krijimin e një menuje të bukur, horizontale në stilin "Lava-Lamp" Ka shumë versione të menuve të bëra në këtë stil në internet, bazuar në njohuritë e marra nga mësimi, mund të krijoni lirisht. diçka tuajën.
Kjo është e gjitha për momentin. Ky koleksion paraqet vetëm një pjesë të vogël të asaj që mund të bëhet në drejtim të krijimit të menuve të bukura dhe individuale, dhe më e rëndësishmja, funksionale navigimi për projektet tuaja. Shpresoj që dikush të gjejë një opsion të përshtatshëm për veten e tij dhe ta përdorë atë në punën e tij për përmirësimin e faqes. Nëse dikujt i pëlqeu artikulli, komentoni, ndajeni me miqtë përmes Twitter, Google+ dhe rrjeteve të tjera sociale. shërbime, ose thjesht mund të shënoni artikullin

Menuja horizontaleështë një listë e seksioneve të faqes në internet, kështu që është më logjike ta shënoni brenda elementit