Показать сообщение отдельно
  #2 (permalink)  
Старый 20.06.2018, 23:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

WebCafe,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #icon ~ li {
      transition: 1s;
      opacity: 0;
  }
  #menu {
     width: 50px;
     transition: 1s;
     transition-delay: .4s;
     overflow: hidden;
  }
  #menu:hover {
     width: 200px;
  }
  #menu:hover #icon ~ li {
     opacity: 1;
  }
  #menu li {
      list-style: none;
      transition: 1s .4s;
  }
  #menu:hover #icon {
     opacity: 0;
     transition-delay: .1s;
  }
  #menu #icon {
    transition-delay: 1.4s;
    opacity: 1;
  }

  </style>

</head>

<body>
<div class="menu" id="menu">
      <nav>
            <ul>
                 <li class="icon" id="icon">|||</li>
                 <li class="menu_item">главная</li>
                 <li class="menu_item">о компании</li>
                 <li class="menu_item">портфолио</li>
                 <li class="menu_item">контакты</li>
                 <li class="menu_item">услуги</li>
                 <li class="menu_item">сделать заказ</li>
           </ul>
     </nav>
</div>

</body>
</html>
Ответить с цитированием