Sliding panel jQuery (Выезжающая панель слева или справа)
Дата публикации 26/09/13 - 13:44
Копался в интернете и нашел очень интересный эффект, возможно, уже банальный - это выезжающая панель с меню (Справа или слева в CSS настраивается). Для этого меню нам нужна будет сама библиотека jQuery, желательно версии 1.3.2. В архиве в конце статьи прикреплен файл, в котором есть сама библиотека jQuery 1.3.2. Итак, приступим к построению нашей выезжающей панели!
Разделим наш урок на 3 этапа:
- HTML разметка
- CSS стили
- Подключение js скриптов
HTML разметка нашего меню:
<div class="panel">
<p>Some test information</p>
<p>Some test information</p>
<p>Some test information</p>
<p>Some test information</p>
<p>Some test information</p>
</div><!--/panel-->
<a class="trigger" href="#">Меню</a><!--/slider button-->
<p>Some test information</p>
<p>Some test information</p>
<p>Some test information</p>
<p>Some test information</p>
<p>Some test information</p>
</div><!--/panel-->
<a class="trigger" href="#">Меню</a><!--/slider button-->
CSS стили:
a:focus { outline: none; }
.panel {
position: fixed;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
color:#fff;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#CE1105 url(img/plus.png) 85% 55% no-repeat;
border:3px solid #fff;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#70AC16 url(img/plus.png) 85% 55% no-repeat;
border:3px solid #fff;
-moz-border-radius-topleftt: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
display: block;
}
a.active.trigger {
background:#222222 url(img/minus.png) 85% 55% no-repeat;
}
.panel ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.panel ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
.panel hr{
background-color: #333333;
height: 1px;
}
.panel {
position: fixed;
top: 50px;
right: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 130px 30px 30px;
filter: alpha(opacity=85);
opacity: .85;
color:#fff;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#CE1105 url(img/plus.png) 85% 55% no-repeat;
border:3px solid #fff;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#70AC16 url(img/plus.png) 85% 55% no-repeat;
border:3px solid #fff;
-moz-border-radius-topleftt: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
display: block;
}
a.active.trigger {
background:#222222 url(img/minus.png) 85% 55% no-repeat;
}
.panel ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.panel ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
.panel hr{
background-color: #333333;
height: 1px;
}
Подключение js файлов:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Если вы работаете с Drupal, то можно назначить регион для слайдера и помещать в него блоки.
<div class="panel">
<?php if ($panel): ?>
<?php print $panel; ?>
<?php endif; ?>
</div><!--/panel-->
<a class="trigger" href="#">Меню</a><!--/slider button-->
<?php if ($panel): ?>
<?php print $panel; ?>
<?php endif; ?>
</div><!--/panel-->
<a class="trigger" href="#">Меню</a><!--/slider button-->
Вот в принципе и все, ниже прикреплен архив с готовой демкой.
sliding-panel.rar - демка, сделанная мною.
origina-sliding_panel.rar - оригинальная демка.
- 5550 просмотров
Разделы
Подписаться
Комменты
-
Olzhas 6 месяцев 1 неделя назадСпасибо. С Новым Годом! →
-
Den 7 месяцев 3 дня назадВ первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. →
-
Гость 7 месяцев 3 дня назадЕсли все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того →
-
Валерий 8 месяцев 2 дня назадда можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер →
-
admin 8 месяцев 3 дня назадВалерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт →
-
Валерий 8 месяцев 4 дня назадзахожу на mysql через ssh по команде →
-
admin 8 месяцев 5 дней назадДобрый вечер, какой у вас клиент? →
-
Валерий 8 месяцев 6 дней назадЗдравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? →
-
Eduard 8 месяцев 2 недели назадВидать, домен хороший был. Заявление пробывали писать на мошенника? →
-
Stas 10 месяцев 2 дня назадОшибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям! →
Комментарии (1)
Дебил, ссылки сделай!
"Вот в принципе и все, ниже прикреплен архив с готовой демкой.
sliding-panel.rar - демка, сделанная мною.
origina-sliding_panel.rar - оригинальная демка."