Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 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>
Код
<div class="panel"><!-- Cодержимое панели --></div><a class="trigger" href="#">Кнопка</a>
Код
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
