Hướng Dẫn Chi Tiết Tạo Drop Menu Nhiều Cấp

mikalaza tháng 2 11, 2018 0 Nhận xét

Namkna đã viết rất nhiều bài viết tạo drop menu cho web, blog... nhưng tất cả đều là code có sẵn mà chưa hướng dẫn chi tiết về cách làm nên hôm nay mình viết hướng dẫn này nhằm hỗ trợ mọi người tự thiết kế ra drop menu cho riêng mình. Bài viết này mình sẽ hướng dẫn tạo drop menu từ 1 đến 3 cấp. Tất nhiên khi đã hiểu rồi thì bạn muốn làm bao n.hiêu cấp cũng được.

View Demo

Phần 1: Một số lưu ý trước khi bắt đầu:

1. Về CSS: Một số css mình sẽ sử dụng trong thủ thuật này:

display: đây là thuộc tính ẩn hiện menu con.

display:none; ẩn module đi
display:block; hiện module vào 1 block
display:inline; xếp các module vào cùng hàng ngang (để tạo menu ngang)

z-index: là thuộc tính sắp xếp các lớp menu.
margin: và padding: là 2 thuộc tính sắp xếp vị trí tương đối của các đối tượng với nhau
width: là thuộc tính qui định chiều rộng của module
ngoài ra còn 1 số thuộc tính css khác nữa để trang trí cho menu. Bạn có thể tìm hiểu chi tiết tại bài viết CSS căn bản

2. Để hỗ trợ cho việc tạo drop menu thì bạn nên tạo 1 file html để làm. Sau khi làm xong chỉ việc lấy code gắng vào template cho đỡ mất thời gian.

Việc cần làm là click chuột phải trên destop => New =>Text Document và đổi tên file đó thành menu.html

Dán đoạn code sau vào file menu.html để làm menu.

<html>
    <head>
    <style type='text/css'>
    Đây là vị trí đặt css
    </style>
    </head>
    <body>
    Đây là vị trí đặt menu
    </body>
    </html>

Phần 2. Bắt đầu vào việc nào

1- Tạo Menu chính.

- Đâu là phần đầu tiên của Menu chính mà mọi người nhìn thấy trong chế độ hoạt động (tức là khi chúng ta chưa dê chuột vào). Phần này bao gồm một danh sách các Tên được sắp xép liên kề nhau và theo chiều ngang.
- Các tên này được chứa trong các Class và Id khác nhau. Tên của các id và class này có thể khác nhau tùy theo nhà thiết kế nhưng về cơ bản cấu trúc HTML của nó là như nhau:

<ul id='menu'>
   <li class='main-menu'><a href='URL 1' target='_blank'>Name 1</a></li>
   <li class='main-menu'><a href='URL 2' target='_blank'>Name 2</a></li>
</ul>

- Nếu chỉ dừng ở đây thì các bạn sẽ chỉ nhận được một cột hàng dọc như hình dưới:.

- Để xóa các dấu chấm ở đầu mỗi menu chúng ta sử dụng

ul {list-style-type:none;}

- Xếp theo hàng ngang

li.main-menu {float:left}

Ở đây mình để các tiêu đề load qua trái. Các bạn có thể để load qua phải hoặc trung tâm bằng cách thay đổi left thành center hoặc right.
- Để bỏ phần gạch chận các bạn dùng mã sau:

ul#menu a {text-decoration:none; padding:0 5px;color:#990066;font-size:20px}

Mã padding:0 5px là khoảng cách giữa 2 tên của menu phần này bạn có thể thay đổi. và #990066 là màu chữ. font-size:20px là kích thước chữ trên menu
- Thêm nền cho menu và khi dê chuột vào:

#menu{
background:#999;
float:left;
width:100%;
}

Thuộc tính float:left; bạn không thể bỏ qua vì như thế nền sẽ không xuất hiện, và background:#999; là màu nền
- Đến đây để ý các bạn sẽ thấy tên các menu cách các lề của trình duyệt một khoảng nhìn khá sấu khắc phục bằng cách sử dụng đoạn mã sau:

ul, li {margin:0; padding:0}

2- Tạo menu con cấp 1.

Bây giờ ta sẽ tạo các menu con (sub-menu) cho menu chính. Ta chỉ cần thêm các đoạn code bên dưới vào trước thẻ đóng </li> (phần mình tô màu xanhở trên) .

      <ul class='menu-1'>
         <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a></li>
         <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a></li>
      </ul>

- Khi đó bạn sẽ được như sau:

<ul id='menu'>
  <li class='main-menu'><a href='URL 1' target='_blank'>Name 1</a>
    <ul class='menu-1'>
      <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a></li>
      <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a></li>
    </ul>
  </li>
  <li class='main-menu'><a href='URL 2' target='_blank'>Name 2</a>
    <ul class='menu-1'>
      <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a></li>
      <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a></li>
    </ul>
  </li>
</ul>

Đến đây ta được 2 cột như sau:

- Đầu tiên ta phải ẩn đi các menu con (sub menu) chỉ để xuất hiện menu chính thôi.

ul.menu-1{display:none}

- Tiếp theo là hiệu ứng hover hiện các menu con vừa ẩn:

li.main-menu:hover ul.menu-1 {display:block;z-index:100}

Khi dê chuột vào class main-menu thì các sub menu có class menu-1 sẽ hiển thị.
Ở trên mình thêm cả thuộc tính z-index:100 để menu hiển thị tốt với những blog nền có thuộc tính nổi.

- Giờ thì menu đã hiện ra nhưng khi rê chuột vào Name 1 thì Name 2 bị đẩy qua phải. Nguyên nhân là do thuộc tính float lúc đầu của main-menu.

