$(document).ready(function() {
  $(".button a").click(function() {
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
  });
});
$('.overlay').on('click', function() {
  $(".overlay").fadeToggle(200);
  $(".button a").toggleClass('btn-open').toggleClass('btn-close');
  mở = sai;
});

body {
  margin: 0;
  padding: 0;
  nền: #fff;
  họ phông chữ: 'Montserrat', sans-serif;
  cỡ chữ: 12px;
}
ul {
  margin: 0;
  padding: 0;
  trang trí văn bản: không có;
  kiểu danh sách: không có;
}
li {
  padding: 0;
  margin: 0;
}
điều hướng {
  text-align: center;
  width: 100%;
  position: relative;
  chiều cao: tự động;
  tràn: ẩn;
  lý lịch: không có;
}
điều hướng ul {
  text-align: center;
  z-index: 999;
}
hải quân {
  hiển thị: khối nội tuyến;
  z-index: 999;
}
nav ul li a {
  màu: #333;
  hiển thị: khối nội tuyến;
  đệm: 1em 3em;
  trang trí văn bản: không có;
  viền dưới: 2px liền khối #fff;
  thuộc tính chuyển tiếp: tất cả 0,2 giây tuyến tính;
  -moz-transition: tất cả 0,2 giây tuyến tính;
  -webkit-transition: tất cả 0,2 giây tuyến tính;
  -o-transition: tất cả .2s tuyến tính 0;
  cỡ chữ: 16px;
  z-index: 999;
}
điều hướng ul li a:hover {
  màu sắc: #34B484;
}
/*kiểu dáng nút đóng mở*/

.cái nút {
  hiển thị: nội tuyến;
  position: absolute;
  phải: 50px;
  trên cùng: 6px;
  z-index: 999;
  cỡ chữ: 30px;
}
.nút a {
  trang trí văn bản: không có;
}
.btn-open:sau {
  màu: #333;
  nội dung: "\f0c9";
  họ phông chữ: "FontAwesome";
  thuộc tính chuyển tiếp: tất cả 0,2 giây tuyến tính;
  -moz-transition: tất cả 0,2 giây tuyến tính;
  -webkit-transition: tất cả 0,2 giây tuyến tính;
  -o-transition: tất cả .2s tuyến tính 0;
}
.btn-open:hover:after {
  màu sắc: #34B484;
}
.btn-đóng:sau {
  color: #fff;
  nội dung: "\f00d";
  họ phông chữ: "FontAwesome";
  thuộc tính chuyển tiếp: tất cả 0,2 giây tuyến tính;
  -moz-transition: tất cả 0,2 giây tuyến tính;
  -webkit-transition: tất cả 0,2 giây tuyến tính;
  -o-transition: tất cả .2s tuyến tính 0;
}
.btn-close:hover:after {
  màu sắc: #34B484;
}
/*lớp phủ*/

.lớp phủ {
  display: none;
  position: fixed;
  top: 0;
  chiều cao: 100%;
  width: 100%;
  nền: #333;
  tràn: tự động;
  chỉ số z: 99;
}
.bọc {
  màu: #e9e9e9;
  text-align: center;
  chiều rộng tối đa: 90%;
  lề: 0 tự động;
}
.wrap ul.wrap-nav {
  viền dưới: 1px liền khối #575757;
  chuyển đổi văn bản: viết hoa;
  phần đệm: 150px 0px 100px;
  z-index: 999;
}
.wrap ul.wrap-nav li {
  cỡ chữ: 20px;
  hiển thị: khối nội tuyến;
  căn dọc: trên cùng;
  chiều rộng: 24%;
  position: relative;
  z-index: 999;
}
.wrap ul.wrap-nav li a {
  màu sắc: #34B484;
  display: block;
  phần đệm: 8px 0;
  trang trí văn bản: không có;
  thuộc tính chuyển tiếp: tất cả 0,2 giây tuyến tính;
  -moz-transition: tất cả 0,2 giây tuyến tính;
  -webkit-transition: tất cả 0,2 giây tuyến tính;
  -o-transition: tất cả .2s tuyến tính 0;
  z-index: 999;
}
.wrap ul.wrap-nav li a:hover {
  màu: #f0f0f0;
}
.wrap ul.wrap-nav ul {
  phần đệm: 20px 0;
  z-index: 999;
}
.wrap ul.wrap-nav ul li {
  display: block;
  cỡ chữ: 13px;
  width: 100%;
  màu: #e9e9e9;
  z-index: 999;
}
.wrap ul.wrap-nav ul li a {
  màu: #f0f0f0;
  z-index: 999;
}
.wrap ul.wrap-nav ul li a:hover {
  màu sắc: #34B484;
}
.xã hội {
  cỡ chữ: 25px;
  phần đệm: 20px;
}
.xã hội p {
  margin: 0;
  phần đệm: 20px 0 5px 0;
  chiều cao dòng: 30px;
  cỡ chữ: 13px;
}
.social pa {
  màu sắc: #34B484;
}
.social-icon {
  chiều rộng: 80px;
  chiều cao: 50px;
  nền: #e9e9e9;
  màu: #333;
  hiển thị: khối nội tuyến;
  lề: 0 20px;
  thuộc tính chuyển tiếp: tất cả 0,2 giây tuyến tính;
  -moz-transition: tất cả 0,2 giây tuyến tính;
  -webkit-transition: tất cả 0,2 giây tuyến tính;
  -o-transition: tất cả .2s tuyến tính 0;
}
.social-icon: di chuột {
  nền: #34B484;
  màu: #f0f0f0;
}
.social-icon i {
  lề trên: 12px;
}
Màn hình @media và (độ rộng tối đa: 48em) {
  .wrap ul.wrap-nav > li {
    width: 100%;
    phần đệm: 20px 0;
    viền dưới: 1px liền khối #575757;
  }
  .wrap ul.wrap-nav {
    phần đệm: 30px 0px 0px;
  }
  điều hướng ul {
    độ mờ: 0;
    khả năng hiển thị: ẩn;
  }
  .xã hội {
    màu sắc: #c1c1c1;
    cỡ chữ: 25px;
    phần đệm: 15px 0;
  }
  .social-icon {
    width: 100%;
    chiều cao: 50px;
    nền: #fff;
    màu: #333;
    display: block;
    lề: 5px 0;
  }
}

<điều hướng="">
  

    
Công ty
    

    
Dịch vụ
    

    
Xã hội
    

    
Liên hệ
    

  

  

    
  




  

    

      
Công ty
        

          
Giới thiệu
          

          
Blog
          

          
Nơi làm việc
          

        

      

      
Dịch vụ
        

          
Thiết kế web
          

          
Tư vấn
          

          
Sản phẩm
          

          
Trung tâm
          

        

      

      
Xã hội
        

          
Facebook
          

          
Twitter
          

          
Google Plus
          

          
LinkedIn
          

          
WhatsApp
          

        

      

      
Liên hệ
        

          
Địa chỉ
          

          
Điện thoại
          

          
Email
          

          
Bản đồ
          

        

      

    


    

      
        

        

      
      
        

        

      
      
        

        

      
      
        

        

      
      
        

        

      
      
Từ: Zagreb, Croatia
        
Trang web: mario-loncarek.from.hr