Ликиликс

  сайтостроение программирование

  

Боковая выдвигающаяся панель

Боковая выдвигающаяся панель

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

На демо странице я сделал для вас два вида кнопки
1) это кнопка с левой стороны она выдвигает панель при наведении курсора на неё и ещё она фиксируется  при прокрутке страницы, таким образом она всегда на виду.
2) кнопка расположенная с правой стороны при нажатии появляется - выдвигается меню, поле  или как вам угодно )) и она остаётся на месте при прокрутке страницы.

Такую кнопку можно использовать как угодно например вставить туда кнопки социальных сетей или даже FAQ по сайту - фантазия это всё )

Установка выдвигающегося меню

Первый шаг : подключаем скрипты jquery и js между тегами HEAD потом разберём их подробно, копируйте сразу всё вместе с описанием то что написано красным

<!-- ---начало выдвигающегося блока --- -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="
http://jemand.ru/examples/scripts/jquery.tabslideout.v1.2.js" type="text/javascript"></script>

<!-- ---файл стилей CSS выдвигающейся формы--- -->
<style>
.panel {
padding: 20px;
width: 250px;
background: #eeeeee;
border: #282828 2px solid;
font-family: Georgia;
}
</style>

<!-- ---сама выдвигающаяся форма--- -->
<script type="text/javascript">
$(function(){
$('.panel').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'http://likiliks.ru/java/panel/237-l.png',
imageHeight: '141px',
imageWidth: '37px',
tabLocation: 'right',
speed: 300,
action: 'click',
topPos: '200px',
fixedPosition: false
});
});
</script>

<!-- ---конец выдвигающегося блока --- -->
второй шаг: вставка html кода
После того как вы вставили выше приведённый код между тегами HEAD можно переходить к следующему шагу вставка html кода для выдвижного меню с правой стороны этот код я обычно вставляю рядом со счётчиком статистики
<div id="content" class="clearfix">
<div class="panel">
<a class="handle" href="
http://likiliks.ru/js">Content</a
> <!-- Ссылка для пользователей с отключенным JavaScript -->
<h3><span lang="ru">Заголовок</span></h3><br>
<span lang="ru">
Любое содержание здесь!
</span>
</div>
</div>
</div>
Вот и всё, выдвигающееся меню готово) вроде всё просто, я специально
разделил красными подсказками для удобства советую все коды вставлять именно с
ними т.к в будущем при необходимости что-то подправить быстро сориентирует
вас.

Настройка боковой панели

<!-- ---файл стилей CSS выдвигающейся формы--- -->
<style>
.panel {
padding: 20px; отступ панели
width: 250px; ширина выдвигаемой панели
background: #eeeeee; цвет фона выдвигаемой панели
border: #282828 2px solid; цвет рамки и её толщины
font-family: Georgia;
}
</style>

<!-- ---сама выдвигающаяся форма--- -->
<script type="text/javascript">
$(function(){
$('.panel').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'http://likiliks.ru/java/panel/237-l.png', путь к кнопке
imageHeight: '141px', высота кнопки
imageWidth: '37px', ширина кнопки
tabLocation: 'right',  отображение кнопки right с права, left с левой стороны
speed: 300, скорость выдвижения
action: 'click', метод открывания боковой панели click-появится при клике,hover-появится при наведении курсора
topPos: '200px', отступ с верху
fixedPosition: false
});
});
</script>

и наконец html код

<div id="content" class="clearfix">
<div class="panel">
<a class="handle" href="http://likiliks.ru/js">Content</a>
<!-- Ссылка для пользователей с отключенным JavaScript -->
<h3><span lang="ru">Заголовок</span></h3><br>
<span lang="ru">
Любое содержание здесь!
</span>
</div>
</div>
</div>

тут наверное без комментариев, только разве что  <!-- Ссылка для пользователей с отключенным JavaScript -->  это ссылка на скрипт который загружает отключеный js- без него иначе не работает в некоторых браузерах.


 

Подпишитесь на новые статьи через twitter

 

 
Copyright © My Company 2009-2013      обратная связькарта сайта