Aspectul cu două coloane este cel mai popular în design web datorită versatilității și simplității sale. Conținutul este situat într-o coloană largă, iar navigarea este într-una îngustă, numită și bară laterală în jargonul dezvoltatorilor web. Cu toate acestea, nimic nu te împiedică să faci coloane de aceeași lățime, dacă acest lucru este dictat de design. Pe fig. Figura 5.11 prezintă un aspect cu două coloane, cu navigare în dreapta și conținut în stânga.

Orez. 5.11. Aspect cu două coloane

Datorită faptului că lățimea tuturor coloanelor este cunoscută dinainte, datorită faptului că avem de-a face cu un aspect fix, există mai multe moduri de a forma coloane. Principiu general au una ca asta. Straturile cu coloane sunt plasate într-un container, să-l numim layout , pentru care sunt setate lățimea aspectului și alinierea la centru.

Vom respecta convenția conform căreia stratul barei laterale formează o bară laterală cu navigare, iar conținutul este conținutul principal al paginii (conținut).

Navigare pe stânga

Prima modalitate de a forma coloane se bazează pe poziționare. Pentru stratul de layout, setăm poziționarea relativă, iar pentru straturile interioare, poziționarea absolută. Cu această combinație de valori, puteți seta poziția elementelor în raport cu părintele folosind proprietățile din stânga și de sus (Exemplul 5.3).

Exemplul 5.3. Utilizarea poziționării

