Jump to content

Вертикальное меню с анимацией на CSS // Vertical Menu with CSS Animation


Recommended Posts


Beautiful vertical CSS menu with hover animation. // Красивое вертикальное меню на CSS с анимацией при на ведении.

  float: none;  
  clear: both; 
  width: 29%;  
  margin: 5% auto; 
  background: #e8e5e5; 

menu_vert ul { 
  list-style: none; 
  margin: 0px; 
  padding: 0px; 

menu_vert li{ 
  float: none;  
  width: 100%; 

menu_vert li a { 
  display: block; 
  width: 100%; 
  padding: 18px; 
  border-left: 4px solid; 
  position: relative; 
  z-index: 3; 
  text-decoration: none; 
  color: #383333; 
  box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  font-size: 16px; 
  font-weight: bold; 
menu_vert li a:hover{ border-bottom: 0px; color: #f3eded;} 
menu_vert li:first-child a{ border-left: 8px solid #2782bf; } 
menu_vert li:nth-child(2) a{ border-left: 8px solid #19800d; } 
menu_vert li:nth-child(3) a{ border-left: 8px solid #ad473e; } 
menu_vert li:last-child a{ border-left: 8px solid #128c74; } 

menu_vert li a:after {  
  content: ""; 
  height: 100%;  
  left: 0;  
  top: 0;  
  width: 0px;  
  position: absolute;  
  transition: all 0.7s ease 0s;  
  -webkit-transition: all 0.7s ease 0s;  
  z-index: -1; 

menu_vert li a:hover:after{ width: 100%; } 
menu_vert li:first-child a:after{ background: #2782bf; } 
menu_vert li:nth-child(2) a:after{ background: #19800d } 
menu_vert li:nth-child(3) a:after{ background: #ad473e; } 
menu_vert li:last-child a:after{ background: #128c74; }


  <li><a href="https://www.hostland.ru/?r=835bfe25">хостинг</a></li>
<li><a href="https://www.hostland.ru/order/hosting/?r=835bfe25">Заказать хостинг</a></li>
<li><a href="https://www.hostland.ru/services/domain/?r=835bfe25">Регистрация доменов</a></li>
<li><a href="https://www.hostland.ru/services/hosting/?r=835bfe25">Тарифы на хостинг</a></li> 

Кредит Северному

Link to comment
Share on other sites

я себе сделал просто боковое окно но с эффектом стекла. этого хостинга :ca:




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...