Để khắc phục tình trạng này ta cho vị trí các menu-1 lệ thuộc vào các main-menu bằng cách sử dụng 2 thuộc tính position:relative; và position:absolute; cụ thể ta sẽ thêm position:relative; vào li.main-menu và position:absolute; vào ul.menu-1. Lúc này vị trí menu-1 sẽ bị lệ thuộc vào main-menu.

li.main-menu {position:relative;}
ul.menu-1 {position:absolute;width:200px;background:#999;}

Tiêu đề hết bị trượt rồi nhưng giờ các tiêu đề con bị nhảy xuống hàng. Giải quyết bằng cách thêm thuộc tính width:200px cho ul chứa các tiêu đề con để qui định chiều rộng cho ul chính là phần mình tô đậm ở trên.. Và cho nền vào nhìn cho đẹp background:#999;

3- Tạo menu con cấp 2.

Bây giờ ta sẽ tạo các menu con (sub-menu) cho menu chính. Ta chỉ cần thêm các đoạn code bên dưới vào trước thẻ đóng </li> (phần mình tô màu vàngở trên).

<ul class='menu-2'>
          <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li>
          <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li>
        </ul>

- Khi đó ta được như sau:

<ul id='menu'>
  <li class='main-menu'><a href='URL 1' target='_blank'>Name 1</a>
    <ul class='menu-1'>
      <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a>
        <ul class='menu-2'>
          <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li>
          <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li>
        </ul>
      </li>
      <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a>
        <ul class='menu-2'>
          <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li>
          <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class='main-menu'><a href='URL 2' target='_blank'>Name 2</a>
    <ul class='menu-1'>
      <li class='sub-1'><a href='URL 1.1' target='_blank'>Name 1.1</a>
        <ul class='menu-2'>
          <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li>
          <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li>
        </ul>
      </li>
      <li class='sub-1'><a href='URL 1.2' target='_blank'>Name 1.2</a>
        <ul class='menu-2'>
          <li class='sub-2'><a href='URL 2.1' target='_blank'>Name 2.1</a></li>
          <li class='sub-2'><a href='URL 2.2' target='_blank'>Name 2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

- Lúc này ta sẽ được như sau:

- Ẩn các menu-2 đi và hiện nó ra khi rê chuột vào sub-1 bằng 2 đoạn css sau (tương tự như ở 1 cấp)

ul.menu-2 {display:none;background:#999}
li.sub-1:hover ul.menu-2 {display:block}

background:#999 là màu nền của sub menu 2

- Xuất hiện vấn đề là menu-2 lại ẩn/hiện ở dưới chứ không phải nằm bên phải. Ta đưa menu-2 qua phải sub-1. Cũng như ở drop 1 cấp ta dùng bộ thuộc tính position:relative; và position:absolute; cho sub-2 và menu-2 để menu-2 lệ thuộc vào sub-1 bằng cách thêm đoạn css sau:

li.sub-1 {position:relative;}
ul.menu-2 {position:absolute;}

- Lúc này xuất hiện hiện tượng menu đè lên nhau:

Chú ý: lúc nãy mình đã gắn chiều rộng cho menu-1 là 200px hay nói cách khác đoạn màu xám trong hình có chiều rộng là 200px vậy ta cần đẩy menu-2qua phải 1đoạn là 200px. Mặc khác do vị trí menu-2 đã lệ thuộc vào sub-1 nên chỉ cần mép trái của menu-2 cách mép trái sub-1 1đoạn 200px là xong. Ta thực hiện việc này bằng cách thêm đoạn css sau:

ul.menu-2 {left:200px; top:0px}

Trong đoạn css trên ngoài việc cách mép trái của sub-1 thì ta cần mép trên của menu-2 trùng với mép trên của sub-1 nên ta gáng thêm thuộc tính top:0px. Và kết quả sẽ thế này

Tốt rồi giờ thì menu-2 đã qua phải sub-1 rồi nhưng lại bị xuống hàng, nguyên nhân là chiều rộng menu-2 không đủ. Một lần nữa ta gán thuộc tính width:200px cho menu-2.

ul.menu-2 {width:200px;}

Và kết quả sẽ như thế này

Vậy là ta đã hoàn thành xong drop menu 2 cấp.

4. Menu Drop 3 cấp trở lên.

Về cơ bản thì drop từ cấp thứ 3 trở đi nó chẳng khác gì drop cấp 2, cũng chỉ bao nhiêu đó vấn đề, đọc tới đọc lui rồi cũng sẽ làm được thôi. Nếu có thắc mắc gì hay trong quá trình test có lỗi gì mà mình chưa đề cập thì để lại comment bên dưới mình sẽ bổ sung cho đầy đủ.

Còn 1 vấn đề nữa là hiệu ứng khi drop ví dụ như trượt xuống trượt wa này kia là thuộc về mảng jquery và script. Những cái này sẽ khó hơn rất nhiều nên mình không đề cập đến trong bài viết này. Từ từ rùi sẽ tới thôi :)

5. Rút gọn css.

Từ đầu bài tới giờ mình đưa ra khá nhiều các css và nhiều css như vậy thì khi làm việc sẽ không được mượt lắm nên để menu này làm việc thật sự đạt hiệu quả cao nhất bạn cần tham khảo thêm mục rút gọn css trong bài viết css căn bản.

thank: Voquocan

MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ

Phụ trách thiết kế : Mr.Mika

Call me : 0926.340.479 - 0927.927.000 - Email : Lienhe365@gmail.com

Phụ trách kỹ thuật và kinh doanh : Mr. Sơn

Call me : 0919.083.000 - 0927.927.000 Email : Setup247@Gmail.Com
Hỗ trợ ZALO 24/24 : Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !