Странично чекмедже JQuery

В тази статия, ние ще се фокусира върху това как да се процедира, ако задачата е да се направи една странична чекмедже.

HTML маркиране ще остане почти същото - просто трябва да се движат единица бутона slide_panel и да поиска нейния клас, например, отворен (вместо параграф р бутон за да приключи всеки друг валиден маркер - Div разпростира с, и т.н. ...):

Сега "гребен" структура, това ще бъде, че е удоволствие да гледате:

За обвивка единица .slide_panel задължително посочите ширина ширината (в нашия случай, тя ще бъде равна 202px - 160px текст ширина + 20px уплътнение на дясната и лявата рамка + 2 пиксела надясно и наляво) от позиция свойства: относителни. Горе: 0; и ляво: 0; преси блока с текст към лявата страна на имота и марж-наляво: -201px; скрий го (ще се вижда само дясната рамка).

И накрая, бутон блок p.open, използвайки свойствата на позиция: абсолютна. отгоре: 10px; и ляво: 200px; позиционира вдясно от текстовото поле (което той винаги остава видима).

Сега трябва само да напишете малки JS код, който би получил на панела:

Скриване и да се покаже панелът ще използва методите превключваемите и анимиране. По подразбиране лентата с инструменти е скрита. Кога ще кликване върху бутона с помощта живата премести десния панел на 201px () половин секунда (500). Повтарящата се клика пързалки панел в обратна посока за същото време.

Ако искате да натиснете панела от дясната страна, а след това само трябва да се направят съответните промени в CSS и Js, които биха постигнали желания резултат.

Така че в заключение бих искал да спомена, че по-горе метод работи добре в IE 7-8-9, Safari, FF и Chrome.