Menu đa cấp thích ứng-responsive chỉ với css cho blogspot

Ở bài trước đã chia sẻ menu đa cấp responsive có sử dụng javascript cho blogspot,có 2 tầng sub menu tức 3 cấp.Tại bài này cũng là menu responsive 3 cấp nhưng hoàn toàn là css3.

Dù không ít thì nhiều các file javascript cũng ảnh hưởng tới tốc độ load của blog nên ta hạn chế việc sử dụng javascript là việc cần thiết trong thiết kế blogspot.

Với xu hướng sử dụng template có giao diện cấu trúc với nhiều nhãn ngoài trang chủ thì bản thân template đã phải gồng mình kéo một số lượng lớn javascript rồi nếu không loại bớt một số chức năng có javascript và thay thế chúng bằng loại chỉ dùng css thì template load rất chậm gây khó chịu cho khách truy cập.

Dưới đây hướng dẫn tạo menu đa cấp thích ứng-responsive chỉ với css cho blogspot

Menu đa cấp thích ứng-responsive chỉ với css cho blogspot

Xem thử:

DEMO

Bước 1:
Việc đầu tiên bạn cần vào chỉnh sửa mẫu(Bên trực tiếp trên blog) và thay đoạn:
<b:if cond='data:blog.isMobile'> 
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> 
<b:else/> 
<meta content='width=1100' name='viewport'/> 
</b:if>
Thành:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> 
Và tại bên Điện thoại di động bạn check vaog dòng thứ 2- Không. Hiển thị mẫu dành cho máy tính trên điện thoại di động.
Và lưu lại.Đây chính là bước tắt giao diện mobile mặc định của blogger.
Bước 2:
Các bạn vào chỉnh sửa mẫu dán đoạn code sau vào trước thẻ ]]></b:skin>
.toggle, [id^=drop] {
 display: none;
}
nav {
  margin: 0;
  padding: 0;
  background-color: #254441;
  z-index:5
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  z-index:5
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #254441;
  z-index:5
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #000000; }

nav a:hover { background-color: #000000; }

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
  z-index:5
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
  z-index:5
}

li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
@media all and (max-width : 768px) {
nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #254441;
  padding: 0 20px;
  color: #FFF;
  font-size: 22px;
  font-weight:bold;
  line-height: 60px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: #000000; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: #000000; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #212121; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}
Bước 3:
Bạn vào phần bố cục và thêm một tiện ích trên header ở vị trí bạn muốn hoặc bạn vào trong mẫu ở vị trí ngay trên thẻ đóng </div> kết thúc phần header thêm đoạn code sau.
<nav>
  <label for="drop" class="toggle">&#8801;  Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li> 
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">Service +</label>
      <a href="#">Service</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li> 
      
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Portfolio +</label>
      <a href="#">Portfolio</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Portfolio 1</a></li>
        <li><a href="#">Portfolio 2</a></li>
        <li> 
          
          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Works +</label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
Publis: 

2 comments

  1. sao bên mình không có code
    <b:if cond='data:blog.isMobile'...
    vậy bạn
    1. Đoạn đó chỉ các mẫu simple của blogger mới có còn các mẫu chia sẻ thì người ta đã thay rồi nếu chưa thấy có thì thêm vào
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji