Обръщайте страници, използвайки статии и уроци за BookBlock за изграждане на уеб сайт на WordPress
Ръководство за това как да направите пълноекранно HTML обръщане на страница с помощта на BookBlock. Идеята е, че страниците се прелистват като в книга, а до главите се осъществява достъп през менюто в страничната лента вляво.
Получихме няколко въпроса как да използваме BookBlock на цял екран. Затова решихме да направим оформление на цял екран, да приложим BookBlock и да добавим странична лента с менюто. Ще ви покажем как да промените BookBlock и ще използваме някои опции за навигация през съдържанието.
Идеята е да навигирате през страниците, като използвате стрелки или прелиствате страниците с мишката, а менюто също се появява след щракване върху бутона. Менюто на страничната лента съдържа връзки към различни страници, служещи като съдържание. След като щракнете върху връзката в това меню, се отваря съответната страница.
Също така използваме jScrollPane, за да добавим собствена лента за превъртане, която се появява при необходимост.
Използвахме следните библиотеки и плъгини jQuery:
Нека създадем основния контейнер за всички елементи.Вътре ще поставим div-овете под страничната лента, с класа "панел-меню" и обвивката BookBlock с класа "bb-custom-wrapper". BookBlock ще съдържа обвивката (към която ще приложим приставката) и структурата, необходима за приставката. Във всяка страница ще добавим обвивката и div, необходими за нашата модифицирана лента за превъртане:
Връзките от менюто водят до съответните страници на BookBlock (bb-елемент). Добавихме също бутони със стрелки и бутон за отваряне/затваряне на менюто.
Сега е време да влезете в стилове.
Моля, имайте предвид, че тук няма да използваме префикси на доставчици, но можете да ги намерите в изходните файлове.
Ние не засягаме стиловете на самия плъгин BookBlock (можете да ги намерите във файла bookblock.css), вместо това ще се съсредоточим върху стиловете, важни за оформлението, и няколко други неща.
Първо, нека импортираме шрифта Lato от уеб шрифтовете на Google:
Елементът html трябва да е 100% висок, тъй като все още трябва да зададем височината за абсолютните елементи, които са вътре, като ги увеличим до височината на прозореца.
За оразмеряване на кутиите използваме бордюр, което ще ни позволи да зададем ширината и височината на елементите като процент, въпреки че използваме подложка, без да се притесняваме за извънгабаритни размери.
(Ние просто нулираме подложки и полета за всички елементи; ако не искате да направите това, просто нормализирайте съответните елементи)
Нека дефинираме стил на шрифта за тялото и му придадем височина 100%. Не забравяйте, че това е необходимо, защото децата ще бъдат абсолютни и с ръст 100%:
Нека дефинираме няколко стила за връзки:
Искаме основният ни контейнер да запълни целия прозорец както по височина, така и по ширина. Страничната лента ще бъде разположена извън нея, поради отрицателна лява стойност (равна на нейната ширина). Идеята е да анимирате записа в менюто, когато натиснете бутона, за да го отворите. Страничната лента ще се простира вдясно.
И така, нека приложим 100% ширина и височина към нашата основна обвивка и добавим преход за контейнера: