1

Моя Проблема заключается в том что моя иконка меню не анимирует а должна превращаться в крестик, не знаю что можно с этим делать очень сильно напрягает. Пробовал уже все способы почти которые знаю, может тут кто поможет?

$(document).ready(function) {
    $(".toggle-mnu").click(function() {
  $(this).toggleClass("on");
  $(".main-mnu").slideToggle();
  return false;
});
};
text-decoration:none  !important ;
body {
    overflow-x:hidden;
    font-size: 16px;
    min-width: 320px;
    position: relative;
    line-height: 1.6;
    font-family: "OpenSansRegular", sans-serif;
    overflow: hidden;
    color:#222;
    margin: 0 !important;
    padding: 0;
    border: none !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "OpenSansLight", sans-serif;
    font-weight: normal;
}
h1 {
    font-size: em(41);
    line-height: 1.2;
}
.ishome h1{
    margin-top: 0;
}
h2 {
    font-size: em(32);
}
h3, h4 {
    font-family: "OpenSansSemibold", sans-serif;
    text-transform: uppercase;
    font-size: em(15);
}
h4{
font-size: em(13);
}
a {
    color: #ECB124;
    outline: none !imponrtant;
}
.hidden {
    display: none;
}
.main-head {
    background-image:url(img/bg_top.jpg);
    background-size: cover;
    background-position: top center;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
}
.mnu_line {
    padding-top:48px;
}
.logo {
    display: block;
    width: 100px;
}
.logo img {
    width: 100%;
}
nav ul li{
    list-style-type: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}
.header-content ul{
    margin-top: 40px;
    list-style-type: none;
    display:block;
    padding: 0;
    color: #414e5b;
    text-transform: uppercase;
    font-family: "OpenSansSemiBold",sans-serif;
    font-size: em(17px);
    line-height: 1.8;
        
}
.main-mnu{
    font-size: em(13px);
    text-align: center;
    display: block;
}
.main-mnu ul li a {
    display: block;
    padding: 10px 18px;
    color: #7e91a4;
    -webkit-transition:all .5s ease;
    transition: all .5s ease;
}
.main-mnu ul li a:hover{
        color: #414e56;     
}
.active a{
    text-decoration: underline;
    color: #414e56;
}
.phone{
    line-height:1.4 ;
    text-align: right;
    padding: 0;
    margin:0;
}
.phone-wrap{
    display: block;
    color: #414e5b;
    font-family:"Exo2Bold", sans-serif;
    font-size: em(22px);
    line-height: em(22px)
}

.fa.fa-mobile:before {
    font-size: 20px;
    position: relative;
    top:2px;
    margin-right: 5px;
}
.callback{
    color: #7e91a4;
    display: inline-block;
    font-size: em(13px);
    line-height:em(18px) ;
    border-bottom: 1px dashed #7e91e4;
    -webkit-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    transition: all .3s ease;
}
.callback:hover{
    text-decoration: none;
    border-color: transparent;
}
.row {
    margin: 0;
}
.header-content{
    padding: 10% 0 5%;
}
.button{
    display: inline-block;
    border: none;
    background-color:#0E9C4B;
    color: #fff;
    font-size: em(14px);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 34px;
    border-radius: 3px;
    box-shadow: 0 4px 0 #14875A;
}
.button:hover{
    color:#fff;
    text-decoration:none;
    background-color: #18CB65;
    -webkit-transition:all .15s ease;
    transition: all .15s ease;
}
.button:focus{
    color:#fff;
    text-decoration:none;
}
.button:active{
    background-color:#14875A;
    -webkit-transform: translateY(4px);
    transform: translateY(2px)
}
.button {
    margin-top: 50px;
}
.responsive-img{
    width: 675px;
    max-width: 675px;
}
/*Mouse Wheel  Icon*/
.mouse-icon {
  border: 2px solid #414E5B;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  display: inline-block;
  z-index: 10;
  opacity: 0.7;
}
.mouse-icon .wheel {
          -webkit-animation-name: drop;
          animation-name: drop;
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
          -webkit-animation-delay: 0s;
          animation-delay: 0s;
          -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-play-state: running;
          animation-play-state: running;
}
.wheel {
  position: relative;
  border-radius: 10px;
  background: #414E5B;
  width: 2px;
  height: 6px;
  top: 4px;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

@keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
.mw-wrapper{
    text-align: center;
    padding: 40px 0;
}

/*Toggle Mnu */

.toggle-mnu {
  display: block;
  width: 28px;
  height: 28px;
  margin-top: 14px;
}
.toggle-mnu span:after, .toggle-mnu span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
}
.toggle-mnu span:after {
  top: 18px;
}
.toggle-mnu span {
  position: relative;
  display: block;
}
.toggle-mnu span, .toggle-mnu span:after, .toggle-mnu span:before {
  width: 100%;
  height: 2px;
  background-color: #414E58;
  -webkit-transition:all 0.3s;
  transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
}
.toggle-mnu.on span {
  background-color: transparent;
}
.toggle-mnu.on span:before {
  -webkit-transform: rotate(45deg) translate(-1px, 0px);
  transform: rotate(45deg) translate(-1px, 0px);
}
.toggle-mnu.on span:after {
  -webkit-transform: rotate(-45deg) translate(6px, -7px);
  transform: rotate(-45deg) translate(6px, -7px);
}
<!DOCTYPE html>
<html>
<head>
 <script src ="common.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type ="text/css" href="header.css">
   <link rel="stylesheet" href="fonts.css">
   <link rel="stylesheet" href="/Fonts/font-awesome.min.css">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="_media.css">
    <title>Document</title>
</head>
<body class= "ishome">
    <header class="main-head">
       
       <div class="container">
           <div class="row">
               
        
        <div class="mnu_line clearfix">
            
            <div class="col-md-2 col-sm-4 col-xs-12">
               
                <a href="#" class="logo"><img src="img/logo.svg" alt="Ovk"></a>
                
            </div>
            <div class="col-md-3 col-md-push-7 col-sm-8 col xs-12">
               <div class="phone">
                   
                   <div class="phone-wrap"><i class="fa fa-mobile" aria-hidden="true"></i> +38(068) 6847810
               </div>
                <a href="#" class="callback">Заказать обратный звонок</a>
               </div>
               <a href="#" class="toggle-mnu hidden-lg"><span></span></a>
            </div>
            <div class="col-md-7 col-md-pull-3">
               
                <nav class="main-mnu hidden-md hidden-sm hidden-px">
                    <ul>
                        <li class="active"><a href = "#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Jobs for you</a></li>
                        <li><a href="#">Review</a></li>
                        <li><a href="#">Haw we work</a></li>
                    </ul>
                </nav>   
            </div>
                        
        </div>
        <div class="header-content clearfix">
            <div class="col-sm-6">     
                <h1>Монтаж систем вентиляции и кондиционирования</h1>
                
                <ul>
                    <li><i class="fa fa-check" aria-hidden="true"></i> Работаем без предоплаты
                    <li><i class="fa fa-check" aria-hidden="true"></i> Скидки до 40%
                    <li><i class="fa fa-check" aria-hidden="true"></i> Безплатный выезд инженера
</li>
                </ul>
                <a href="#" class="button">Отправить заявку</a>

            </div>
            <div class="col-sm-6">
                <div class="top-img-wrap">
                    <img class="responsive-img" src="img/header_img.png" alt="Ovk Stroy">
                </div>
            </div>
            <div class="col-sm-12">
               <div class="mw-wrapper">
                <div class="mouse-icon"><div class="wheel"></div>
               </div>
            </div>
            </div>

        </div>
               
           </div>
       </div>
    </header>
</body>
</html>

2 ответа 2

4

1) Что-бы скрипт работал, надо чтобы в нем не было синтаксических ошибок:

