Выдвигающаяся панель для сайта
Реализация выдвигающейся панели на CSS3 и jQuery
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<main class="cd-main-content"> <!-- your main content here --> </main> <div class="cd-panel from-right"> <header class="cd-panel-header"> <h1>Title Goes Here</h1> <a href="#0" class="cd-panel-close">Close</a> </header> <div class="cd-panel-container"> <div class="cd-panel-content"> <!-- your side content here --> </div> <!-- cd-panel-content --> </div> <!-- cd-panel-container --> </div> <!-- cd-panel --> |
2. Добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.cd-panel { /*...*/ visibility: hidden; transition: visibility 0s 0.6s; } .cd-panel.is-visible { visibility: visible; transition: visibility 0s 0s; } .cd-panel-header { /*...*/ position: fixed; top: -50px; width: 90%; height: 50px; transition: top 0.3s 0s; } .is-visible .cd-panel-header { top: 0; transition: top 0.3s 0.3s; } .cd-panel-container { /*...*/ position: fixed; width: 90%; height: 100%; top: 0; right: 0; transition-property: transform; transition-duration: 0.3s; transition-delay: 0.3s; transform: translate3d(100%, 0, 0); } .is-visible .cd-panel-container { transform: translate3d(0, 0, 0); transition-delay: 0s; } |
3. Подключаем javascript и библиотеку jQuery
|
1 2 |
<script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery --> |
Готово!
