"Tạo menu giống trang hacktutors.info"

(Traidatmui.com) – Theo yêu cầu của MrLive09 thì mình sẽ giới thiệu đến các bạn cách làm menu giống như trang hacktutors.info. Menu này không có phần menu con (submenu), vì vậy việc thực hiện nó rất đơn giản. Ở đây chỉ sử dụng css là có thể tạo được vì vậy nó không đòi hỏi kỹ thuật cao. Nếu bạn thấy thích thú với menu dạng này thì có thể thực hiện theo một số bước đơn giản sau.

1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>
#category_menu_container {
height: 25px; /*chiều cao của menu*/
width: 650px; /*độ rộng của menu*/
background: #4488dd; /*màu nền của menu*/
margin-top:0px;}

#category_menu, #category_menu ul {
padding: 0; margin: 0;
list-style: none; line-height: 1;}
#category_menu ul {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;}
#category_menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;}
#category_menu ul li {
list-style: none;
margin: 0px; padding: 0px;}
#category_menu li p {
color: #fff; display: block;
margin: 3px 3px 0px 3px;
padding: 5px 10px 5px 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 11px; font-family: Arial, Helvetica, sans-serif;}

#category_menu li a, #category_menu li a:link {
color: #fff; /*màu text*/
display: block;
margin: 3px 3px 0px 3px;
padding: 5px 10px 5px 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 11px; /*cở chữ*/
font-family: Arial, Helvetica, sans-serif;}
#category_menu li a:hover {
background: #3366a6;
color: #FFFFFF; /*màu text khi rê chuột*/
display: block;
margin: 3px 3px 0px 3px;
padding: 5px 10px 5px 10px;
text-decoration: none;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
}

4. Save template lại và trở về phần tử trang
5. Thêm 1 HTML/Javascript và thêm code sau vào nó
<div id='category_menu_container'>
<ul id='category_menu'>
<li><a href='url menu 1'><span>Menu 1</span></a></li>
<li><a href='url menu 2'><span>Menu 2</span></a></li>
<li><a href='url menu 3'><span>Menu 3</span></a></li>
<li><a href='url menu 4'><span>Menu 4</span></a></li>
<li><a href='url menu 5'><span>Menu 5</span></a></li>
<li><a href='url menu 6'><span>Menu 6</span></a></li>
<li><a href='url menu 7'><span>Menu 7</span></a></li>
<li><a href='url menu 8'><span>Menu 8</span></a></li>
<li><a href='url menu 9'><span>Menu 9</span></a></li>
<li><a href='url menu 10'><span>Menu 10</span></a></li>
</ul>
</div>

Chỉnh code:
- Bạn hãy thay các dòng màu xanh đậm thành tên của các thư mục
- Và thay dòng màu đỏ thành link tương ứng với từng thư mục

6. Save lại và tìm vị trí đặt phù hợp

Chúc bạn thành công

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

12/25/2010 09:22:00 CH Trả lời

Sao em làm mà không thể hiện thị nhãn.Ví dụ như nhãn "Tin xay dung",nhưng khi xuất ra lại là "tin xay dung".chữ "T" in hoa thành in thường nên không hiện thj được bài đăng.Nhãn của em chứ cái đầu đều in hoa cả.giúp em với.phải chỉnh code ở chỗ nào.
Em cảm ơn.
Mail"xuandat719@gmail.com"

Admin
12/26/2010 12:29:00 SA Trả lời

Đối với menu này thì không ảnh hưởng đến nhãn. Tên hiển thị của bạn do bạn tự đặt. Đối với menu này thì tất cả các tên hiển thị sẽ được IN HOA, nếu bạn không muốn IN HOA thì bỏ dòng text-transform: uppercase; trong code css trên.

12/26/2010 10:06:00 CH Trả lời

Anh thủ lại xem,tên hiển thị thi không nói làm gì rồi.
Em thử mãi mà không được.
Nên em chuyển sang CSS li Doc rồi.không đẹp bằng nhưng cũng tạm ổn.
Thank anh nha.
Anh cho em hỏi: Muốn bỏ dòng "hiện thi bài đăng trong nhãn, Bài đăng cũ hơn" thì làm thế nào vậy.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang