Một
kiểu menu rất đẹp và pro, đây là menu dọc có nhiều menu con với hiệu
ứng thay đổi hình ảnh khi bạn rê chuột vào. Với đoạn code mình sử dụng
đã được điều chỉnh lại chút ít theo ý nên có phần hơi khác so với code gốc của trang javascript.softdrawer.com.
Với đoạn code này bạn có thể điều chỉnh theo ý. Các hình ảnh bạn có thể
sử dụng photoshop xử lý tạo ra sự khác biệt và phù hợp.Bạn có thể xem demo tại đây
Bước 1: Vào Blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) >> click vào Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head><<span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S2">script</a></span7556975> type="<span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S6">text</a></span7556975>/<span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S1">javascript</a></span7556975>" src="http://javascript.softdrawer.com/scripts/coolmenupro/js/coolmenupro.js"></script>
Bước 2: Tạo 1 widget HTML/javascript, dán đoạn code bên dưới vào:
<script type="text/javascript"> /* COOLjsMenu <span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S5">style</a></span7556975> + structure file */ /* Hình nền mac định menu chính */ var STYLE_0 = { textStyle:[ "background: left top url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgifE-I6lBRGYxF8oUF4ugFoJOr4w-_fh6iM2O_9qakV_VaoIt5Hf3MbQOH9t_jVdRjSa0J5KYIuox3fSTRXZ1DBnkOvibbLkBvIE0sDKepybqqvN_0Pzjw0B73StZIuUh4tJ8-BjA3bYo/); color: #101010; font: <span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S3">bold</a></span7556975> 11pt/36px Arial, sans-serif; text-align: left; padding-left: 15px;", "background: left top url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNGByGWPdsZWJQOGOI1r3aoAebqnh5-zAGGR-kZV00A2aCI4CczRziG33gpiPJUj-Jwt0PM_dRl2eMRHkiX77aSVWQTnj-rIWrQacJuz5VZtHTBd7_WJu4JeqdlBMsC9QPpt3cCeg4YAM/); color: #FF6000; font: bold 11pt/36px Arial, sans-serif; text-align: left; padding-left: 35px;" ], size:[ 36, 228 ], /* Chiều cao và rộng của menu chính */ imgsize:[ 36, 44 ], itemoff:[ "+previousItem+1px", 0 ], leveloff:[ -1, "+parentItem+2px" ] }; /* Hình nền mặc định menu con ở giữa */ var STYLE_1 = { itemFilters:'progid:DXImageTransform.<span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S8">Microsoft</a></span7556975>.Fade(duration=0.2)', backgroundStyle:[ "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceRfDNm30iLLVUMaxec4RdSMvFg_FGQ6ot0vjsC-81XH2CNeN8eYbZzSqwXkZbAqw0lEpi0DKijdgWCI4XTKcqw2UAd41ifmjzY7rL74O6_cwVd5b59L_cD1gpgRQCYdwMpUhQsIOwoo/);", "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSyyGoSY2lNvBt_G_5xYYx2O0M_BgxQ1uCO1RfGye846rkf1_p-fPDW-pGnBjm5uA-GoYFXaldUWd6uX6Tl4YP-POFpHlD_LazjKd2EXKK5m3qg8nIRcqyAMRxkjbdx2WAZHTPn0DOngU/);" ], textStyle:[ "color: #2B8EBF; font: 8pt/20px Tahoma, sans-serif; text-align: left; padding-left: 10px;", "color: #FF6000; font: 8pt/20px Tahoma, sans-serif; text-align: left; padding-left: 15px; " ], size:[ 20, 110 ], /* Chiều cao và rộng của menu con ở giữa */ itemoff:[ "+previousItem", 0 ], image:<span7556975><a href="javascript:void(0);" style="color:#191919;text-decoration:underline" id="Y7556975S4">null</a></span7556975>, ifFirst: { size:[ 30, 110 ], /* Chiều cao và rộng của menu con đỉnh dưới */ valign:"bottom", backgroundStyle:[ "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh017AvwcyCSrHptqcqPgWZC_FIMcsh8mkqG9XldNdnZcVQaL5eDm9pV7eF8Dyi5sxtHw7kjvmoMEj2FUgWtybs02nG0JiXR_JIfFnpti0zdk7J_y7-AZGDkcTzpUXXM4vQVygIvTMW2G8/);", "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh017AvwcyCSrHptqcqPgWZC_FIMcsh8mkqG9XldNdnZcVQaL5eDm9pV7eF8Dyi5sxtHw7kjvmoMEj2FUgWtybs02nG0JiXR_JIfFnpti0zdk7J_y7-AZGDkcTzpUXXM4vQVygIvTMW2G8/);" ] }, ifLast: { size:[ 30, 110 ], /* Chiều cao và rộng của menu con đỉnh dưới */ valign:"top", backgroundStyle:[ "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR11011dnFHlu9CJ6oLCdgqXdm69pfKJu07ZzLEVB-3TQClUsvBBL7cU7ezCTpaAVz7LiuwEA_wcpg8_SkiB74DwMstUqnB5_UbBtPs2LmbsbIk5rlNlfTL7OiDHp-vOrjEBWtl9pxAc/);", "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR11011dnFHlu9CJ6oLCdgqXdm69pfKJu07ZzLEVB-3TQClUsvBBL7cU7ezCTpaAVz7LiuwEA_wcpg8_SkiB74DwMstUqnB5_UbBtPs2LmbsbIk5rlNlfTL7OiDHp-vOrjEBWtl9pxAc/);" ] } }; /* Hình ảnh chính (hình ảnh bên trái) */ var MENU_ITEMS = [ {style:[ STYLE_0, STYLE_1 ], blankImage:"http://javascript.softdrawer.com/scripts/coolmenu/demos/gr5/images/b.gif" }, {code:"Home",url:"http://www.Kynangso.com", image:[ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYriwE5QxCEXHPHXXROl_ETsSNvap_LcTIeNlvtosIA9K9CoK_B8zuniJwbsvDDPS22iWB2B29YsBRkSoPXDGROoP3qbF3f0zbPHRYF9yrF2uwFBI_JzgAwLOQwS5uR30KqiGf25dR3yA/" , "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisyFQuHGMRaUqlWxBuBrKAfL6DKW4iwji6U0dr3YGc9IeIvBnOUQHaI5afJZ9f9l09NIaJ3-M13A9lKCbx-kwxmm8cl2xFI_5KxrCMxoMQ80PwhmgDJSWQTuDMiggh1QAvuBZyTXlC8es/" ], sub:[ {}, {code:'Kynangso.com', url:"http://www.Kynangso.com"}, {code:'SubItem 2', url:"#"}, {code:'SubItem 3', url:"#"}, {code:'SubItem 4', url:"#"}, {code:'SubItem 5', url:"#"} ] }, {code:"Item 2", url:"http://www.Kynangso.com", image:[ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWVXSjh7-Os7e45U3fok4DWm8AaXxzob9BgMyWZ9jD98T3yoPAdu2uVWQKSn5BNpx6wgkP2JL48TOHYMUT9VkK4PrvTLSTVDLOeg_hMVKYx0XsKoUxYczcLxlbTIk_wMInvSRIA_tfzOc/", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXm7__vXPHsY1x6_KqXZKl0gd5uriBFXBS7UKn44InvCnooxgQtRCnBS9icDn-AobmPbIUNV4hcNllFnw1gLPvQiwuRoOA4LON_75TPahcAHlJJ1i08vo2OALdyKYD5AsfCjtc3xLXhw/" ], sub:[ {}, {code:'SubItem 1', url:"#"}, {code:'SubItem 2', url:"#"}, {code:'SubItem 3', url:"#"}, {code:'SubItem 4', url:"#"}, {code:'SubItem 5', url:"#"} ] }, {code:"Item 3", url:"http://www.Kynangso.com", image:[ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaWGLQCLpSemJr042WdGletb2ZA5hJS5_pEscKz4JtQYrPT5HHq_AJ9VpCkBD6WHxDn06VMx9v8ytHI97ynLKpMu_WKRcZKb_4i81WDXdvjKNmF24FIFDyZ7RkgfvGDJXQbP_bMSwdeN8/", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdeHszvn6-w4rBxIcDTTQzDkVdvpYk7alTUmsHgFqujfuGDktvSbVQIDUMkGgQV8adgUNuCNuc-lKIzKZmk7N8HX8mIhLjwEdW5iBg-yiCGrymeiwtuMRjYijY4KXM8GJtKpsCvqDQq3o/" ], sub:[ {}, {code:'SubItem 1', url:"#"}, {code:'SubItem 2', url:"#"}, {code:'SubItem 3', url:"#"}, {code:'SubItem 4', url:"#"}, {code:'SubItem 5', url:"#"} ] }, {code:"Item 4", url:"http://www.Kynangso.com", image:[ "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLXQ7xZ2RYBaL3-FD-UabhtEk-xgj5Gp5YtgRHh3m_Zx6QY2F10_VdXAfBZhyvefJHEczpV774I_uxaWhfjtYGt0HByyisUxq836iE-CqOw8xO2fGNYXL4wcjmO-bZEO3jT6U3taMTQfY/", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AckY41_lXJaNwKsKD07ObizlWqMW1lalHMXTrGpaHZR6DZDrA178rf6-jenvsQdClsmcItmWjWpp5zvdtEUt9FmQpJoO7AXOH8p1zuWMAQyUO7cYRt3nfzyGg0zodZomnE5yMUmpO7Q/" ], sub:[ {}, {code:'SubItem 1', url:"#"}, {code:'SubItem 2', url:"#"}, {code:'SubItem 3', url:"#"}, {code:'SubItem 4', url:"#"}, {code:'SubItem 5', url:"#"} ] }, ]; var menu1 = new COOLjsMenuPRO("menu1", MENU_ITEMS); menu1.initTop(); </script>
Chú ý:
-Thay thế cac url cho phù hợp với blog.
-Thay các url màu xanh và màu cam (nếu muốn thay các hình ảnh hiển thị trên menu). URL màu xanh là những url mặc định hiển thị trên menu, url màu cam hiển thị khi rê chuột đi qua.
Bạn có thể xem doan code gốc tại đây.
Chút thành công!.
