Автор

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

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

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


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

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Лично я применил календарь на сайте Усадьба «Сказка» по просьбе заказчика!


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

Модальное окно «product quick view», анимированное с использованием CSS3 и Velocity.js, которое обеспечивает пользователю быстрый доступ к основной информации о продукте.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close