css- multi-level menu DropDown

Trước tiên tôi phải nói là đây không phải là bài viết "mì ăn liền". Mà là bài viết để bạn đọc hiểu về bản chất của việc thiết kế menu thả xuống nhiều cấp.
Trước tiên để hiểu bài bạn cần nắm được kiến thức cơ bản HTML & CSS chỉ có vậy thôi, không cần ngôn ngữ cao siêu nào khác.
Để bắt đầu tạo một menu thả xuống, tất nhiên ta phải đi tìm hiểu làm thử một cái ví dụ đơn giản nhất khi di chuột vào một đối tượng gốc, sẽ hiển thị ra một đối tượng thứ 2.
Ví dụ đơn giản nhất:

<style>
.layer0{position: relative;}
.layer0 .layer1{display:none;}
.layer0:hover .layer1{display:block; position: absolute;}
</style>
<div class="layer0" >layer0 <div class="layer1">layer1</div></div>

layer0

layer1

Nếu thêm những cấp nữa thì thế nào?
Bao nhiêu cấp ta viết bấy nhiêu hiệu ứng hover. Khi di chuột vào cấp n thì cấp n+1 sẽ xuất hiện

<style>
.layer00{position: relative;}
.layer00 .layer01{display:none;}
.layer00:hover .layer01{display:block; position: absolute;}
.layer00 .layer01 .layer02{display:none;}
.layer00:hover .layer01:hover .layer02{display:block; position: absolute; }
.layer00 .layer01 .layer02 .layer03{display:none;}
.layer00:hover .layer01:hover .layer02:hover .layer03{display:block; position: absolute; }
</style>
<div class="layer00">layer00
<div class="layer01">layer01
<div class="layer02">layer02
<div class="layer03">layer03</div>
</div>
</div>
</div>

layer00

layer01

layer02

layer03

Hoặc có thể viết gọn hơn:

<style>
.layer-0{position: relative;}
.layer-1,.layer-2,.layer-3{display:none;position: absolute;}
.layer-0:hover .layer-1,.layer-1:hover .layer-2,.layer-2:hover .layer-3{display:block;}
</style>
<div class="layer00">layer00
<div class="layer01">layer01
<div class="layer02">layer02
<div class="layer03">layer03</div>
</div>
</div>
</div>

layer-0

layer-1

layer-2

layer-3

---

Như vậy đó là đối với những trường hợp menu có số cấp đã xác định trước, mặc dù chúng ta thường chỉ làm menu có 2,3,4 đến 5 cấp là cùng. Nhưng đôi khi lại muốn vô số cấp, có thể là 10 hoặc 20 cấp mà không xác định trước, chẳng lẽ cứ lặp lại 10-20 lần css như thế.
Để giải quyết vấn đề này về mặt HTML chúng ta sẽ dùng <li>...</li> thay cho <div...>...</div>
Về mặt css sẽ dùng li:hover >ul thay cho hàng loạt lớp con của một đối tượng.

<style>
#nav {
display:inline-block;
width:100%;
background:#ccc;
}
#nav li {
position: relative;
list-style:none;
float:left;
margin:1;
padding:10;
}
#nav ul {
display: none;
position: absolute;
}
#nav li:hover >ul {
display: block;
z-index:1;
padding:0;
width:110px;
background:#E4F1F1;
box-shadow:5px 5px 20px 2px #999999;
}
#nav1 ul li { float:none; margin:0;}
#nav1 ul ul { left:100px;top:0;}
</style>
<ul id="nav">
<li>001</li>
<li>002</li>
<li>004
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>005
<ul>
<li>1-1</li>
<li>1-2+
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3+
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

• 001
• 002
• 004
  • ...
  • ...
  • ...
• 005
  • 1-1
  • 1-2+
    • 2-1
    • 2-2
    • 2-3+
      • 3-1
      • 3-2
      • 3-3

---

Hoặc có thể viết :

<style>
#nav1 {
display:inline-block;
width:100%;
background:#ccc
}
#nav1 li {
position: relative;
list-style:none;
float:left;
margin:1;
padding:10;
}
#nav1 li:hover > ul { visibility:visible; }
#nav1 ul {
visibility:hidden;
position:absolute;
z-index:1;
padding:0;
width:110px;
background:#E4F1F1;
box-shadow:5px 5px 20px 2px #999999;
}
#nav1 ul li { float:none; margin:0;}
#nav1 ul ul { left:100px;top:0;}
</style>
<ul id="nav1">
<li>001</li>
<li>002</li>
<li>004
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li>005
<ul>
<li>1-1</li>
<li>1-2+
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3+
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

• 001
• 002
• 004
  • ...
  • ...
  • ...
• 005
  • 1-1
  • 1-2+
    • 2-1
    • 2-2
    • 2-3+
      • 3-1
      • 3-2
      • 3-3

Như vậy code cơ bản đã có, vấn đề còn lại của mọi người là thêm gia vị (màu mè, hiệu ứng trượt, bóng đổ, bo góc, khung hình) vào để có một phong cách sinh động và phù hợp với trang sẽ ứng dụng.

thaotrinh bendoi.vn

BLOG.bendoi.vn