- Регистрация
- 16 Дек 2015
- Сообщения
- 1,737
- Лучшие ответы
- 0
- Репутация
- 499
PHP:
<div id='user_navigation' class='logged_in'><ul class='ipsList_inline'>
PHP:
<li class="right"><main class="cd-main-content"><a href="#0" class="cd-btn">Правила</a></main></li>
PHP:
</body>
PHP:
<div class="cd-panel from-right"><header class="cd-panel-header"><h1>Прочитать внимательно</h1><a href="#0" class="cd-panel-close">Закрыть</a> <script>jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ event.preventDefault(); $('.cd-panel').addClass('is-visible'); }); //clode the lateral panel $('.cd-panel').on('click', function(event){ if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { $('.cd-panel').removeClass('is-visible'); event.preventDefault(); } });});</script></header><div class="cd-panel-container"><div class="cd-panel-content"><p>1. Ваши правила</br>2. Ваши правила.</br>3. Ваши правила</br>4. Ваши правила!</br>5. Ваши правила.</br>6. Ваши правила.</br>7. Ваши правила.</br>8. Ваши правила.</br>9. Ваши правила</br>10. Ваши правила</br>11. Ваши правила!</br>12. Ваши правила.</br>13. Ваши правила</br>14. Ваши правила.</p></div></div></div>Название: cd-main-content.
PHP:
.cd-main-content h1 { font-size: 20px; font-size: 1.25rem; color: #64788c; padding: 4em 0;}.cd-main-content .cd-btn {position: relative;display: inline-block;color: #fff;font-weight: 700;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;border-right: 1px solid #516E86;}.no-touch .cd-main-content .cd-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);}@media only screen and (min-width: 1170px) { .cd-main-content h1 { font-size: 32px; font-size: 2rem; }}.cd-panel { position: fixed; top: 0; left: 0; height: 100%; width: 100%; visibility: hidden; -webkit-transition: visibility 0s 0.6s; -moz-transition: visibility 0s 0.6s; transition: visibility 0s 0.6s;}.cd-panel::after { /* overlay layer */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; -webkit-transition: background 0.3s 0.3s; -moz-transition: background 0.3s 0.3s; transition: background 0.3s 0.3s;}.cd-panel.is-visible {visibility: visible;-webkit-transition: visibility 0s 0s;-moz-transition: visibility 0s 0s;transition: visibility 0s 0s;background: rgba(0, 0, 0, 0.41);}.cd-panel.is-visible::after { background: rgba(0, 0, 0, 0.6); -webkit-transition: background 0.3s 0s; -moz-transition: background 0.3s 0s; transition: background 0.3s 0s;}.cd-panel.is-visible .cd-panel-close::before { -webkit-animation: cd-close-1 0.6s 0.3s; -moz-animation: cd-close-1 0.6s 0.3s; animation: cd-close-1 0.6s 0.3s;}.cd-panel.is-visible .cd-panel-close::after { -webkit-animation: cd-close-2 0.6s 0.3s; -moz-animation: cd-close-2 0.6s 0.3s; animation: cd-close-2 0.6s 0.3s;}@-webkit-keyframes cd-close-1 { 0%, 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(45deg); }}@-moz-keyframes cd-close-1 { 0%, 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(45deg); }}@keyframes cd-close-1 { 0%, 50% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }}@-webkit-keyframes cd-close-2 { 0%, 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(-45deg); }}@-moz-keyframes cd-close-2 { 0%, 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(-45deg); }}@keyframes cd-close-2 { 0%, 50% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }}.cd-panel-header { position: fixed; width: 90%; height: 50px; line-height: 50px; background: rgba(255, 255, 255, 0.96); z-index: 2; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); -webkit-transition: top 0.3s 0s; -moz-transition: top 0.3s 0s; transition: top 0.3s 0s;}.cd-panel-header h1 {color: #af2b35;font-size: 22px;padding-left: 5%;font-weight: 300;font-family: 'Helveticaneue','Open Sans','Yanone Kaffeesatz',"Trebuchet MS",Arial,Helvetica,sans-serif;}.from-right .cd-panel-header, .from-left .cd-panel-header { top: -50px;}.from-right .cd-panel-header { right: 0;}.from-left .cd-panel-header { left: 0;}.is-visible .cd-panel-header { top: 0; -webkit-transition: top 0.3s 0.3s; -moz-transition: top 0.3s 0.3s; transition: top 0.3s 0.3s;}@media only screen and (min-width: 768px) { .cd-panel-header { width: 70%; }}@media only screen and (min-width: 1170px) { .cd-panel-header { width: 50%; }}.cd-panel-close { position: absolute; top: 0; right: 0; height: 100%; width: 60px; /* image replacement */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap;}.cd-panel-close::before, .cd-panel-close::after { position: absolute;content: ''; top: 22px; left: 20px; height: 3px; width: 20px; background-color: #424f5c; -webkit-backface-visibility: hidden; backface-visibility: hidden;}.cd-panel-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.cd-panel-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}.no-touch .cd-panel-close:hover { background-color: #424f5c;}.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after { background-color: #ffffff; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s;}.no-touch .cd-panel-close:hover::before { -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -ms-transform: rotate(220deg); -o-transform: rotate(220deg); transform: rotate(220deg);}.no-touch .cd-panel-close:hover::after { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}.cd-panel-container { position: fixed; width: 90%; height: 100%; top: 0; background: #EBEBEB; z-index: 1; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s;}.from-right .cd-panel-container { right: 0; -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}.from-left .cd-panel-container { left: 0; -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}.is-visible .cd-panel-container { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s;}@media only screen and (min-width: 768px) { .cd-panel-container { width: 70%; }}@media only screen and (min-width: 1170px) { .cd-panel-container { width: 50%; }}.cd-panel-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 70px 5%; overflow: auto; /* smooth scrolling on touch devices */ -webkit-overflow-scrolling: touch;}.cd-panel-content p { font-size: 14px; font-size: 0.875rem; color: #424f5c; line-height: 1.4; margin: 2em 0;}.cd-panel-content p:first-of-type { margin-top: 0;}@media only screen and (min-width: 768px) { .cd-panel-content p { font-size: 16px; font-size: 1rem; line-height: 1.6; }}