jquery sertar lateral

În acest articol, ne vom concentra pe modul de a proceda, în cazul în care sarcina este de a face un sertar lateral.

Markup HTML va rămâne aproape la fel - doar nevoie pentru a muta unitatea butonul slide_panel și cere clasa ei, de exemplu, deschis (în locul unui buton paragraf p să-și încheie orice altă etichetă valid - div care se întind pe o, etc ...):

Acum, „pieptene“, structura, care ar fi a fost o placere sa ma uit:

Pentru ca unitatea înveliș .slide_panel specifica în mod necesar lățimea lățime (în cazul nostru, acesta va fi egal 202px - 160px lățime de text + 20px padding la dreapta și la stânga cadru + 2px dreapta și la stânga), printr-o poziție de proprietăți: relative;. top: 0; și stânga: 0; apasă blocul cu text în partea stângă a proprietății și margin-left: -201px; ascunde (va fi vizibilă numai cadrul din dreapta).

În cele din urmă, un buton p.open bloc, utilizând proprietățile de poziție: absolută;. top: 10px; și a plecat: 200px; poziționarea în dreapta casetei de text (care a rămas întotdeauna vizibil).

Acum trebuie doar să scrie un cod js mic, care ar fi câștigat panoul:

Ascunde și arată panoul va fi folosind metodele de comutare și anima. În mod implicit, bara de instrumente este ascunsă. Când se va-clic pe butonul cu ajutorul insufletite muta panoul din dreapta la 201px () o jumătate de secundă (500). Repetată slide-uri pe panoul de clică în direcția opusă, în același timp.

Dacă doriți să apăsați pe panoul din partea dreaptă, atunci trebuie doar pentru a face modificările corespunzătoare în css și js, care ar obține rezultatul dorit.

Deci, în concluzie, aș dori să menționez că metoda de mai sus funcționează bine în IE 7-8-9, Safari, FF și Chrome.