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

<div class="a"> <div class="b"> <div class="c"> <div class="ava"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="/img/noavatar"><?endif?></div> <div class="ccilki"> <div class="ccilka"><a href="javascript://">Мой профиль</a></div> <div class="ccilka"><a href="javascript://">Мой профиль</a></div> <div class="ccilka"><a href="javascript://">Мой профиль</a></div> </div>  <div class="novosti">Важные новости: <br> 1. Важная новость 1(max 20 символ) <br> 2. Важная новость 2(max 20 символ) <br> 3. Важная новость 3(max 20 символ) </div>  <div class="poisk"> <form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/"> <input type="text" name="q" id="search" onfocus="if(this.value=='Введите фразу для поиска')this.value='';" onblur="if(this.value=='')this.value='Введите фразу для поиска';" value="Введите фразу для поиска" autocomplete="off" /> <input type="submit" name="sfSbm" id="naiti" value=""/> </form> <span>Например: тычь не тупи</span> </div>  <div class="cvernut"><a href="javascript://" onclick="cver();" id="cv" style="display:none;">Свернуть панель</a> <a href="javascript://" onclick="razv();" id="rz">Развернуть панель</a></div>  <script> function cver() {$('.b').animate({marginTop: "0px"}, 2000); $('#cv').hide(); $('#rz').show();} function razv() {$('.b').animate({marginTop: "77px"}, 2000); $('#rz').hide(); $('#cv').show();} </script> </div> </div> </div>  <style> .a {width:966px; margin: 0px auto;} .b {background: url('img/fon.png') 0px 0px no-repeat; width:966px; height:108px; position:fixed; top:-77px; z-index:9999;} .c {margin:3px 0px 0px 5px;} .ava {background: url('img/fonava.png') 0px 0px no-repeat; width:73px; height:69px;float:left;}  .ava img {width:73px; height:69px;} .ccilki {float:left;} .ccilka {background: url('img/moj_profil.png') 0px 0px no-repeat; border:none; width:145px; height:19px; text-align:center; padding-top:4px;} .ccilka a {color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; text-decoration:none;} .ccilka a:hover {color:#eee;}  .novosti {background: url('img/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;}  .poisk {float:right; margin:15px 40px 0px 0px;} #search {background: url('img/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;} #naiti {background: url('img/ishhi.png') 0px 0px no-repeat; border:none; width:45px; height:30px; padding:0px 15px 4px 10px; margin-left:4px;} #naiti: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;}  .poisk span {margin:10px 0px 0px 10px; color:#fff; text-shadow:0px 1px 0px #074f63; font-size:10px;}  .cvernut {float:right; margin:23px 118px 0px 0px;} .cvernut a {color:#fff; text-shadow:0px 1px 0px #074f63; font-size:11px; text-decoration:none;} .cvernut a:hover {color:#eee;}  </style>