Code css tạo menu responsive sử dụng flexbox

Code WordPress 14/06/2023 In trang này

Flexbox Layout (hay còn gọi là Flexible Box) là một kiểu dàn trang có khả năng tự cân đối kích thước, thay đổi chiều rộng/chiều cao và thứ tự phần tử bên trong để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình.

Với bố cục thông thường, bạn cần phải thiết lập kích thước của phần tử, thiết lập hiển thị dạng block hay inline, cho nó float, còn với Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn..

Flexbox Layout phù hợp nhất để thiết lập bố cục ở quy mô nhỏ, còn thiết lập bố cục với phạm vi lớn hơn thì vẫn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới (grid layout)

Hiện tại có rất nhiều hướng dẫn trên mạng hướng dẫn chi tiết về cách sử dụng flexbox nên bạn có thể tìm và học, trong bài viết này mình chỉ share code css tạo menu responsive sử dụng flexbox mà mình hay sử dụng trong các dự án.

Code HTML

<body> 
  <header class="flex-row flex-container flex-row--align-v-center">           
    <nav>
      <ul class="menu">
        <li class="logo"><h1><a href=""><i class="material-icons">
          emoji_people
          </i></a></h1></li>
        <li class="menu-item"><a href="#">home</a></li>
        <li class="menu-item"><a href="#">about</a></li>
        <li class="menu-item"><a href="#">service</a></li>
        <li class="menu-item"><a href="#">projets</a></li>
        <li class="menu-item"><a href="#">blog</a></li>
        <li class="menu-item"><a href="#">contact</a></li>
        <li  class="menu-item search">
          <form id="search">
            <input type="search" placeholder="search">
          </form>
        </li>
        <li  class="menu-item tel font-2l">01 42 43 45 46</li>
        <li class="toggle">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </li>
      </ul>
    </nav>
  </header>
</body>

Code CSS

body {
  height: 100vh;
background-image: linear-gradient( 109.6deg,  rgba(5,84,94,1) 16%, #bbb 91.1% );
}

/*SIMPLE FLEX GRID*/

.flex-container {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1em;
}

@media(min-width:540px) {
  .flex-container {
    max-width: 540px;
  }
}

@media(min-width:768px) {
  .flex-container {
    max-width: 768px;
  }
}

@media(min-width:992px) {
  .flex-container {
    max-width: 992px;
  }
}

@media(min-width:1200px) {
  .flex-container {
    max-width: 1200px;
  }
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-bottom: 1em;
}

/*MENU*/

nav {
  width: 100%;
}

.logo a {
  text-align: left;
}

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 15px;
  list-style-type: none;
  background-color: #fff;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -ms-flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.menu a {
  display: block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: arial,sans-serif;
  font-size: 1rem;
  color: #999;
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

.menu a:hover {
  text-decoration: none;
  color: #3fa7d5;
}

.menu-item {
  display: none;
  position: relative;
  order: 2;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #fff;
  text-align: center;
  background: #eee;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
}

.menu-item.active {
  display: block;
}

/*BURGER MENU*/

.toggle {
  order: 1;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
}

.line {
  display: block;
  width: 30px;
  height: 3px;
  margin: 8px auto;
  background-color: #eee;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.is-active .line:first-child {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -ms-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.is-active .line:nth-child(2) {
  opacity: 0;
}

.is-active .line:nth-child(3) {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -ms-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/*TEL INPUT*/

.tel {
  font-size: 1.3125rem;
  color: #fff;
  background-color: #93c04d !important;
}

.tel:before {
  content: '';
  content: "phone_iphone";
  position: absolute;
  top: 18px;
  left: 17px;
  width: 13px;
  height: 18px;
  font-family: 'Material Icons';
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-font-feature-settings: 'liga' 1;
  -moz-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga' 1;
}

/*SEARCH INPUT*/

#search input {
  outline: none;
}

#search input::-webkit-search-decoration,
#search input::-webkit-search-cancel-button {
  display: none;
}

