Показать сообщение отдельно
  #5 (permalink)  
Старый 30.06.2018, 15:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

maxg5,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html, body{
      height: 100%;

      margin: 0;
      padding: 0;

  }
  .site{
     background-color: #fff;
      position: relative;
      transition: background-color .3s .4s;
  }

  .primary-menu{
   width: 330px;
   height: 100%;
   position: absolute;
   left: -330px;
   transition: left .7s;
   background-color: rgba(69, 43, 18, 1);
  }
  .site.open{
      transition-delay: 0s;
      background-color: rgba(17,17,17,0.4)
  }
 .site.open .primary-menu{
   left: 0;
 }
 .burger{
     position: fixed;
     width: 40px;
     height: 40px;
     background-image: url(http://da-strateg.ru/wp-content/uploads/2015/12/menu.png);
     background-size: cover;

 }
 .site.open .burger{
     background-image: url(http://100грузов.рф/wp-content/uploads/2016/04/close-icon.png);

 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function(){
    var site = $(".site");
    $(".burger").click(function () {
        site.toggleClass("open");
    });
});

  </script>
</head>

<body class="site">
<div  class="primary-menu"></div>
<div class="burger"></div>
</body>
</html>

Последний раз редактировалось рони, 02.07.2018 в 22:35.
Ответить с цитированием