Hướng dẫn chi tiết cách tạo menu xổ dọc với CSS 3

Hiện nay menu là thành phàn quan trọng của blogger/website. Blog của bạn sẽ chuyên nghiệp hơn. Có rất nhiều cách làm thanh menu này như dùng javascript dùng jquery hay CSS. Mình dã giới thiệu rất nhiều loại menu bạn có search trên google với từ khóa dropmenu site:namkna.blogspot.com. Tiếp theo bài viết hướng dẫn làm Dropmenu nhiều cấp trước đây hôm nay mình sẽ hướng dẫn tạo menu xổ dọc 1 cấp với CSS 3.
Drop menu with CSS 3
Hiện nay menu là thành phàn quan trọng của blogger/website. Blog của bạn sẽ chuyên nghiệp hơn. Có rất nhiều cách làm thanh menu này như dùng javascript dùng jquery hay CSS. Mình dã giới thiệu rất nhiều loại menu bạn có search trên google với từ khóa dropmenu site:namkna.blogspot.com. Tiếp theo bài viết hướng dẫn làm Dropmenu nhiều cấp trước đây hôm nay mình sẽ hướng dẫn tạo menu xổ dọc 1 cấp với CSS 3.

Để thấy rõ hơn các bạn hãy xem demo:View Demo

Ảnh minh họa:
Drop menu with CSS 3
Trong bài viết này mình sẽ chí làm 2 phần.
Phần 1: Giới thiệu code hoàn chỉnh của Menu drop với CSS3
Phần 2: Các bước để tạo nên menu với CSS 3. Với phần này bạn sẽ học được cách để tạo một menu với CSS.
Sau đây ta đi tìm hiểu từng phần.

Phần 1: Giới thiệu code hoàn chỉnh của Menu drop với CSS3

☼ Cách tiến hành: 
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin>  (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ  ]]></b:skin> .
/*container list*/
#main_menu{
background-color: #990066;
background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
font-family:sans-serif;
list-style-type:none;
text-align:center;
float:left;
width:100%;
border-radius:5px;
box-shadow: 3px 3px 2px #888888;
}
/*top list items*/
.top_menu {
float:left;
position:relative;
border-right:1px solid #ff00cc;
border-left:1px solid #ff00cc;
margin-left:-1px;
}
/*anchors*/
#main_menu a, #main_menu a:hover {
background-color: #990066;
background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
color:#ffffff;
display:block;
padding:5px;
text-decoration:none;
width:80px;
border-top-right-radius:2px;
border-top-left-radius:2px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
/*sub menu list*/
#main_menu ul {
list-style:none;
position:absolute;
display:none;
}
/*sub menu when hover on top item*/
#main_menu li:hover ul {
display:block;
}
/*sub menu list items*/
#main_menu ul li {
padding-top:1px;
margin-left:-25%;
}
/*sub menu list anchors*/
#main_menu ul a {
color:#ffff00;
box-shadow: 3px 3px 2px #888888;
}
6- Lưu mẫu lại.
7- Vào Bố cục (Layout) => Thêm tiện ích (Add widget) => Tạo một tiện ích HTML/Javarscipt và dán code bên dưới vào:
<ul id="main_menu">
  <li class="top_menu"><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub menu 1.1</a></li>
      <li><a href="#">Sub menu 1.2</a></li>
      <li><a href="#">Sub menu 1.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub menu 2.1</a></li>
      <li><a href="#">Sub menu 2.2</a></li>
      <li><a href="#">Sub menu 2.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">Sub menu 3.1</a></li>
      <li><a href="#">Sub menu 3.2</a></li>
      <li><a href="#">Sub menu 3.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 4</a>
    <ul>
      <li><a href="#">Sub menu 4.1</a></li>
      <li><a href="#">Sub menu 4.2</a></li>
      <li><a href="#">Sub menu 4.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 5</a></li>
</ul>
8- Lưu tiện tích lại và xem kết quả.

Phần 2: Các bước để tạo nên menu với CSS 3

- Phần này giải thích cho cách tạo một menu các bạn có thể đọc thêm cho hiểu. Để chỉnh sửa Menu còn không thì có thể bỏ qua.
- Để tiện bạn hãy tạo một trang HTML trên máy bằng cách vào Start=> All program =>  Accesories => Notepad và pate đoạn code sau vào:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
Phần để chèn code CSS
</style>
</head>
<body>
Phần để chèn code menu
</body>
</html>
- Bạn bấm Ctrl + S (hoặc vào file => save as) tại mục Save as type các bạn chọn all file  để cho phép lưu được file dưới dạng HTML và tại mục File name các bạn đánh Menu.html vào và bấm OK.
Giờ chúng ta bắt tay vào làm:
1- Menu chính!
Phần này là phần hiển thị của menu. Tức là các tiêu đề mà ta nhìn thấy khi xem một menu. Về cơ bản code của các menu xổ dọc đều có dạng như sau:
<ul id="main_menu">
  <li class="top_menu"><a href="#">Menu 1</a></li>
  <li class="top_menu"><a href="#">Menu 2</a></li>
  <li class="top_menu"><a href="#">Menu 3</a></li>
  <li class="top_menu"><a href="#">Menu 4</a></li>
  <li class="top_menu"><a href="#">Menu 5</a></li>
