Hiển thị

Home »
Thứ Bảy, 26 tháng 11, 2011

Tạo menu ngang cho blog

Xin chia sẽ cùng các bạn cách tạo menu giống báo Dân trí. Menu này sẽ gồm có các mục menu chính và các menu con được ẩn bên dưới các menu chính đó, chúng sẽ hiện ra khi bạn rê chuột vào menu chính chứa chúng.
Bạn có thể tạo ra rất nhiều menu con mà không làm mất nhiều không gian trên blog. Để tạo được menu này bạn hãy thực hiện theo các bước bên dưới.









☼ Bắt đầu thủ thuật

1. Công việc đầu tiên là vào tài khoản của bạn
2. Vào bố cục (Thiết kế) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ
]]>





parent-menu, .sub-menu {width:900px;}
#topmenu {height:46px; margin-bottom:5px;z-index:-10px;}

.fl {float:left;}
#topmenu {float:left;}
.fr {float:left;}

.parent-menu {height:21px; font:12px arial; color:#ffffff; text-align:center; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgZSwh7Bg6oOhWpDEh0cOxTEyQK5Hrve6ZU5FZbZXyvuYppI5qYh6pP4MHG99jdhZO85sPIpo8UwiUoSOEgilBh9Wu9M8EIR8rc5Ayo-Udhi9y5dxbNXiV_qituuJD2gA9hPQYresbgco/) repeat-x 0px -49px;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;}
.pmenu-sep {width:25px;}
.pmenu-normal{height:15px; padding:4px; ursor:pointer;}
.pmenu-normal, .pmenu-active, .pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {cursor:pointer;}
.pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {width:3px; height:25px;font-size:1px;}
.pmenu-active {height:15px; padding:4px; color:#ff0000; background:#f5f5f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgZSwh7Bg6oOhWpDEh0cOxTEyQK5Hrve6ZU5FZbZXyvuYppI5qYh6pP4MHG99jdhZO85sPIpo8UwiUoSOEgilBh9Wu9M8EIR8rc5Ayo-Udhi9y5dxbNXiV_qituuJD2gA9hPQYresbgco/) repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMTvE7rOOJFt8N9q68wQbEx1ikG-3JOztD05ApDgPZNr9XRxx163l-c4xHZWigaXsY3PveaqiMiBzfm7Yp5FwjN4jcehBC3XruGWH9ZBIuQbk6Hne_teCycPPVHb2PpYCM0SbOPMyT3w4/') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMTvE7rOOJFt8N9q68wQbEx1ikG-3JOztD05ApDgPZNr9XRxx163l-c4xHZWigaXsY3PveaqiMiBzfm7Yp5FwjN4jcehBC3XruGWH9ZBIuQbk6Hne_teCycPPVHb2PpYCM0SbOPMyT3w4/') no-repeat 0px -27px;}
.sub-menu {height:21px;padding:1px 0px 0px 1px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgZSwh7Bg6oOhWpDEh0cOxTEyQK5Hrve6ZU5FZbZXyvuYppI5qYh6pP4MHG99jdhZO85sPIpo8UwiUoSOEgilBh9Wu9M8EIR8rc5Ayo-Udhi9y5dxbNXiV_qituuJD2gA9hPQYresbgco/') repeat-x 0px -100px;
width:899px;}
.smenu-content {width:678px; height:17px;padding:2px 7px;}
.smenu-content2 {width:892px; height:17px;padding:2px 7px;}
.smenu-content3 {width:534px; height:17px;padding:2px 7px;}
.smenu-content ul {width:50%;height:17px;margin:0px;padding:0px;list-style-type:none;}
.smenu-content li{float:right;padding:0px 5px;}
.smenu-content li img{border:0px; vertical-align:middle}

.sub-menu {position:relative; font: 12px arial; }

.parent-menu, .sub-menu, .sub-menucontent {overflow:hidden;}

.link-submenu {font:11px arial; color:#004f8b; text-decoration:none;}
.link-submenu:hover {text-decoration:underline;}

.sep-fmenu{width:2px; height:26px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMTvE7rOOJFt8N9q68wQbEx1ikG-3JOztD05ApDgPZNr9XRxx163l-c4xHZWigaXsY3PveaqiMiBzfm7Yp5FwjN4jcehBC3XruGWH9ZBIuQbk6Hne_teCycPPVHb2PpYCM0SbOPMyT3w4/') no-repeat -5px -138px;}

Ở mã CSS trên bạn có thể thay đổi màu nền lại theo ý mình (chính là các code màu xanh lá ở trên)

4. Bây giờ trở về phần tử trang thêm 1 HTML/Javascript
5. Thêm code sau vào HTML/Javascript đó.





Chỉnh sửa code:
- Phần var menu_fid chính là tổng số menu chính và menu phụ, số này phải lớn hơn hoặc bằng với số menu chính + menu phụ. Và bạn hãy lưu ý là số cuối cùng sẽ không có dấu phẩy (,), nếu không code sẽ bị lỗi và không thể hiển thị được.
- var menu_pid: Phần này là phần cho biết bố cục của menu bạn gồm có bao nhiêu menu chính và bao nhiêu menu phụ. Ở trên có 6 menu chính và 15 menu phụ. Nếu bạn muốn thêm menu chính thì hãy thêm dãy số sau số 5 ở phần bắt đầu bằng số 0, thêm menu con thì hãy thêm tiếp dãy số ở phần sub của menu.
- var menu_name: phần này là phần bạn sẽ đặt tên để hiển thị cho các menu chính và menu phụ. Phần này sẽ hiển thị trên menu của bạn để chỉ các nội dung trên blog của bạn.
- var menu_path: phần này để bạn thiết lập đường dẫn cho các menu chính và phụ. Bạn hãy thay các URL trong phần này thành các link tương ứng cho từng menu.
- var menu_show phần này là phần trình diễn các menu, tổng các số menu (gồm menu chính và phụ) phải bằng tổng các số 0 ở phần này.

Lưu ý: Các phần tử cuối cùng trong các mãng sẽ không có dấu phẩy (,) theo sau, và các phần tử trong các mãng phải bằng nhau thì code mới hiển thị đúng.
Tại đầu mỗi đoạn code trên bạn bỏ đi :
và mỗi đoạn code
vì đây là code đề chèn vào bài viết.

Bạn hãy download file JS tại đây về và chỉnh sửa lại các mãng trong phần này lại cho phù hợp với blog mình, rồi sau đó upload lên trang host và lấy link thay cho link trên.

Bạn hãy thay link màu cam thành logo của blog bạn hoặc hình ảnh mà bạn thích kích thước (18px x 18px).

6. Sau khi hoàn tất việc chỉnh sửa bạn hãy save lại và kiểm tra kết quả

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

You may also...

Comments[ 0 ]


Đăng nhận xét

Hot