[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: ваня 
Форум » Всё для сайтов » Скрипты для сайтов » Выдвижная боковая панель на jQuery
Выдвижная боковая панель на jQuery
Лаврентий5932Дата: Среда, 14.05.2014, 18:35 | Сообщение # 1
Лейтенант
Группа: Администраторы
Сообщений: 52
Репутация: 0
Статус: Offline
Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 3 варианта: фиксированная, выезжающая с лева и третья
выезжающая с права. В исходных файлах есть все варианты СSS. Мы
рассмотрим один с фиксированной кнопкой и панелью.
ПодключаемМежду тегами <head> ... </head>
Код
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script><script type="text/javascript">$(document).ready(function(){    $(".trigger").click(function(){        $(".panel").toggle("fast");        $(this).toggleClass("active");        return false;    });
});
</script>
 Вывод панели Вставляем в любое место между тегами <body> ... </body>
Код
<div class="panel"><!-- Cодержимое панели --></div><a class="trigger" href="#">Кнопка</a>
 CSS 
Код
a:focus {outline: none;}.panel {position: fixed;top: 50px;left: 0;display: none;background: #000000;border:1px solid #111111;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomright: 20px;-webkit-border-bottom-right-radius: 20px;width: 330px;height: auto;padding: 30px 30px 30px 130px;filter: alpha(opacity=85);opacity: .85;}.panel p{margin: 0 0 15px 0;padding: 0;color: #cccccc;}.panel a, .panel a:visited{margin: 0;padding: 0;color: #9FC54E;text-decoration: none;border-bottom: 1px solid #9FC54E;}.panel a:hover, .panel a:visited:hover{margin: 0;padding: 0;color: #ffffff;text-decoration: none;border-bottom: 1px solid #ffffff;}a.trigger{position: fixed;text-decoration: none;top: 80px; left: 0;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#fff;padding: 20px 40px 20px 15px;font-weight: 700;background:#333333 url(images/plus.png) 85% 55% no-repeat;border:1px solid #444444;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomright: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomleft: 0px;-webkit-border-bottom-left-radius: 0px;display: block;}a.trigger:hover{position: fixed;text-decoration: none;top: 80px; left: 0;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#fff;padding: 20px 40px 20px 20px;font-weight: 700;background:#222222 url(images/plus.png) 85% 55% no-repeat;border:1px solid #444444;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomright: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomleft: 0px;-webkit-border-bottom-left-radius: 0px;display: block;}a.active.trigger {background:#222222 url(images/minus.png) 85% 55% no-repeat;}.columns{clear: both;width: 330px;padding: 0 0 20px 0;line-height: 22px;}.colleft{float: left;width: 130px;line-height: 22px;}.colright{float: right;width: 130px;line-height: 22px;}
 Вот собственно и всё!
Взято с http://s-sd.ru


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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