Thủ thuật yêu cầu - Tạo menu ngang cho blog

 (Traidatmui.com) – Theo yêu cầu của bạn trungnguyen2010 là tạo menu ngang cho blog, hôm nay mình xin chia sẽ cùng các bạn cách tạo menu này. Với menu này sẽ giúp bạn bố trí các menu con dễ dàng và gọn gàng hơn. 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ẻ ]]></b:skin>

Code:

.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/AVvXsEjhhRuYa_j2W7wYABFvlbmKZSZduu_WAkaNl6X0KbR-tUlZfw2bi3dpvt74PkaNQ8TJlMTrtLQuEDRRm51_AZlIFO5vzviQb3E4HooeKbh2qEEt4_3KUN6CRBCKT7mFwNDi05exDIinY951/) 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/AVvXsEjhhRuYa_j2W7wYABFvlbmKZSZduu_WAkaNl6X0KbR-tUlZfw2bi3dpvt74PkaNQ8TJlMTrtLQuEDRRm51_AZlIFO5vzviQb3E4HooeKbh2qEEt4_3KUN6CRBCKT7mFwNDi05exDIinY951/) repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMJ82h7O1hTriaDO6sxTlnggl3n3MNJeiA_hB-Rr8H-aogjkivd086wMT4KGf3qsXIuW3X5ueORqVaam_s7P9hOYUC0NGX6JPSmKCIL0iMPKgAcDbJy-93FyekhSYFZdxz86tM7DQNq8-/') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMJ82h7O1hTriaDO6sxTlnggl3n3MNJeiA_hB-Rr8H-aogjkivd086wMT4KGf3qsXIuW3X5ueORqVaam_s7P9hOYUC0NGX6JPSmKCIL0iMPKgAcDbJy-93FyekhSYFZdxz86tM7DQNq8-/') no-repeat 0px -27px;}
.sub-menu {height:21px;padding:1px 0px 0px 1px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhhRuYa_j2W7wYABFvlbmKZSZduu_WAkaNl6X0KbR-tUlZfw2bi3dpvt74PkaNQ8TJlMTrtLQuEDRRm51_AZlIFO5vzviQb3E4HooeKbh2qEEt4_3KUN6CRBCKT7mFwNDi05exDIinY951/') 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/AVvXsEjgMJ82h7O1hTriaDO6sxTlnggl3n3MNJeiA_hB-Rr8H-aogjkivd086wMT4KGf3qsXIuW3X5ueORqVaam_s7P9hOYUC0NGX6JPSmKCIL0iMPKgAcDbJy-93FyekhSYFZdxz86tM7DQNq8-/') 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 đó.

<script type="text/javascript">

var menu_fid = new Array(
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
);

var menu_pid = new Array(
0, // home
0, // Menu1
0, // Menu2
0, // Menu3
0, // Menu4
0, // Menu5

2, // sub 1.1
2, // sub 1.2
2, // sub 1.3

3, // sub 2.1
3, // sub 2.2
3, // sub 2.3

4, // sub 3.1
4, // sub 3.2
4, // sub 3.3

5, // sub 4.1
5, // sub 4.2
5, // sub 4.3

6, // sub 5.1
6, // sub 5.2
6 // sub 5.3

);

var menu_name = new Array(
'Home',
'Tên Menu 1',
'Tên Menu 2',
'Tên Menu 3',
'Tên Menu 4',
'Tên Menu 5',

'Submenu 1.1',
'Submenu 1.2',
'Submenu 1.3',

'Tên Submenu 2.1',
'Tên Submenu 2.2',
'Tên Submenu 2.3',

'Tên Submenu 3.1',
'Tên Submenu 3.2',
'Tên Submenu 3.3',

'Tên Submenu 4.1',
'Tên Submenu 4.2',
'Tên Submenu 4.3',

'Tên Submenu 5.1',
'Tên Submenu 5.2',
'Tên Submenu 5.3'
);

var menu_path = new Array(
'http://nvdinh88.blogspot.com/',
'URL Menu1/',
'URL Menu2/',
'URL Menu3/',
'URL Menu4/',
'URL Menu5/',

'URL submenu1.1',
'URL submenu1.2',
'URL submenu1.3',

'URL submenu2.1',
'URL submenu2.2',
'URL submenu2.3',

'URL submenu3.1',
'URL submenu3.2',
'URL submenu3.3',

'URL submenu4.1',
'URL submenu4.2',
'URL submenu4.3',

'URL submenu5.1',
'URL submenu5.2',
'URL submenu5.3/'

);

var menu_show = new Array(
0, // home
0, // Menu1
0, // Menu2
0, // Menu3
0, // Menu4
0, // Menu5

0, // sub 1.1
0, // sub 1.2
0, // sub 1.3

0, // sub 2.1
0, // sub 2.2
0, // sub 2.3

0, // sub 3.1
0, // sub 3.2
0, // sub 3.3

0, // sub 4.1
0, // sub 4.2
0, // sub 4.3

0, // sub 5.1
0, // sub 5.2
0 // sub 5.3

);

</script>
<script language="javascript" src="http://traidatmui-tips.googlecode.com/files/vn_menu2.js" type="text/javascript"></script>

<div id="topmenu">

<div id="parent-menu" class="parent-menu" onclick="remmn();"></div>

<div class="sub-menu">

<div class="fl"> <img idth="25" alt="traidatmui.com" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAjLVoSUn22Mu1BmmVzNBcZUuptVG0fRxwYvPqRfXJPMUd34O8JwUouzPnKy0kD3zExOK4dwe9LhkAG2QByWtfK4VHtyEjsniv7UcvEL8aXOEOK04BQj-JVpWK7_pZMBWaGXAxbmFi0VmB/" height="18" /> </div>

<div id="submenu"
onmouseout="resetit();" onmouseover="clear_delayhide();activeMenuParent();" class="smenu-content fl" onclick="remmn();">&nbsp;</div>

</div>
</div>


<script language="javascript" type="text/javascript">
menuobj=document.getElementById? document.getElementById("submenu") : document.all? document.all.submenu :

document.layers? document.dep1.document.dep2 : ""
Active(); writeParentMenu(); reWriteMenu();
</script>

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.

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

Địa chỉ bài viết: http://www.traidatmui.com/2010/08/thu-thuat-yeu-cau-tao-menu-ngang-cho.html#ixzz1ndg22dZ9
Nguồn: TRAIDATMUI.com

Facebook

Twitter

Telegram

WhatsApp

Previous article

Next Post

Next article

Previous Post