#search input[type=search] {
  /*background: url("../img/search-loop.png") no-repeat;
  background-position: 5px 10px;*/

  position: relative;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 10px;
  border: none;
  border-radius: 10em;
  font-family: inherit;
  font-size: 100%;
  color: transparent;
  background-color: transparent;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  cursor: pointer;
}

#search::before {
  content: "search";
  position: absolute;
  top: 15px;
  font-family: 'Material Icons';
  font-size: 20px;
  color: #999;
  -webkit-font-feature-settings: 'liga' 1;
  -moz-font-feature-settings: 'liga' 1;
  font-feature-settings: 'liga' 1;
}

#search input[type=search]:focus {
  width: 130px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}

#search input::-webkit-input-placeholder {
  color: transparent;
}

#search input:-moz-placeholder {
  color: transparent;
}

#search input::-moz-placeholder {
  color: transparent;
}

#search input:-ms-input-placeholder {
  color: transparent;
}

#search input[type=search]:focus::-webkit-input-placeholder {
  color: #717171;
}

#search input[type=search]:focus:-moz-placeholder {
  color: #717171;
}

#search input[type=search]:focus::-moz-placeholder {
  color: #717171;
}

#search input[type=search]:focus:-ms-input-placeholder {
  color: #717171;
}

/*DESKTOP*/

@media all and (min-width:992px) {
  .menu {
    align-items: center;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
  }

  .logo {
    order: 0;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
  }

  .toggle {
    display: none;
  }

  .menu-item {
    display: block;
    order: 1;
    width: auto;
    padding: 9px 15px;
    border-bottom: none;
    background: none;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
  }

  .tel {
    padding: 17px 18px 17px 70px !important;
  }
}

Code JS

$('.toggle').click(function(){
  $(this).toggleClass("is-active");
    if ($(".menu-item").hasClass("active")) {
      $(".menu-item").removeClass("active");
    } else {
      $(".menu-item").addClass("active");
    }
  });

Menu bao gồm logo, menu cuối cùng là menu burger

Thêm liên hệ đa kênh AIO cho website

Tắt email thông báo “Đã có một lỗi nghiêm trọng trên trang web của bạn”

Lọc sản phẩm theo từ khoá (tag) trong WooCommerce wp-admin

Trong phiên bản di động

Mục menu đầu tiên là class “logo” để phân biệt với phần còn lại của các mục menu

logo hiển thị và xuất hiện đầu tiên trong màn hình, nhờ thuộc tính order: 0. Nếu bạn không chỉ định thứ tự của nó và phần tử tiếp theo bắt đầu bằng thứ tự: 1, vị trí của logo sẽ mặc định là 0

Chuỗi các mục menu xuất hiện cuối cùng với thứ tự 2 và được ẩn bằng display:none

Menu burger có thuộc tính: order:1 và chỉ hiển thị trong phiên bản di động.

Giao diện trên máy tính

Logo vẫn ở vị trí 0.

Menu burger thay đổi thành display: none và do đó trở nên vô hình.

Phần còn lại của các mục menu sẽ hiển thị thông qua display:block . Họ trở về vị trí tự nhiên với một mệnh lệnh: 1.

Đối với phần còn lại, mình sử dụng các biểu tượng của google “material icons”, ở dạng phần tử giả hoặc nội tuyến. Tôi cũng thêm một trường tìm kiếm có thể thu gọn, mở ra khi nhấp chuột. Trình giữ chỗ chỉ xuất hiện khi trường được bung rộng. Mã cho trường này đặc biệt dài, bởi vì tôi nhận thấy rằng bằng cách bao thanh toán mã, hiệu ứng mong đợi không còn hoạt động nữa…

Live demo bạn có thể xem ở codepen nhé.

See the Pen
flexbox menu/expandable search box/material icons by Tien Dung Dev (@daotiendung)
on CodePen.

Từ khóa Code hayCode Snippets

Tiến Dũng Đào

Tiến Dũng Đào chuyên quản lý, vận hành các dịch vụ website. Anh có nhiều năm kinh nghiệm về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu thích WordPress với hơn 5 năm phát triển theme và plugin. Sở thích của anh là đọc, viết blog, đi du lịch, tập võ và chia sẻ các kiến thức cho mọi người.