Tạo Drop Menu nhiều cấp ( Hướng dẫn chi tiết)

Đăng bởi Admin | 11/7/13 | 0 nhận xét

create drop menu by css for blogger - Hướng Dẫn Chi Tiết Tạo Drop Menu Nhiều Cấp

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êmposition: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-2qua 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-2 qua 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-11đ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.

Xem thêm:

Tạo menu xổ dọc với CSS 3 ( hướng dẫn chi tiết)

Theo: namkna

Thu thuat vi tinh

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

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

11/7/13