Скрипты-სკრიპტები

მთავარი » 2012 » მაისი » 12 » Выдвигающаяся панель на CSS
03:01
Выдвигающаяся панель на CSS
В CSS:
Code
#button {  
   position: fixed;  
   top: 353px;  
   left: 0;  
   background: #0094d6;  
   width: 28px;  
   height: 50px;  
   font: 40px Georgia;  
   color: #fff;  
   text-align: center;  
   -webkit-transition-duration: 0.3s;  
   -moz-transition-duration: 0.3s;  
   -o-transition-duration: 0.3s;  
   transition-duration: 0.3s;  
   -webkit-border-radius: 0 5px 5px 0;  
   -moz-border-radius: 0 5px 5px 0;  
   border-radius: 0 5px 5px 0;  
   }  
#s_panel {  
   position: fixed;  
   top: 153px;  
   left: -100px;  
   background: #ff7700;  
   width: 100px;  
   height: 150px;  
   padding: 100px 0 0 0;  
   -webkit-transition-duration: 0.3s;  
   -moz-transition-duration: 0.3s;  
   -o-transition-duration: 0.3s;  
   transition-duration: 0.3s;  
   -webkit-border-radius: 0 5px 0 0;  
   -moz-border-radius: 0 5px 0 0;  
   border-radius: 0 5px 0 0;  
   }  
#button:hover {  
   left: 100px;  
}  
#button:hover #s_panel {  
   left: 0;  
}


В HTML:
Code

<div id="button"> »  
   <div id="s_panel">  
   : )  
   </div>  
</div>
 
კატეგორია: Скрыпты | ნანახია: 485 | დაამატა: nukria | რეიტინგი: 0.0/0
სულ კომენტარები: 0
კომენტარის დამატება შეუძლიათ მხოლოდ დარეგისტრირებულ მომხმარებლებს
[ რეგისტრაცია | შესვლა ]
მოგესალმები Гость