</ul> 
Copy code trên vào file menu.html vừa tạo và lưu lại rồi mở lên bạn sẽ thấy như sau:
Code CSS tạo nền và font chữ. 
/*container list*/
#main_menu{
background-color: #990066;
background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
font-family:sans-serif;
list-style-type:none;
text-align:center;
float:left;
width:100%;
border-radius:5px;
box-shadow: 3px 3px 2px #888888;
}
Trong đó:
  • Thuộc tính background, quy định màu nền cuat thanh menu. 
  • Thuộc tính con gradient để tạo hiệu ứng của CSS3. 
  • Các tiền tố –webkit –moz -ms –o là thuộc tính hack trên các trình duyệt như Opera, Ie, Sarapi,....
  • width:100%; là bề rộng, 
  • font-family:sans-serif; là font chữ, 
  • float:left; là căn lề trái tiêu đề trên menu có thê thay đổi thành center hoặc right. (Phần này bạn không được bỏ qua)
  • list-style-type: none; Phần này để xóa các dấu chấm do thẻ <li> tạo ra. Do vậy đừng thay đổi. (Phần này bạn không được bỏ qua)
Khi đó các bạn được như sau:
Định dạng Tiêu đề menu chính.
/*top list items*/
.top_menu {
float:left;
position:relative;
border-right:1px solid #ff00cc;
border-left:1px solid #ff00cc;
margin-left:-1px;
}
Phần này để chỉnh các thẻ <li> cấp 1 có class là top_menu. Trong đó các thuộc tính như sau:
  • float:left;. Thuộc tính này rất quan trọng bạn không thể bỏ vì nó sẽ đẩy các thẻ <li> về bên trái theo thứ tự và tạo thành một thanh ngang trên cùng một dòng. Tất nhiên bạn có thể đẩy các thẻ về bên phải bằng cách sửa float:left thành float:right và đẩy vào giữa bằng cách đổi thành float:center.
  • positon:relative Giờ thì menu đã hiện ra nhưng khi rê chuột vào một tiêu đề trên Menu chính thì tiêu đề còn lại  bị đẩy qua phải. Nguyên nhân là do thuộc tính float lúc đầu của top_menu bên trên.
    Để khắc phục tình trạng này ta cho vị trí các sub menu lệ thuộc vào các top_menu bằng cách sử dụng 2 thuộc tính position:relative; Lúc này vị trí của các menu con (sub menu) sẽ bị lệ thuộc vào top_menu.
  • border-right:1px solid #ff00cc; và border-left:1px solid #ff00cc; là các đường viền ngăn cách của các tiêu đề bạn có thể chỉnh sửa to hoặc nhỏ bằng cách chỉnh sửa 1px. Hoặc xóa bỏ phần màu vàng đi.
Khi đó các bạn được như sau:
- Thiết lập kiểu chữ, fon chữ, khoảng cách tiêu đề.
- Nếu để ý hình trên bạn sẽ tháy các tiêu đề nhỏ lí nhí và dính sát vào nhau nhìn rất khó.  Vạy cúng ta hãy định dạng lại class main_menu của toàn bộ menu..
  • Thêm thuộc tính background quy định màu nền của cặp thẻ <a></a>. Bạn nên sử dụng màu nền này trùng với màu nền của menu. Nếu tháy rắc rối bạn có thể thay phần mình tô màu xanh bên dưới thành background:transparent; để quy định màu nền trong xuốt.
  • display: block; Thuộc tính này quy định các tiêu đề trong thẻ <a></a> nằm trong 1 hộp thoại theo đường thẳng  không lung tung lộn xộn. Hay nói cách khác phần này bạn không được phép thay đổi. 
  • Tiền tố radius của thuộc tính border quy định bo góc của các menu con. Nếu không thích bạn có thể xóa bỏ phần màu vàng này hoặc chỉnh sửa lại các con số trong đó..  
  •  Để điều chỉnh độ dày (chiều cao) của menu namkna đề nghị bạn sử dụng thuộc tính padding  bằng cách thêm thuộc tính padding:5px; 
  • Điều chỉnh khoảng cách giữ các tiêu đề bằng cách điều chỉnh độ rộng của cặp thẻ <a></a> chứa tiêu đề đó bằng thẻ width:. ở đây mình đặt width:80px. tất nhiên bạn có thể thay đổi nếu tiêu đề của bạn quá dài để tránh hiện tượng xuống dòng.
  • Và thêm thuộc tính text-decoration:none; để xóa gạch chân bên dưới mỗi tiêu đề củamenu.