$(document).ready(function() {//забыли открывающую скобку здесь
  $(".toggle-mnu").click(function() {
    $(this).toggleClass("on");
    $(".main-mnu").slideToggle();
    return false;
  })
}) //забыли закрывающую скобку здесь

2) Для Bootstrap нужно подключить jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

$(document).ready(function() {
  $(".toggle-mnu").click(function() {
    $(this).toggleClass("on");
    $(".main-mnu").slideToggle();
    return false;
  })
})
text-decoration:none !important;
body {
  overflow-x: hidden;
  font-size: 16px;
  min-width: 320px;
  position: relative;
  line-height: 1.6;
  font-family: "OpenSansRegular", sans-serif;
  overflow: hidden;
  color: #222;
  margin: 0 !important;
  padding: 0;
  border: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "OpenSansLight", sans-serif;
  font-weight: normal;
}

h1 {
  font-size: em(41);
  line-height: 1.2;
}

.ishome h1 {
  margin-top: 0;
}

h2 {
  font-size: em(32);
}

h3,
h4 {
  font-family: "OpenSansSemibold", sans-serif;
  text-transform: uppercase;
  font-size: em(15);
}

h4 {
  font-size: em(13);
}

a {
  color: #ECB124;
  outline: none !imponrtant;
}

.hidden {
  display: none;
}

