Автор

24 03.2013
Выдвижная панель на jQuery

Выдвижная панель на jQuery


 

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио. Лично я использовал ее на сайте «Завод Tехпромгаз» для открытия опросных листов.

 

ДЕМО
ИСХОДНИКИ

 

Слайд-панель, реализована следующим образом, по клику элемент , у нас будет переключаться её класс (между ”active” и ”btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс ”active” изменяет позицию фона.

Подключаем

 

Между тегами <head> ... </head>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
    
    
});
</script>

 

Вывод панели

 

Вставляем в место вывода панели

<div id="panel">

</div>
<p class="slide"><a href="#" class="btn-slide">Открыть панель</a></p>

 

CSS

 

a:focus {
    outline: none;
}
#panel {
    background: #ccc;
    height: 200px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}

 

Для своего сайта ( для полного сочетания с дизайном ) я немного изменил стили, возможно вам это может понадобится, гды box-shadow : 0 1px 10px rgba(0, 0, 0, 0.9) inset; в #panel создан с внутренними тенями как описано в статье «Внутренние тени в CSS». Вот мои стили оформления:

CSS

 

#panel {
    background : url('images/bb-cont.jpg') top center;
    position : relative;
    font-size : 12px;
    color : #cbd1da;
    text-shadow : 0 1px 0 rgba(0, 0, 0, 0.4);
    border : #fff solid 1px;
    padding : 20px 20px 20px 20px;
    margin-left : 20px;
    box-shadow : 0 1px 10px rgba(0, 0, 0, 0.9) inset;
    height: 174px;
    width: 534px;
    display: none;
    margin-bottom: -8px;
}
.slide {
    background: url('/images/ob_avtore.png') no-repeat right top;
    padding: 0;
    margin: 0;
}
.btn-slide {
    background: url('/files/panel/images/white-arrow.gif') no-repeat right -50px;
    text-align: center;
    font-size : 12px;
    width: 144px;
    height: 34px;
    padding: 10px 10px 0 0;
    margin-left: 430px;
    display: block;
    font: bold;
    color : #6a6a6a;
    text-shadow : 0 1px 2px #ffffff;
    text-decoration: none;
}
.active {
    background-position: right 10px;
}

Вот собственно и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

23 04.2013
Выдвижная панель на jQuery

На просторах интернета можно не раз увидеть подобную версию галереи, но сегодня мы, все таки, решили уделить урок по созданию этой полноэкранной  галереи для сайта с помощью jQuery.  Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз. Вот как все это выглядит..


20 07.2013
Выдвижная панель на jQuery

Если у Вас на сайте есть модальные окна, возможно это формы регистрации, авторизации или просто креативное отображение контента во всплывающих окнах, тогда вам необходимо их стилизировать, придав им новеньких эффектов. В данном уроке мы рассмотрим замечательную подборку эффектов для модальных окон. Все они имеют плавность эффекта и не требуют особых умений интеграции, все достаточно просто. Есть огромное количество вариантов появления диалогового окна, и мы бы хотели продемонстрировать некоторые идеи о том, как отображать диалоговые окна.


20 04.2013
Выдвижная панель на jQuery

На сайтах, в основном, можно встретить вывод подписей для изображений, которые содержат различную информацию о материале. Зачастую эти, так называемые, подсказки весьма скучны и не привлекают взор пользователя к необходимой информации под изображением, но эту, пускай не такую уж и большую проблему, можно весьма просто решить с помощью маленького плагина jQuery. Плагин Drop Caption берет содержание атрибута изображения title и делает из него подпись, которая появляется только при наведении курсора мыши на картинку.


23 04.2013
Выдвижная панель на jQuery

Технология CSS3 открыла нам бесчисленные возможности, и сегодня мы хотим представить вам руководство по разработке привлекательных страниц, предназначенных для оповещения посетителей о скором открытии веб-сайта, а также о создании заставок на сайт, реализованных посредством анимации в CSS3. Разрабатывая сайт необходимо создать красивую заглушку, чтобы пользователи могли подписаться на новости когда откроется сайт. В данном уроке мы рассмотрим как это креативно осуществить, не затрачивая при этом особых усилий.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close