Tóm lại ta được đoạn css sau:.
/*anchors*/
#main_menu a, #main_menu a:hover {
background-color: #990066;
background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
color:#ffffff;
display:block;
padding:5px;
text-decoration:none;
width:80px;
border-top-right-radius:2px;
border-top-left-radius:2px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
Code này áp dụng cho các tiêu đề nằm trong cặp thẻ <a> và </a> của menu. Áp dụng cho cả tiêu đề chính và tiêu đề con xổ xuống. 
- Lưu lại Lúc này ta được như hình dưới (Nhìn đẹp hơn rồi phải không).
2- Tạo các menu drop cấp 1 cho menu chính.
- Bằng cách thêm đoạn code bên dưới vào sau thẻ đóng </li> (phần mình tô màu xanh) ở bước 1 bạn sẽ tạo được các menu drop.
    <ul>
      <li><a href="#">Sub menu 1.1</a></li>
      <li><a href="#">Sub menu 1.2</a></li>
      <li><a href="#">Sub menu 1.3</a></li>
    </ul>
- Sau khi thêm vào ta được đoạn code mới như sau:
<ul id="main_menu">
  <li class="top_menu"><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Sub menu 1.1</a></li>
      <li><a href="#">Sub menu 1.2</a></li>
      <li><a href="#">Sub menu 1.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub menu 2.1</a></li>
      <li><a href="#">Sub menu 2.2</a></li>
      <li><a href="#">Sub menu 2.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">Sub menu 3.1</a></li>
      <li><a href="#">Sub menu 3.2</a></li>
      <li><a href="#">Sub menu 3.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 4</a>
    <ul>
      <li><a href="#">Sub menu 4.1</a></li>
      <li><a href="#">Sub menu 4.2</a></li>
      <li><a href="#">Sub menu 4.3</a></li>
    </ul>
  </li>
  <li class="top_menu"><a href="#">Menu 5</a></li>
</ul>
- Vị trí nào không muốn tạo drop menu bạn không cần thêm. Trong trường hợp trên mình không tạo Drop cho menu 5.Lúc này bạn sẽ được như hình dưới.
-Đến đây ta phải tùy chỉnh lại class main_menu để ẩn các menu con <li> trong thẻ <ul> đi.
  • list-style-type: none; Dùng thuộc tính này để xóa bỏ các dấu chấm xuất hiện do thẻ <li>.
  • Thuộc tính position:absolute; quy định sự lệ thuộc của thẻ <ul> menu con vào class top_menu của thẻ <li> của menu chính. Giúp tiêu đề menu chính  không dịch chuyển lung tung khi xem các menu con 1.
  • Thuộc tính display:none; Để ẩn các menu con (submenu) đi.
  • Khi đó ta được thẻ CSS sau:
    /*sub menu list*/
    #main_menu ul {
    list-style:none;
    position:absolute;
    display:none;
    }
    
- Đến đây đã ẩn được các menu con nhung lại phát sinh lỗi đó là khi dề chuột vào tiêu đề của menu chính không thấy menu con dâu cả. Để thêm hiệu ứng hover xuất hiện menu con namkna đề nghị dùng thuộc tính display:block; để làm xuất hiện các menu con trong một hộp như sau:
/*sub menu when hover on top item*/
#main_menu li:hover ul {
display:block;
}
- Đến đây menu con đã xuất hiện nhung lại lẹch và xuống dòng như bên dưới:
Định dạng lại vị trí sub menu con
/*sub menu list items*/
#main_menu ul li {
padding-top:1px;
margin-left:-25%;
}
/*sub menu list anchors*/
#main_menu ul a,#main_menu ul a:hover {
color:#ffff00;
box-shadow: 3px 3px 2px #888888;
width:170px;
}
padding-top:1px; quy định khoảng cách từ tiêu đề menu dưới với tiều đề menu trên. Nói cách khác là khoảng cách của thẻ <li>
color:#ffff00;  là màu chữ
box-shadow: 3px 3px 2px #888888; là hiệu ứng đổ bóng của chữ, nếu không thích có thể bỏ hiệu ứng này.
Note: Bài này nhằm giới thiệu cho các bạn cách tạo một menu đơn giản với css 3. Một khi hiểu được cái mình giới thiệu bạn sẽ có thể tựu tạo cho mình một menu theo phong cách của riêng bạn. Hãy để lại ý kiến nếu bạn có vấn đề gì thắc mắc về bài viết Namkna xẽ giải thích cho bạn.

 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 ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com