Красивое выдвигающиеся меню в шапке by webo4ka.ru

<div class="aWebo4kaRu">
<div class="bWebo4kaRu">
<div class="cWebo4kaRu">
<div class="avaWebo4kaRu"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://webo4ka.3dn.ru/webo4kaRu/img/noavatarWebo4kaRu.png"><?endif?></div>
<div class="ccilkiWebo4kaRu">
<div class="ccilkaWebo4kaRu"><a href="javascript://">Мой профиль</a></div>
<div class="ccilkaWebo4kaRu"><a href="javascript://">Мой профиль</a></div>
<div class="ccilkaWebo4kaRu"><a href="javascript://">Мой профиль</a></div>
</div>

<div class="novostiWebo4kaRu">Важные новости:
<br> 1. Важная новость 1(max 20 символ)
<br> 2. Важная новость 2(max 20 символ)
<br> 3. Важная новость 3(max 20 символ)
</div>

<div class="poiskWebo4kaRu">
<form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">
<input type="text" name="q" id="searchWebo4kaRu" onfocus="if(this.value=='Введите фразу для поиска')this.value='';" onblur="if(this.value=='')this.value='Введите фразу для поиска';" value="Введите фразу для поиска" autocomplete="off" />
<input type="submit" name="sfSbm" id="naitiWebo4kaRu" value=""/>
</form>
<span>Например: Вёрстка by Вовчик</span>
</div>

<div class="cvernutWebo4kaRu"><a href="javascript://" onclick="cver();" id="cvWebo4kaRu" style="display:none;">Свернуть панель</a> <a href="javascript://" onclick="razv();" id="rzWebo4kaRu">Развернуть панель</a></div>

<script>
function cver() {$('.bWebo4kaRu').animate({marginTop: "0px"}, 2000); $('#cvWebo4kaRu').hide(); $('#rzWebo4kaRu').show();}
function razv() {$('.bWebo4kaRu').animate({marginTop: "77px"}, 2000); $('#rzWebo4kaRu').hide(); $('#cvWebo4kaRu').show();}
</script>
</div>
</div>
</div>

<style>
.aWebo4kaRu {width:966px; margin: 0px auto;}
.bWebo4kaRu {background: url('imgWebo4kaRu/fon.png') 0px 0px no-repeat; width:966px; height:108px; position:fixed; top:-77px; z-index:9999;}
.cWebo4kaRu {margin:3px 0px 0px 5px;}
.avaWebo4kaRu {background: url('imgWebo4kaRu/fonava.png') 0px 0px no-repeat; width:73px; height:69px;float:left;}

.avaWebo4kaRu img {width:73px; height:69px;}
.ccilkiWebo4kaRu {float:left;}
.ccilkaWebo4kaRu {background: url('imgWebo4kaRu/moj_profil.png') 0px 0px no-repeat; border:none; width:145px; height:19px; text-align:center; padding-top:4px;}
.ccilkaWebo4kaRu a {color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; text-decoration:none;}
.ccilkaWebo4kaRu a:hover {color:#eee;}

.novostiWebo4kaRu {background: url('imgWebo4kaRu/info.png') 0px 0px no-repeat; width:193px; height:66px;float:left; padding:3px 7px; margin-left:159px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; line-height: 1.4;}

.poiskWebo4kaRu {float:right; margin:15px 40px 0px 0px;}
#searchWebo4kaRu {background: url('imgWebo4kaRu/poisk.png') 0px 0px no-repeat; border:none; width:167px; height:32px; padding:0px 15px 4px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; margin:0px; outline:none;}
#naitiWebo4kaRu {background: url('imgWebo4kaRu/ishhi.png') 0px 0px no-repeat; border:none; width:45px; height:30px; padding:0px 15px 4px 10px; margin-left:4px;}
#naitiWebo4kaRu:hover {background: url('imgWebo4kaRu/ishhi.png') 0px -30px no-repeat; border:none; width:45px; height:30px; padding:0px 15px 4px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:12px; cursor:pointer;}

.poiskWebo4kaRu span {margin:10px 0px 0px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:10px;}

.cvernutWebo4kaRu {float:right; margin:23px 118px 0px 0px;}
.cvernutWebo4kaRu a {color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; text-decoration:none;}
.cvernutWebo4kaRu a:hover {color:#eee;}
/*-- by webo4ka.ru --*/
</style>