.main-head {
  background-image: url(img/bg_top.jpg);
  background-size: cover;
  background-position: top center;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

.mnu_line {
  padding-top: 48px;
}

.logo {
  display: block;
  width: 100px;
}

.logo img {
  width: 100%;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

.header-content ul {
  margin-top: 40px;
  list-style-type: none;
  display: block;
  padding: 0;
  color: #414e5b;
  text-transform: uppercase;
  font-family: "OpenSansSemiBold", sans-serif;
  font-size: em(17px);
  line-height: 1.8;
}

.main-mnu {
  font-size: em(13px);
  text-align: center;
  display: block;
}

.main-mnu ul li a {
  display: block;
  padding: 10px 18px;
  color: #7e91a4;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.main-mnu ul li a:hover {
  color: #414e56;
}

.active a {
  text-decoration: underline;
  color: #414e56;
}

.phone {
  line-height: 1.4;
  text-align: right;
  padding: 0;
  margin: 0;
}

.phone-wrap {
  display: block;
  color: #414e5b;
  font-family: "Exo2Bold", sans-serif;
  font-size: em(22px);
  line-height: em(22px)
}

.fa.fa-mobile:before {
  font-size: 20px;
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.callback {
  color: #7e91a4;
  display: inline-block;
  font-size: em(13px);
  line-height: em(18px);
  border-bottom: 1px dashed #7e91e4;
  -webkit-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.callback:hover {
  text-decoration: none;
  border-color: transparent;
}

.row {
  margin: 0;
}

.header-content {
  padding: 10% 0 5%;
}

.button {
  display: inline-block;
  border: none;
  background-color: #0E9C4B;
  color: #fff;
  font-size: em(14px);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 34px;
  border-radius: 3px;
  box-shadow: 0 4px 0 #14875A;
}

.button:hover {
  color: #fff;
  text-decoration: none;
  background-color: #18CB65;
  -webkit-transition: all .15s ease;
  transition: all .15s ease;
}

.button:focus {
  color: #fff;
  text-decoration: none;
}

.button:active {
  background-color: #14875A;
  -webkit-transform: translateY(4px);
  transform: translateY(2px)
}

.button {
  margin-top: 50px;
}

.responsive-img {
  width: 675px;
  max-width: 675px;
}


/*Mouse Wheel  Icon*/

.mouse-icon {
  border: 2px solid #414E5B;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  display: inline-block;
  z-index: 10;
  opacity: 0.7;
}

.mouse-icon .wheel {
  -webkit-animation-name: drop;
  animation-name: drop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

.wheel {
  position: relative;
  border-radius: 10px;
  background: #414E5B;
  width: 2px;
  height: 6px;
  top: 4px;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

@keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

.mw-wrapper {
  text-align: center;
  padding: 40px 0;
}


/*Toggle Mnu */

.toggle-mnu {
  display: block;
  width: 28px;
  height: 28px;
  margin-top: 14px;
}

.toggle-mnu span:after,
.toggle-mnu span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
}

.toggle-mnu span:after {
  top: 18px;
}

.toggle-mnu span {
  position: relative;
  display: block;
}

.toggle-mnu span,
.toggle-mnu span:after,
.toggle-mnu span:before {
  width: 100%;
  height: 2px;
  background-color: #414E58;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
}

.toggle-mnu.on span {
  background-color: transparent;
}

.toggle-mnu.on span:before {
  -webkit-transform: rotate(45deg) translate(-1px, 0px);
  transform: rotate(45deg) translate(-1px, 0px);
}

.toggle-mnu.on span:after {
  -webkit-transform: rotate(-45deg) translate(6px, -7px);
  transform: rotate(-45deg) translate(6px, -7px);
}
   
<!DOCTYPE html>
<html>

<head>
  <script src="common.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="header.css">
  <link rel="stylesheet" href="fonts.css">
  <link rel="stylesheet" href="/Fonts/font-awesome.min.css">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="_media.css">
  <title>Document</title>
</head>

<body class="ishome">
  <header class="main-head">

    <div class="container">
      <div class="row">


        <div class="mnu_line clearfix">

          <div class="col-md-2 col-sm-4 col-xs-12">

            <a href="#" class="logo"><img src="img/logo.svg" alt="Ovk"></a>

          </div>
          <div class="col-md-3 col-md-push-7 col-sm-8 col xs-12">
            <div class="phone">

              <div class="phone-wrap"><i class="fa fa-mobile" aria-hidden="true"></i> +38(068) 6847810
              </div>
              <a href="#" class="callback">Заказать обратный звонок</a>
            </div>
            <a href="#" class="toggle-mnu hidden-lg"><span></span></a>
          </div>
          <div class="col-md-7 col-md-pull-3">

            <nav class="main-mnu hidden-md hidden-sm hidden-px">
              <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Jobs for you</a></li>
                <li><a href="#">Review</a></li>
                <li><a href="#">Haw we work</a></li>
              </ul>
            </nav>
          </div>

        </div>
        <div class="header-content clearfix">
          <div class="col-sm-6">
            <h1>Монтаж систем вентиляции и кондиционирования</h1>

            <ul>
              <li><i class="fa fa-check" aria-hidden="true"></i> Работаем без предоплаты
                <li><i class="fa fa-check" aria-hidden="true"></i> Скидки до 40%
                  <li><i class="fa fa-check" aria-hidden="true"></i> Безплатный выезд инженера
                  </li>
            </ul>
            <a href="#" class="button">Отправить заявку</a>

          </div>
          <div class="col-sm-6">
            <div class="top-img-wrap">
              <img class="responsive-img" src="img/header_img.png" alt="Ovk Stroy">
            </div>
          </div>
          <div class="col-sm-12">
            <div class="mw-wrapper">
              <div class="mouse-icon">
                <div class="wheel"></div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </header>
</body>

</html>

3
  • Спасибо всем, сайт просто супер, помогло подключения библиотеки. БЛАГОДАРЮ. 1 апр 2017 в 11:44
  • @YuriyShkvarc Наш сайт отличается от социальных сетей. Он помогает решать прикладные задачи. Поэтому мы используем комментарии только по делу — уточнить проблему, дать конструктивную критику или добавить полезную информацию. Чтобы поблагодарить автора ответа, проголосуйте за ответ или отметьте его как решение. ru.stackoverflow.com/help/someone-answers
    – Crantisz
    1 апр 2017 в 11:49
  • @Crantisz Ну видно ему лень галочку тыкнуть. В любом случае это по желанию. Если ответ хороший и помог, то ставь, если нет – то нет.
    – Eugen Eray
    1 апр 2017 в 18:30
3
  • Подключите jquery;
  • Исправьте код jq - скобки в $(document).ready(function()
  • Исправьте наконец свой css (em, ;, { })

$(document).ready(function(){
   $(".toggle-mnu").click(function(){
    $(this).toggleClass("on");
    $(".main-mnu").slideToggle();
    return false;
  });
});
a {text-decoration:none  !important; }
body {
    overflow-x:hidden;
    font-size: 16px;
    min-width: 320px;
    position: relative;
    line-height: 1.6;
    font-family: "OpenSansRegular", sans-serif;
    overflow: hidden;
    color: #222;
    margin: 0 !important;
    padding: 0;
    border: none !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "OpenSansLight", sans-serif;
    font-weight: normal;
}
h1 {
    font-size: 3em;
    line-height: 1.2;
}
.ishome h1{
    margin-top: 0;
}
h2 {
    font-size: 2em;
}
h3, h4 {
    font-family: "OpenSansSemibold", sans-serif;
    text-transform: uppercase;
    font-size: 1em;
}
h4{
font-size: 1em;
}
a {
    color: #ECB124;
    outline: none !imponrtant;
}
.hidden {
    display: none;
}
.main-head {
    background-image:url(img/bg_top.jpg);
    background-size: cover;
    background-position: top center;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
}
.mnu_line {
    padding-top:48px;
}
.logo {
    display: block;
    width: 100px;
}
.logo img {
    width: 100%;
}
nav ul li{
    list-style-type: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}
.header-content ul{
    margin-top: 40px;
    list-style-type: none;
    display:block;
    padding: 0;
    color: #414e5b;
    text-transform: uppercase;
    font-family: "OpenSansSemiBold",sans-serif;
    font-size: 1em;
    line-height: 1.8;
        
}
.main-mnu{
    font-size: 1em;
    text-align: center;
    display: block;
}
.main-mnu ul li a {
    display: block;
    padding: 10px 18px;
    color: #7e91a4;
    -webkit-transition:all .5s ease;
    transition: all .5s ease;
}
.main-mnu ul li a:hover{
  color: #414e56;     
}
.active a{
    text-decoration: underline;
    color: #414e56;
}
.phone{
    line-height: 1.4;
    text-align: right;
    padding: 0;
    margin:0;
}
.phone-wrap{
    display: block;
    color: #414e5b;
    font-family:"Exo2Bold", sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
}

.fa.fa-mobile:before {
    font-size: 20px;
    position: relative;
    top:2px;
    margin-right: 5px;
}
.callback{
    color: #7e91a4;
    display: inline-block;
    font-size: 1em;
    line-height:1em ;
    border-bottom: 1px dashed #7e91e4;
    -webkit-transition:all .3s ease;
    -webkit-transition:all .3s ease;
    transition: all .3s ease;
}
.callback:hover{
    text-decoration: none;
    border-color: transparent;
}
.row {
    margin: 0;
}
.header-content{
    padding: 10% 0 5%;
}
.button{
    display: inline-block;
    border: none;
    background-color:#0E9C4B;
    color: #fff;
    font-size: 1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 13px 34px;
    border-radius: 3px;
    box-shadow: 0 4px 0 #14875A;
}
.button:hover{
    color:#fff;
    text-decoration:none;
    background-color: #18CB65;
    -webkit-transition:all .15s ease;
    transition: all .15s ease;
}
.button:focus{
    color:#fff;
    text-decoration:none;
}
.button:active{
    background-color:#14875A;
    -webkit-transform: translateY(4px);
    transform: translateY(2px);
}
.button {
    margin-top: 50px;
}
.responsive-img{
    width: 675px;
    max-width: 675px;
}
/*Mouse Wheel  Icon*/
.mouse-icon {
  border: 2px solid #414E5B;
  border-radius: 16px;
  height: 40px;
  width: 24px;
  display: inline-block;
  z-index: 10;
  opacity: 0.7;
}
.mouse-icon .wheel {
          -webkit-animation-name: drop;
          animation-name: drop;
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
          -webkit-animation-delay: 0s;
          animation-delay: 0s;
          -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
          -webkit-animation-play-state: running;
          animation-play-state: running;
}
.wheel {
  position: relative;
  border-radius: 10px;
  background: #414E5B;
  width: 2px;
  height: 6px;
  top: 4px;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}

@keyframes drop {
  0% {
    top: 5px;
    opacity: 0;
  }
  30% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 25px;
    opacity: 0;
  }
}
.mw-wrapper{
    text-align: center;
    padding: 40px 0;
}

/*Toggle Mnu */

.toggle-mnu {
  display: block;
  width: 28px;
  height: 28px;
  margin-top: 14px;
}
.toggle-mnu span:after, .toggle-mnu span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
}
.toggle-mnu span:after {
  top: 18px;
}
.toggle-mnu span {
  position: relative;
  display: block;
}
.toggle-mnu span, .toggle-mnu span:after, .toggle-mnu span:before {
  width: 100%;
  height: 2px;
  background-color: #414E58;
  -webkit-transition:all 0.3s;
  transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 2px;
}
.toggle-mnu.on span {
  background-color: transparent;
}
.toggle-mnu.on span:before {
  -webkit-transform: rotate(45deg) translate(-1px, 0px);
  transform: rotate(45deg) translate(-1px, 0px);
}
.toggle-mnu.on span:after {
  -webkit-transform: rotate(-45deg) translate(6px, -7px);
  transform: rotate(-45deg) translate(6px, -7px);
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
  <script src ="common.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type ="text/css" href="header.css">
  <link rel="stylesheet" href="fonts.css">
  <link rel="stylesheet" href="/Fonts/font-awesome.min.css">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="_media.css">
  <title>Document</title>
</head>
<body class= "ishome">
    <header class="main-head">
       
       <div class="container">
           <div class="row">
               
        
        <div class="mnu_line clearfix">
            
            <div class="col-md-2 col-sm-4 col-xs-12">
               
                <a href="#" class="logo"><img src="img/logo.svg" alt="Ovk"></a>
                
            </div>
            <div class="col-md-3 col-md-push-7 col-sm-8 col xs-12">
               <div class="phone">
                   
                   <div class="phone-wrap"><i class="fa fa-mobile" aria-hidden="true"></i> +38(068) 6847810
               </div>
                <a href="#" class="callback">Заказать обратный звонок</a>
               </div>
               <a href="#" class="toggle-mnu hidden-lg"><span></span></a>
            </div>
            <div class="col-md-7 col-md-pull-3">
               
                <nav class="main-mnu hidden-md hidden-sm hidden-px">
                    <ul>
                        <li class="active"><a href = "#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Jobs for you</a></li>
                        <li><a href="#">Review</a></li>
                        <li><a href="#">Haw we work</a></li>
                    </ul>
                </nav>   
            </div>
                        
        </div>
        <div class="header-content clearfix">
            <div class="col-sm-6">     
                <h1>Монтаж систем вентиляции и кондиционирования</h1>
                
                <ul>
                    <li><i class="fa fa-check" aria-hidden="true"></i> Работаем без предоплаты
                    <li><i class="fa fa-check" aria-hidden="true"></i> Скидки до 40%
                    <li><i class="fa fa-check" aria-hidden="true"></i> Безплатный выезд инженера
</li>
                </ul>
                <a href="#" class="button">Отправить заявку</a>

            </div>
            <div class="col-sm-6">
                <div class="top-img-wrap">
                    <img class="responsive-img" src="img/header_img.png" alt="Ovk Stroy">
                </div>
            </div>
            <div class="col-sm-12">
               <div class="mw-wrapper">
                <div class="mouse-icon"><div class="wheel"></div>
               </div>
            </div>
            </div>

        </div>
               
           </div>
       </div>
    </header>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.