Автор

Выдвижная панель на 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;
}

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

В этом учебнике по HTML 5 и CSS 3 расскрываются стандарты нового  поколения разработки веб приложений на простых и работающих примерах. В наше время основные браузеры и мобильные устройства поддерживают спецификации HTML 5 и CSS 3. Эти новейшие технологии это основа последующего поколения интернет-разработок. Преимущества технологий нового поколения явны: удобство и комфорт для пользователя, для программиста - простота и удобства.


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

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


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

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.


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

Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close