HTML - CSS - JS03 . 08 . 2021Lượt xem: 1237

Tạo menu responsive cho PC và mobie sử dụng CSS Flexbox

Trong bài này, tôi sẽ hướng dẫn bạn tạo menu đơn giản bằng HTML, CSS và JS. Menu này có khả năng repsonsive theo kích thước màn hình tự động.

Như bạn có thể thấy trong hình, đây là một menu hoàn toàn ứng dụng sử dụng HTML & CSS (Flexbox). Khi bạn thay đổi kích thước hoặc thu nhỏ cửa sổ PC của mình, menu này sẽ tự động lấy chiều cao và chiều rộng của chúng theo chiều rộng và chiều cao của cửa sổ.

Trong phiên bản PC, menu này được hiển thị ở dạng ngang nhưng trong phiên bản di động, menu này được hiển thị ở dạng dọc.

Trong phiên bản Mobile, nhấn vào icon 3 gạch, menun sẽ ra với animation từ trái sang phải

Xem demo: tại đây

Trong bài viết này, tôi có dùng Jquery, Google font và Google icon

HTML và JS

copy và dán đoạn code này vào file .html

<!DOCTYPE html>
<!-- Created By Huynh Thai Hung -->
<head>
   <meta charset="utf-8">
   <title>Responsive Navigation Bar</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="styles.css">
   <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
   <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
</head>
<body>
  <header>
    <div class="container">
      <div class="logo-wrap">
        <a href="/">LOGO</a>
      </div>
      <nav>
          <ul>
            <li class="items"><a href="#">Home</a></li>
            <li class="items"><a href="#">About</a></li>
            <li class="items"><a href="#">Blogs</a></li>
            <li class="items"><a href="#">Contact</a></li>
            <li class="items"><a href="#">Feedback</a></li>
          </ul>
      </nav>
      <div class="mobie-icon">
        <span class="material-icons-outlined open">menu</span>
        <span class="material-icons-outlined close">close</span>
      </div>
    </div>
  </header>
   <script>
      $(document).ready(function(){
        $('.mobie-icon').click(function(){
          $('body').toggleClass("is-mobie");
        });
      });
   </script>
</body>
</html>

CSS

Copy và dán đoạn code này vào file styles.css

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  
}
body {
  font-family: 'Montserrat',sans-serif;
  font-size: 16px;
  line-height: 32px;
}
a {
  text-decoration: none;
  color: inherit;
}
header {
  padding-top: 25px;
  padding-bottom: 25px;
  background: #2962FF;
}
header .container{
  display: flex;
  align-items: center;
  max-width: 1000px;
  margin: auto;
  padding-right: 15px;
  padding-left: 15px;
}
.logo-wrap {
  flex-basis: 20%;
}
.logo-wrap a {
  color: #fff;
}
nav {
  flex-basis: 80%;
}
ul {
  list-style: none;
  display: flex;
  text-transform: uppercase;
}
ul li{
  padding-left: 20px;
  padding-right: 20px;
}
ul li a {
  position: relative;
}
ul li a:after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 5px;
  height: 2px;
  width: 100%;
  background: #fff;
  opacity: 0;
  transition: all 0.2s linear;
}
ul li:hover a::after {
  opacity: 1;
  bottom: 0px;
}
ul li a {
  color: #fff;
  letter-spacing: 1px;
}
ul li.btn {
  display: none;
}
.mobie-icon {
  display: none;
}
.mobie-icon:hover {
  cursor: pointer;
}
.mobie-icon span {
  color: #fff;
  vertical-align: middle;
}
@media all and (max-width: 768px){
  .is-mobie {
    height: 100vh;
    overflow: hidden;
  }
  .is-mobie nav {
    display: block;
    left: 0;
  }
  .is-mobie .mobie-icon .open {
    display: none;
  }
  .is-mobie .mobie-icon .close {
    display: block;
  }
  .logo-wrap {
    flex: 1;
  }
  .mobie-icon {
    display: block;
  }
  .mobie-icon .close {
    display: none;
  }
  nav {
    position: fixed;
    left: 100%;
    top: 82px;
    background-color: #EEEEEE;
    width: 100%;
    height: 100vh;
    padding-top: 35px;
    transition: left .3s linear;
  }
  nav ul{
    display: block;
  }
  nav ul li {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  nav ul li a{
    color: #000;
  }
}

Vậy là xong, một menu đơn giản!

Bạn có thể tùy chỉnh thêm theo ý mình như là khung search, icon mạng xã hội, tôi chỉ tập trung vào repsonsive.

Xem thêm: