Вед-дев, Сео, Манимейкинг

Sliding panel jQuery (Выезжающая панель слева или справа)

Копался в интернете и нашел очень интересный эффект, возможно, уже банальный - это выезжающая панель с меню (Справа или слева в CSS настраивается). Для этого меню нам нужна будет сама библиотека jQuery, желательно версии 1.3.2. В архиве в конце статьи прикреплен файл, в котором есть сама библиотека jQuery 1.3.2. Итак, приступим к построению нашей выезжающей панели!

Разделим наш урок на 3 этапа:

  1. HTML разметка
  2. CSS стили
  3. Подключение 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-->

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;
}

Подключение js файлов:

<script type="text/javascript">
$(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-->

Вот в принципе и все, ниже прикреплен архив с готовой демкой.

sliding-panel.rar - демка, сделанная мною.
origina-sliding_panel.rar - оригинальная демка.



Комментарии (1)

Дебил, ссылки сделай!
"Вот в принципе и все, ниже прикреплен архив с готовой демкой.
sliding-panel.rar - демка, сделанная мною.
origina-sliding_panel.rar - оригинальная демка."

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 10 месяцев 1 неделя назад
    Спасибо. С Новым Годом! 
  • Den 11 месяцев 4 дня назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 11 месяцев 4 дня назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 12 месяцев 3 дня назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 12 месяцев 4 дня назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 1 год 11 часов назад
    захожу на mysql через ssh по команде  
  • admin 1 год 1 день назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 1 год 1 день назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 1 год 2 недели назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 1 месяц назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!