Layout ( lățime: 980px; margine: automat; poziție: relativă; /* Poziționare relativă */ ) .sidebar, .content ( poziție: absolut; ) .sidebar ( fundal: #C6DD7D; /* Culoare fundal */ lățime: 180px; /* Lățimea coloanei */ ) .conținut ( fundal: #F4ECCE; /* Culoare fundal */ stânga: 180 px; /* Schimbați la dreapta */ lățime: 800 px; /* Lățime coloană */ )

În mod implicit, proprietatea din stânga are valoarea 0, deci această proprietate nu este setată pentru bara laterală. Elementele poziționate absolut au o lățime egală cu lățimea conținutului, deci trebuie specificată o valoare a lățimii pentru fiecare strat.

Metoda de mai sus are avantajul că ordinea straturilor din cod nu joacă un rol important pentru ea. Le puteți schimba cu ușurință locurile, nu va afecta afișarea coloanelor.

Un stil mai simplu se obține prin folosirea proprietății float cu valoarea left , care este setată pentru stratul barei laterale. Dar pentru a obține nu o bară laterală simplificată, ci un fel de coloană, stratul de conținut trebuie, de asemenea, să seteze proprietatea margin-left cu o valoare egală sau mai mare decât lățimea coloanei din stânga (exemplul 5.4).

Exemplul 5.4. Folosind float

Aspect ( lățime: 980 px; margine: automat; ) .sidebar ( fundal: #C6DD7D; /* Culoare fundal */ lățime: 180 px; /* Lățime coloanei */ float: stânga; /* Wrap dreapta */ ) .content ( fundal : #F4ECCE; /* Culoare de fundal */ margin-left: 180px; /* Left margin */ )

Alternativ, puteți elimina proprietatea margin-left și puteți adăuga o proprietate de overflow la aspect cu o valoare auto sau ascuns pentru a forma coloane.

Navigare dreapta

Stilurile de mai sus pentru a crea o navigare la stânga pot fi ușor modificate pentru o navigare la dreapta. În realitate, singura diferență dintre coloane este lățimea și culoarea de fundal. Schimbând dimensiunile legate de lățime și schimbând fundalul, obținem rezultatul când navigarea este deja situată în dreapta. Exemplul 5.5 arată o modificare a codului din Exemplul 5.3.

Exemplul 5.5. Utilizarea poziționării

Aspect ( lățime: 980 px; margine: automată; poziție: relativă; ) .sidebar, .content ( poziție: absolut; ) .content ( fundal: #F4ECCE; /* Culoare fundal */ lățime: 800 px; /* Lățime coloanei */ ) .sidebar ( fundal: #C6DD7D; /* Culoare fundal */ stânga: 800 px; /* Schimbați la dreapta */ lățime: 180 px; /* Lățime coloanei */ )

La poziționare, pot apărea probleme cu impunerea subsolului (dacă există) asupra altor elemente. Această problemă este discutată în secțiunea despre modelele de cauciuc cu trei coloane.

O acțiune similară poate fi efectuată cu un exemplu în care apare proprietatea margin-left. Dar în acest caz este mai convenabil să folosiți proprietatea float cu valoarea right . De asemenea, margin-left se va schimba în margin-right (exemplul 5.6).

Exemplul 5.6. Folosind float

Aspect ( lățime: 980 px; margine: automat; ) .sidebar ( fundal: #C6DD7D; /* Culoare de fundal */ lățime: 180 px; /* Lățime coloanei */ float: dreapta; /* Wrap stânga */ ) .content ( fundal : #F4ECCE; /* Culoare de fundal */ margine-dreapta: 180px; /* Margine din dreapta */ )

Stilurile de coloane nu țin cont de unele dintre lucrurile care sunt adesea prezente pe site-urile reale. În special, marginile nu sunt specificate, astfel încât textul este la același nivel cu marginea coloanelor. Adăugarea unei proprietăți de umplutură cu o lățime dată extinde lățimea elementului, așa că trebuie să reduceți valoarea lățimii cu cantitatea de marjă sau să adăugați un element imbricat cu marjă sau umplutură.

Exemplul 5-7 se uită la codul în care navigarea este în coloana din dreapta, există și un subsol și se iau în considerare marginile.

Exemplul 5.7. Aspect cu două coloane

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. 5.12.

Orez. 5.12. Aspect cu două coloane

Pentru stratul de conținut, umplutura este activată prin proprietatea padding, dar din moment ce lățimea stratului nu este specificată, umplutura nu o va afecta în niciun fel. O listă este inserată în stratul din bara laterală, care are indentări setate în mod implicit, astfel încât să nu se „lipească” textul de marginea fundalului. Proprietatea clear este adăugată subsolului (stratul subsolului), care suprascrie efectul float . Este necesar atunci când înălțimea de navigare este mai mare decât înălțimea conținutului, astfel încât textul să nu se suprapună subsolului.

Care sunt cerințele de aspect?

• Dispoziție din cauciuc cu două coloane
• bară laterală lățime fixă ​​300px
• conținutul este întins la restul lățimii.
• subsol apăsat în jos (în acest tutorial nu voi arăta cum se face acest lucru).

Ce probleme Css apar la amenajarea unui astfel de aspect:

1 cale.

Dacă plutești blocuri, tu trebuie să-i întreb lățime fixă (nu puteți seta 1 bară laterală la 300 px și conținut la 100%). În acest caz, fie conținutul glisează în jos, fie apare o derulare orizontală de 300 px la stânga. Ei bine, principalul lucru de înțeles este că această metodă nu ni se potrivește.

2 sensuri.

Mulți tipografi oferă această metodă, la ce se gândesc?! Esența metodei este că puteți seta bara laterală să plutească cu o lățime de 300, și nu să plutească conținutul și să setați margin-left: 300px la acesta. Mod bunși totul pare să meargă atât de bine. Sincer să fiu, am crezut că acesta este cel mai bun mod, dar această metodă are propriile ei capcane. Motivele abandonării acestei metode sunt că, dacă alcătuim brusc în conținut, de exemplu, un meniu cu li float sau orice alte blocuri float și apoi vrem să le ștergem cu clear:both, atunci chenarul de jos al acestui bloc alunecă. până la nivelul marginii de jos a barei laterale (Ce și nu este ciudat, deoarece foat-ul este șters, puteți evita acest lucru dacă setați un bloc plutit la o înălțime fixă, dar nu este deloc cazul să setați o înălțime fixă).

3 căi.

Poate fi folosit pentru bara laterală poziție absolută dar numai dacă tu suntem siguri că conținutul va fi mai mare decât bara laterală în înălțimeîn caz contrar, întregul conținut al barei laterale se va potrivi pe subsol (la urma urmei, poziționarea absolută iese din fluxul general).

Dar în ceea ce mă privește, nici aceasta nu este o modalitate foarte bună!

4 moduri.

"Un mod grozav, dacă are defecte, vă rugăm să comentați. Dar cred că acesta este cel mai bun mod."

• Avantajele acestei metode: în primul rând, conținutul DOM va merge înaintea barei laterale, ceea ce este bun pentru motoarele de căutare.
• nimic nu va încadra pe subsol
• orice blocuri pot fi curățate și nimic nu va aluneca la marginea inferioară (Așa că am depășit problemele celei de-a doua metode).

În general, cum funcționează: uitați-vă la cod, primul vine conținutul urmat de bara laterală. setăm float la aceste două blocuri (desigur că bara laterală alunecă în jos). după aceea, setăm proprietatea barei laterale margin-left:-100%. grozav, a revenit la locul său și indentați conținutul cu margin-lerft:300px.

html

css

.sidebar(
lățime: 300px;
display:bloc;
plutește la stânga;
marja: 0 0 0 -100%;
}
.conţinut(
lățime minimă: 723px;
display:bloc;
plutește la stânga;
marja: 0 0 0 220px;
}

Bună ziua, astăzi vom vorbi cu dumneavoastră despre cum să vă creați propria bară de navigare pentru site. Este folosit pe aproape orice resursă de internet, așa că fiecare dezvoltator ar trebui să poată crea acest element.

Explicații pentru articol:

1. „Sidebar / sidebar” - bara de navigare a site-ului.
2. „Poziție” este o proprietate în CSS.
3. „Sus”, „stânga”, „dreapta”, „jos” sunt proprietăți de mișcare CSS.
4. WordPress este un sistem de gestionare a conținutului site-ului/CMS.
5. Webix - biblioteca UI. Vă permite să creați elemente de tabel.
6. Vizualizare este o funcție JavaScript.

Acest articol va arăta diferite căi realizarea de panouri de navigare, atat manual cat si cu ajutorul unor constructori speciali de santier. Exemplul nostru folosește WordPress.

Cum se face o bară laterală manual? CSS și HTML

Acum vom arăta modul tradițional de dezvoltare, și anume scrierea codului în editor de text. Pentru a face acest lucru, trebuie să deschideți documentele HTML și CSS într-un editor de cod.

Crearea unei bare laterale în partea dreaptă. HTML și CSS

Cel mai adesea, bara de navigare este situată fie în antetul site-ului, fie în partea dreaptă a acestuia. În al doilea caz, se utilizează de obicei un aspect cu 2 coloane.

Este bine dacă aveți un aspect gata făcut în avans, deoarece cunoașteți lățimea blocului de navigare. Dacă aspectul lipsește, atunci acest lucru nu va interfera cu dezvoltarea.

Atenţie! Când creați bare laterale și alte elemente de site, pregătiți în avans un aspect gata făcut. Concentrându-vă pe ea, veți simplifica procesul de dezvoltare.

Bara de navigare poate fi creată folosind liste și blocuri obișnuite. Dacă utilizați liste, dezactivați proprietatea „decorare text” pentru acestea.

În exemplul nostru, este folosită o construcție bloc div.

Pentru început, creăm un bloc div comun în care vor fi amplasate coloanele. Să creăm o clasă pentru aceasta, în exemplul nostru se folosește clasa de aspect, dar acest lucru nu afectează în mod special procesul de dezvoltare.

Blocul principal va fi folosit pentru a crea poziționarea și dimensionarea.

Să începem cu poziționarea. Pentru containerul general, setăm poziționarea relativă - proprietate (poziție: relativă). Pentru coloane, proprietatea (poziție: absolută) este setată.

Când utilizați acest tip, vă va fi mai ușor să poziționați coloanele în interiorul blocului. Pentru a face acest lucru, vom folosi proprietățile deplasării: , , și .

În exemplul nostru, codul arată astfel:

HTML

Copie

css

aspect (

poziție: relativă;

fundal: rgba(119, 115, 115, 0,58);

}

Bară laterală , .conținut (poziție: absolut ; )

bara laterala(

fundal: #C6DD7D;

Conţinut(

fundal: #F4ECCE;

Copie

Atenţie! Asigurați-vă că specificați o lățime pentru fiecare element de navigare individual. Cert este că au poziționare absolută, ceea ce înseamnă că lățimea lor va fi egală cu lățimea conținutului interior.

De asemenea, dorim să remarcăm că în , a doua coloană este plasată prima, iar apoi prima. Folosind aceasta metoda nu contează, deoarece coloanele pot fi schimbate cu ușurință.

Puteți utiliza și proprietatea float pentru asta. Această metodă este mult mai simplă deoarece se bazează pe împachetarea elementelor. Datorită lui, sidebat-ul nostru va fi localizat cu partea dreapta.

Crearea unei bare de navigare în partea dreaptă. HTML și CSS

Pentru a crea un astfel de panou, puteți utiliza același marcaj ca în primul exemplu. Codul CSS, de asemenea, nu trebuie schimbat prea mult.

Trebuie să faceți mici ajustări la codul dvs. CSS. Acest lucru este necesar pentru ca meniul să fie situat în partea dreaptă. Nu modificăm proprietățile de lățime și poziție!

Cum se creează o bară laterală în WordPress?

Acum să ne uităm la o metodă care este foarte diferită de cea anterioară. Diferența este că puteți crea o navigare mai bună cu puțin sau deloc cod CSS sau HTML.

Nu va trebui să scrieți manual tot codul, toată munca va avea loc în constructorul însuși.

Când utilizați WordPress, va trebui să înregistrați o bară de navigare și să adăugați câteva widget-uri.

Pentru a înregistra o bară laterală în WordPress, va trebui să scrieți câteva funcții în fișiere PHP. Practic, veți avea nevoie de matrice de date care se vor referi la widget-uri și etichetele lor div.

În exemplul nostru, este luată în considerare bara laterală din dreapta, precum și bara laterală a subsolului.

Câteva cuvinte despre webix

Există un alt cadru special care vă va permite să creați această bară laterală. Principalul său avantaj este că vă permite să faceți un tablou de bord bun cu doar câteva linii de cod.

Mai întâi trebuie să descărcați acest cadru. După aceea, furnizați link-uri către stilurile și scripturile sale în documentul HTML.

După aceea, puteți începe să creați bara laterală. Pentru a-l plasa în cadru, există o funcție specială - vizualizare. Care va plasa pentru amplasarea elementelor.

Dezavantajul acestui cadru sunt limitările sale. Când îl utilizați, nu veți putea crea o creație cu adevărat unică, deoarece panoul nu este limitat de imaginația dvs., ci doar de câteva funcții.

Concluzie

În acest articol, am acoperit câteva modalități de bază de a crea o bară de navigare, dar există multe altele. Puteți chiar să veniți cu propriul drum pe baza experienței noastre.

În aceste exemple, a fost afișată o bară de navigare simplă. Daca lucrezi putin cod sursa, atunci poți obține o adevărată capodoperă.

Etichete:

Un bloc flotant (sau cum se mai numește și în mișcare, fix, blocat) este necesar pe site, astfel încât utilizatorul să vadă un element fix atunci când derulează pagina, în care este plasată cel mai adesea publicitate (teasere, bannere sau context).

Din păcate, regulile adsense ne interzic acest lucru. Cu toate acestea, mulți proprietari de site-uri ignoră regulile pe propriul risc. Poate că nici măcar nu sunt pedepsiți pentru asta, dar nu aș sfătui să-și asume riscuri.

Îmi plasez teaserele/bannerele în astfel de blocuri, iar uneori, în loc să fac reclamă, le afișez acolo postări asemănatoare sau câteva informații utile pentru vizitator.

Să vă spunem cum puteți face un bloc flotant pe site-ul dvs.

Sarcină: faceți ultimul bloc din bara laterală (bara laterală) să plutească. Mai mult, astfel încât să se lipească doar în momentul în care utilizatorul ajunge la el prin defilare, și nu imediat când pagina este deschisă. De asemenea, blocul ar trebui să se „lipească”, ajungând la subsol (adică să nu se suprapună).

Cel mai funcțional mod

Există multe implementări ale blocului sticky, dar nu toate funcționează corect. voi spune de la experienta personala: Aceeași metodă de instalare a unui bloc poate funcționa pe un site, dar pe altul apar niște stâlpi.

Mai jos este un exemplu de bloc plutitor care a funcționat pe aproape fiecare site pe care l-am instalat. Nu erau capre. Nici motorul nu este important (DLE, WordPress, LiveStreet etc.).

Lipiți următorul cod HTML în locația dorită a barei laterale:

$(fereastră).scroll(funcție() (
var sb_m = 20 ; /* umplutură de sus și de jos */
var mb = 300 ; /* înălțimea subsolului cu margine */
varst = $(window).scrollTop() ;
var sb = $(".sticky-block" );
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.înălțime () ;

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop": h) );
}
altceva(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

În acest cod, puteți seta partea de sus, de jos și înălțimea subsolului dvs., de ex. înălțimea la care ar trebui să se oprească blocul.

Acum includem JS. Pentru a face acest lucru, scrieți în secțiunea HEAD:

Puteți folosi fișierul header.php însuși prin includerea acestui cod între etichetele head de deschidere și închidere și împachetându-l în etichete de script, astfel:

De asemenea, puteți scrie acest cod în etichete de script oriunde altundeva. Principalul lucru este că se încarcă în paginile potrivite ale blogului. De exemplu, puteți în footer.php înainte de eticheta body de închidere.

Acum să trecem direct la acest cod. Rezultă că după 10 pixeli de sus, poziționarea relativă este înlocuită cu una fixă ​​(vezi articolul de la linkul de mai sus). Dacă este necesar, în linie cu else, puteți alege o altă valoare decât zero pentru partea de sus, iar apoi meniul fixat în partea de sus va indenta din marginea superioară a ferestrei de vizualizare cu această valoare a pixelului (în opinia mea, acest lucru este de prisos) .

Spre deosebire de codul original, a trebuit să adaug și lățime: „100%”, pentru că altfel scădea dimensiunea meniului în lățime, ceea ce a stricat întreaga imagine.

Uite, pentru claritate, voi da codul HTML care formează meniul de sus în șablonul meu de blog WordPress (se află în fișierul meu header.php din ):

În șablonul dvs., cel mai probabil, rezultatul elementelor de meniu va fi setat folosind, de exemplu, o astfel de construcție (funcție), dar nu acesta este ideea.

Funcția wp_list_pages este, desigur, bună (vă permite să configurați sortarea, să setați excepții etc.), dar este mai bine să faceți totul manual prin HTML simplu, așa cum se arată mai sus. DIN PUNCTUL MEU DE VEDERE.

Este important să înțelegem aici că întreaga chestiune este încheiată în containere divs, și cel mai de sus are un atribut id="navi". Aici ne vom agăța de el. Vedeți în codul JS de mai sus că apare de două ori #navi? Va trebui să vă puneți ID-ul acolo în loc de #navi (sau o clasă, care, după cum vă amintiți, este scrisă nu printr-un hash, ci printr-un punct, de exemplu, astfel: .menu).

După aceea, meniul dvs. ar trebui să fie fixat în poziția de sus atunci când derulați pagina cu un anumit număr de pixeli. Cu toate acestea, am avut o problemă cu faptul că chiar acest meniu nu a apărut întotdeauna deasupra elementelor paginii peste care plutea.

Asta, vezi tu, nu este bine. Prin urmare, a trebuit să intru puțin în codul CSS și să adaug cu o valoare de 1000 pentru id-ul selectorului #navi:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

Faptul este că atunci când setați unul dintre cele trei tipuri de poziționare folosind Poziție, acest element încetează să interacționeze cu elementele obișnuite ale codului HTML. Dar cu alte poziții similare, va concura pentru poziția „de sus sau dedesubt”. z-index:1000 ne permite să plasăm meniul în mod evident deasupra tuturor celorlalte blocuri. Citiți articolul de mai sus pentru detalii.

Cum să faci o bară laterală plutitoare în WordPress fără pluginuri

Folosind metoda descrisă mai jos, puteți face ca întreaga bară laterală, sau o parte din ea, să plutească (sau, cu alte cuvinte, să fixați într-un anumit loc în fereastra de vizualizare). Dacă această zonă este destul de mică și se potrivește pe un singur ecran (chiar și pe un dispozitiv portabil), atunci puteți face ca totul să plutească.

Dar cel mai adesea acest lucru nu va fi cazul și va fi posibil să forțați partea inferioară să plutească. Dacă bara laterală, ca și în cazul meu, este un monolit inseparabil, atunci puteți crea singur un bloc plutitor folosind principiile stabilite în tema de design pe care o utilizați și să-l plasați sub cea principală.

Am făcut toate acestea rapid și fără să mă deranjez cu adevărat cu bibelouri și să găsesc soluția optimă, pentru că din experiența mea bogată de experimente am învățat tiparul că, cu cât îți pui mai multe speranțe într-o idee, cu atât este mai puțin probabil să „împușești”. Ei bine, invers. În general, nu avea niciun rost să ne deranjezi încă, deoarece probabilitatea ca toate acestea să prindă rădăcini nu este atât de mare.

Așa că doar am luat pentru a crea blocul de jos Am mutat partea de sus a barei mele laterale principale (în șablonul sidebar.php), apoi am mutat-o ​​din partea de sus în partea de jos a blocului „Îl folosesc pentru a face bani”, iar la sfârșit am blocat ceea ce era sfârșitul în blocul principal. bloc. S-a dovedit ceva de genul:

Ei bine, acum am blocul „Folosesc pentru câștiguri” mutat din blocul de sus al barei laterale în cel de jos. S-a dovedit că nu o fântână, dar pentru un „temporar” va fi. Rămâne doar să aranjați toate acestea într-un fișier JS cu cod și blocul inferior va începe să plutească. Codul JS arată astfel:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() (var top = $(document).scrollTop(); if (sus< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((sus: "52px", poziție: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Rețineți că, în loc de .sidebar123 , trebuie să înlocuiți clasa sau ID-ul containerului exterior în care se află blocul inferior al barei laterale.

Nu înțeleg foarte bine acest cod (nu știu JS), dar totul funcționează. Cel puțin parțial. Când setați poziționarea fixă, raportul este din punctul din stânga sus. Prin urmare, cu marginLeft: „760px” plasez acest bloc exact la nivelul barei laterale (numărul a fost obținut prin „probă și eroare”).

Valoarea top: „52px” stabilește umplutura blocului barei laterale deja plutitoare de la marginea de sus. Valoarea de top Cu toate acestea, am a fost o problemăîn cazul în care înălțimea totală a barei laterale principale a fost mai mică decât înălțimea zonei de conținut. Așa ceva a ieșit, de exemplu, la vizualizarea arhivei de titluri:

Din punct de vedere CSS, înțeleg de ce se întâmplă acest lucru, dar mi-a fost prea lene să mă gândesc la o remediere. A trebuit doar să refuz să arăt acest bloc de bară laterală plutitoare pe astfel de pagini (nu este necesar acolo).