Hướng dẫn cài đặt menu mobile hamburger đa cấp chỉ với css

Bạn đang tìm một mẫu menu mobile hamburger đa cấp chỉ với css - CSS only multi level hamburger mobile menu thì mẫu menu tại bài viết này là cái bạn đang cần.

Menu dùng cho blog/web thích ứng với thiết bị di động vô cùng đa dạng về mẫu mã, nhưng vấn đề là có loại cần dùng javascript và có sự hỗ trợ của jquery tuy mượt mà nhưng lại ảnh hưởng không nhỏ tới tốc độ tải trang.

Tại bài viết này sẽ hướng dẫn các bạn cài đăt một mẫu menu mobile đa cấp chỉ sử dụng css, cũng rất mượt mà khi hoạt động.

Menu mobile hamburger đa cấp chỉ với css

Demo

Hướng dẫn cài đặt menu mobile hamburger đa cấp chỉ với css

+ Thêm CSS

#mobileNav {
  padding: 5px;
}
#top-nav {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}
/*hamburger*/
.hamburgerspan {
  cursor: pointer;
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #222;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

.hamburgerspan:first-child {
  transform-origin: 0% 0%;
}
.hamburgerspan:nth-last-child(2) {
  transform-origin: 0% 100%;
}
#top-nav:checked ~ .hamburgerspan {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#top-nav:checked ~ .hamburgerspan:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#top-nav:checked ~ .hamburgerspan:nth-last-child(2) {
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}
input[id^="menu-"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity:0;
}
div[id^="menu-cont-"] {
  border-right: 1px solid #ccc;
  width: 100%;
  max-width: 440px;
  background-color: #fff;
  padding: 5px;
  box-sizing: border-box;
  margin: 0;
  height: 100vw;
  position: fixed;
  margin: 0;
  overflow: auto;
  top: 0;
  left: 0;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.35s;
  padding-right:0;
}
#top-nav:checked ~ div[id^="menu-cont-"],
input[id^="menu-"]:checked ~ div[id^="menu-cont-"] {
  transform: translate3d(0, 0, 0);
}
li.nav-item {
  width: 100%;
  font-size: 16px;
  list-style: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  padding: 15px 10px 15px 20px;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  position:relative;
}
div[id^="menu-cont-"] li.nav-item:last-child {
  border: 0;
}
.menu-ul {
  padding: 0;
  margin: 25px 0 0 0;
}
.nav-item.sub-menu:after, label.menu-label:before {
  content: "";
  border: 2px solid transparent;
  border-top-color: transparent;
  border-top-style: solid;
  border-top-width: 2px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-left-style: solid;
  border-left-width: 2px;
  display: block;
  width: 7px;
  height: 7px;
  margin-bottom: -5px;
  float: right;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-color: rgba(0, 0, 0, 0.3);
  border-top: none;
  border-top-color: currentcolor;
  border-left: none;
  border-left-color: currentcolor;
  margin-top: 10px;
}
label.menu-label {
  width: 100%;
  display: block;
  padding: 15px 10px 15px 20px;
  border-bottom: 1px solid #ccc;
  color: #222;
  font-weight: bold;
  box-sizing: border-box;
  background-color:#dedede;
}
label.menu-label:before {
  float:left;
  margin:5px;
  margin-left:0px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#menu-cont-1{z-index:1001;}
#menu-cont-2{z-index:1002;}
#menu-cont-3{z-index:1003;}
#menu-cont-4{z-index:1004;}
#menu-cont-5{z-index:1005;}
#menu-cont-6{z-index:1006;}
#menu-cont-7{z-index:1007;}
.hamburgerspan{z-index:9998;}
#top-nav{z-index:9999;}

+ Thêm HTML

<div id="mobileNav">
  <input type="checkbox" id="top-nav" />
  <span class="hamburgerspan"></span>
  <span class="hamburgerspan"></span>
  <span class="hamburgerspan"></span>
  <div id="menu-cont-1">
    <ul class="menu-ul">

    <li class="nav-item"><a href='#'> item 1(Home)</a></li>

    <li class="nav-item sub-menu"> item 2
    <input type="checkbox" id="menu-1"/>
    <div id="menu-cont-2">
      <ul class="menu-ul">
        <label class="menu-label" for="menu-1">Item 2</label>
      <li class="nav-item"><a href='#'>item 2-1</a></li>
      <li class="nav-item"><a href='#'>item 2-2</a></li>
      <li class="nav-item"><a href='#'>item 2-3</a></li>
      <li class="nav-item"><a href='#'>item 2-4</a></li>
    </ul>
      </div>
    </li>
  
    <li class="nav-item sub-menu"> item 3
    <input type="checkbox" id="menu-2"/>
    <div id="menu-cont-3">
      <ul class="menu-ul">
        <label class="menu-label" for="menu-2">Item 3</label>
      <li class="nav-item"><a href='#'>item 3-1</a></li>
      <li class="nav-item"><a href='#'>item 3-2</a></li>
      <li class="nav-item"><a href='#'>item 3-3</a></li>
      <li class="nav-item"><a href='#'>item 3-4</a></li>
    </ul>
      </div>
    </li>

    <li class="nav-item"><a href='#'> item 4</a></li>
    <li class="nav-item"><a href='#'> item 5</a></li>
    <li class="nav-item"><a href='#'> item 6</a></li>
    </ul>
  </div>
</div>

Lưu ý:

Tại code mẫu có menu-cont-1 là dùng cho các menu đơn, và có 2 sub menu là:

menu-1, menu-cont-2 và menu-2, menu-cont-3

Nếu muốn thêm sub menu thì cũng tăng các trị số theo thứ tự.