[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: ваня 
Форум » Всё для сайтов » Скрипты для сайтов » Боковая выдвижная панель jQuery (сделать боковую выдвижную панель.)
Боковая выдвижная панель jQuery
Лаврентий5932Дата: Среда, 14.05.2014, 18:42 | Сообщение # 1
Лейтенант
Группа: Администраторы
Сообщений: 52
Репутация: 0
Статус: Offline

В этой статье речь пойдет о том, как поступить, если стоит задача сделать боковую выдвижную панель.
HTML разметка останется почти такой же - понадобится лишь перенести кнопку в блок slide_panel и задать ей класс, например, open (вместо абзаца p кнопку можно обернуть в любой другой допустимый тег - div, span, a и т.д.):
Код
<div class="slide_panel_wrap">   <p></p>
    <div class="slide_panel">
       <p class="open">Открыть</p>
       <p>В этом блоке может содержаться любой контент.</p>
       <p>В этом блоке может содержаться любой контент. В этом блоке может содержаться любой контент.</p>
       <p>В этом блоке может содержаться любой контент.</p>
    </div>
</div>
Теперь "причешем" конструкцию, что бы на нее было приятнее смотреть:
Код
.slide_panel_wrap {margin:40px auto;
width:300px;
position:relative; /*обязательное свойство*/overflow:hidden; /*обязательное свойство*/}
.slide_panel {
margin-left:-201px; /*обязательное свойство*/padding:20px;  
width:160px;  
position:relative; /*обязательное свойство*/top:0; /*обязательное свойство*/left:0; /*обязательное свойство*/border:1px solid #367aab;
}
.slide_panel p.open {
padding:3px 5px;
position:absolute; /*обязательное свойство*/top:10px; /*обязательное свойство*/left:200px; /*обязательное свойство*/border:1px solid #367aab;
cursor:pointer;
}
Для блока-обертки .slide_panel обязательно задаем ширину width (в нашем случае она будет равна 202px - 160px ширина текста + 20px
внутренние отступы справа и с лева + 2px рамка справа и с лева), с
помощью свойств position:relative;, top:0; и left:0; прижимаем блок с текстом к левой стороне и свойством margin-left:-201px; прячем его (останется видимым только правая рамка).Ну и наконец, блок с кнопкой p.open при помощи свойств position:absolute;, top:10px; и left:200px; позиционируем с правой части текстового блока (что бы он всегда оставался видимым).Теперь осталось только написать небольшой js код, что бы панель заработала:
Код
$(document).ready(function(){           $("div.slide_panel p.open").toggle(function(){
       $("div.slide_panel").animate({left:'201px'},500);}, function() {
       $("div.slide_panel").animate({left:0},500);
    });  
});
Скрывать и показывать панель будем с помощью методов toggle и animate. По умолчанию панель скрыта. Когда произойдет щелчек по кнопке, с помощью animate сдвинем вправо панель на 201px ({left:'201px'}) за полсекунды (500). При повторном клике панель сдвинется в обратном направлении за такое же время.Если требуется прижать панель к правому краю, то нужно всего лишь внести соответствующие изменения в css и js, что бы достичь желаемого
результата.Ну и в заключении хотелось бы упомянуть, что описанный метод отлично работает в ИЕ 7-8-9, Safari, FF и Chrome.

Автор: Super User


 Ссылка на публикацию
 
html-cсылка на публикацию
BB-cсылка на публикацию


Лавр
 
Форум » Всё для сайтов » Скрипты для сайтов » Боковая выдвижная панель jQuery (сделать боковую выдвижную панель.)
Страница 1 из 11
Поиск:

Удивительно устроен человек — он огорчается, когда теряет богатство, и равнодушен к тому, что безвозвратно уходят дни его жизни.

- Абу-ль-Фарадж Аль-Исфахани

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

- Ф. Ларошфуко

Карточная игра - явное обнаружение умственного банкротства. Не будучи в состоянии обмениваться мыслями, люди перебрасываются картами.

- А. Шопенгауэр

Кто имеет меньше, чем желает, должен знать, что он имеет больше, чем заслуживает.

- Г.К. Лихтенберг

МВы думаете, что этот человек одурачен вами; а если он притворяется одураченным, то кто больше одурачен:он или вы?

- Жан де Лабрюйер

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

- Абу-ль-Фарадж Аль-Исфахани

Комментарий к УК РФ
Представляем Вашему благосклонному вниманию комментарии к Уголовно-Процессуальному Кодексу РФ.
Цель настоящих комментариев - разъяснить читателю его реальные права в противостоянии с национальной Фемидой и предоставить возможность любому гражданину, попавшему в шестерни Системы,
Читать