Нижняя выдвижная панель jQuery для сайта
 | |
| Вашему вниманию jQuery плагин на выдвижную и также фиксированную панель под разную информацию на сайте, где по клику появляется окно. По сути вы ставите ее в низ сайта и наполняете информацией, это может быть простой баннер как показано на главном изображение, также можно панель использовать в информационном поле не говоря о навигаций и других функциональных деталей. Там по умолчанию будет одна кнопка, что на кнопке написано, вам решать, это может быть к примеру "Приз на сайте" или розыгрыш, что пользователь открывает и там вся по этому поводу информация. И потом по клику закрывает. Кнопка сделана так, чтоб в глаза не бросалась и не мешалось, она полупрозрачная. Можете ставить на светлый или темный портал и создать свой оригинальный дизайн. А что размещать вам виднее, только в кнопке указывайте, что находиться в панели. Это вот просто написал, хотя можно поставить ссылку или картинку под клик.  Приступаем к установке: В низ сайта в самый вверх ставим скрипт: Код <style> #acont {background:#bababa; border: 10px solid #888; width:700px; height:100px; position:fixed; bottom:-140px; left:50%; margin-left:-350px;opacity:0;border-radius: 20 20 0 0;-moz-border-radius:20 20 0 0;padding:10px;color:#000;font-weight:bold;} #abtn {position:fixed; bottom:0px; left:50%; margin-left:-75px;width:150px;} </style> <input id="abtn" value="Открыть панель" type="button" /> <div id="acont">Здесь любой ваш контент на сайте zornet.ru</div> <script> var b = $('#abtn'); var c = $('#acont'); b.toggle(function() { b.animate({bottom: '+=100px',opacity: 0.7}, 1000).attr('value' , 'Закрыть панель'); c.animate({bottom: '+=100px',opacity: 0.7}, 1000); }, function() { b.animate({bottom: '-=100px',opacity: 1}, 1000).attr('value' , 'Открыть панель'); c.animate({bottom: '-=100px',opacity: 0}, 1000); }); </script> Находим надпись "Здесь любой ваш контент на сайте zornet.ru" и размешаем свою, только не забываем, что все делаем на панели HTML кодов. Если кто работал с модальным окном, то здесь по сути все также и все по такому же плану заполняется. Материал подготовлен: Apocalypse | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
