Еще одна интересная штука. Выезжающая снизу панелька. Сначала распишу весь код, а понять, что он делает вы сможете по скриншоту.
Это будет панелька для различных форм ввода. В нашем случае это будет форма добавления новости.
Итак, HTML код
<a id="newadd">Добавить новость</a>
<div class="bmenucont"><a class="close"><img src="close.png" title="Скрыть"/></a>
<div id="bmenu">
</div>
</div>CSS код
.bmenucont{
display: none;
position: fixed;
width: 40%;
bottom: 0;
left: 30%;
}
.bmenucont a.close{cursor: pointer; position: absolute; right: 3px; top: 3px;}
#bmenu{
background: #bdd3ee;
border: 5px solid #608cb8;
border-bottom: 0;
-moz-border-radius: 10px 10px 0 0; /*Firefox*/
-webkit-border-radius: 10px 10px 0 0; /*Chrome, Netscape*/
border-radius: 10px 10px 0 0; /*IE, Opera*/
color: #24517e;
overflow: auto;
padding: 10px 20px;
}jQuery код
$('#newadd, div.bmenucont a.close').click(function (){
$('#bmenu').load('getform.php/', function (){$('div.bmenucont').slideToggle('normal');});
return false;});Исходя из предыдущих частей статьи вы должны знать что к чему. Результат можно увидеть на скриншоте.