Tạo menu dọc pro

Minh giới thiệu 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 anh 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 ý minh 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 ý minh . Các hình ảnh bạn có thể sử dụng photoshop dể sử 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>.

<script type="text/javascript" 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 style + 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/AVvXsEhLN7TQpTzg5f4JjHZ-x-vPzQjtDr80IeHwaQFKkE3qkokRNuuU_4etHM9tcbC4DqKzaRDz6FqQD4FPI9z_haapLZmvUvw1A8V_0LsP4GisL868o3dp5-AVOgM_YkfgkS_cTsvvSynrpCs/); color: #101010; font: bold 11pt/36px Arial, sans-serif; text-align: left; padding-left: 15px;", "background: left top url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilqUXqKcxNRxjDjPmn7Fduv7yxfxdn9Wwrwhf3dEl8zFP1YcE39Ht_PDUOfVFnE0clBMoFa3r3lqdS_xXlrXRM0LZwMrEaTRPddUdjZOVnG4lzYM9xvcSvYa8Evoj_pNSfQNqHaUOEN3c/); 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.Microsoft.Fade(duration=0.2)', backgroundStyle:[ "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQlcAinZW6Ny2Nl4IQWzxfqYDpSyB1-3QEypKiuI9URf40svmUr5nnASetejPvbg1aj5uOyUvJl-jp_ltbRQzae1sERVm8lS5SaGzjPeyH1pYPvzlAjaGZW9hH4_KJBQE7AgJn1k2Mxo/);", "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyHwcbLl02GTbQiOd4r6zxuZvqLEzUZp8qoT00uVisw4WRVlahhyphenhyphenLhq_-aZ0wv22hmkZdnXej1xAajVv9eBJKuRNrKyP5081tKu_98Qc0GqXGcTkgBTzvA_JEVlm7ocr7uI4_o5BSrVQ/);" ], 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:null, 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/AVvXsEgH1gU8ZH-NKtkL7tN3A00fjEu29hzkx9lpTND6GfOoL6Dz4x-H8sv0URlIpyHu7DQDg2223rou9YNaogfjSOwkC5upkxEnAerlcEpux-xq3Eu0ateorQ6IXfuZCkxYLr-iLQ89lNQlBgk/);", "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH1gU8ZH-NKtkL7tN3A00fjEu29hzkx9lpTND6GfOoL6Dz4x-H8sv0URlIpyHu7DQDg2223rou9YNaogfjSOwkC5upkxEnAerlcEpux-xq3Eu0ateorQ6IXfuZCkxYLr-iLQ89lNQlBgk/);" ] }, 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/AVvXsEiQKPG_zaREb4j12dTQxKvHz-gfIBSVC2LJzpgJiMHnF3el62e6pzz7n2HhBzxWCl3GF6mWRf81JAoUqXKxF5rR28MHu-6eKDT8PskhgdyN1rs0XoYdxsOPCBqZyfvV2U9n93nu0IwsQ7k/);", "background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQKPG_zaREb4j12dTQxKvHz-gfIBSVC2LJzpgJiMHnF3el62e6pzz7n2HhBzxWCl3GF6mWRf81JAoUqXKxF5rR28MHu-6eKDT8PskhgdyN1rs0XoYdxsOPCBqZyfvV2U9n93nu0IwsQ7k/);" ] } }; /* 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/AVvXsEjfRAjegnZOyGKZKCy71w7XMWVteWeMF1geQJTOV-P9GjwO8VE2kshlyqCE8ToT16eGz6KieqqjkUGTzWldL6xnt4PHumDG9KExTDYK5kAmDEeF63s-es1coeOaRJurCuw98RFCMQgS24Y/" , "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PBt__b1e4tKO2aNuHtCldVD2fnEm_Q9Al4xBEUAGWRk21L3ZE0I6ER5KLwg26X0PEAQEptmfK3IKzZRt9uRpfHOeQl2XC7asoLFxwBHFsua9tLkc2tuYp-29mQ3SEfotdgG5IwfIu6o/" ], 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/AVvXsEhZmpFXYxzOu3ZCwkQN2OuqAXZdcFIIvFrmHzBCu4sXmCv8feF5LVrkOZ5ZbQR8D6Lrm4buLs-1BAkoslnGFmFh7kiZRhuVM_irWDj1X0Ze_SPfTyS226eAF6-8OqT-G1n98aFMV42YP40/", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6G9SGqGVFgt7DlpI1gigzuizavzJAv2mjx2Yu8-PRMyY8i8kdqbwXIHpghvuioe6NQVGqbMBoxz8ajsjCzU4lm1WrAQ5yZ6unO8iJfwpDw0nqTkCxS1R2j3N53rwMBtliWhtoFyUQB8k/" ], 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/AVvXsEhvVUcGzju9WyVvriblxn0PLQ44NMOI6FKMWPauEOdO_2DISCrRxe93NrNwLnu45RtzjjPW7kMs6Zm1TTxBArOfjkE9Wlig-qL6RMsqXctu2Blh8wh4Sv0bWPHDNfu_n2PE6lM0IrtNYlU/", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaPrxMwF6FLMn7cjeUYuZpBC6448uFtnMJ74CO-xHmmv5OvuJmVa1UoyqJwLHpUl4WUuQJ_4AhauOt2T9C8Ip_UYKevdcYEsho-AY7JRdKPAa_cH_O5SixPlqFYjzePqO1owJEwwDF6zs/" ], 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/AVvXsEhHTT7LfC3CEgoxZ0RXJEEObvNdFwtYAM98RbvVFgnOkwZb4fmcIyd2iOvH-q1H5zdSNfvEEXUgUAG02dEfXDi5DZx-E_QH_V2FGz3_H0XdAsZXBLCtjgi4lQWf_k2s35buQ0v9lXmV8yI/", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_ButdOob7-edvsLLL_lC_z4txraC6QYEmixP4tFO96QKO5WUV-3N3_tvHty2bFedwbZ6gPnJl8kb3cX1v71Ktz7uQOSZe-0Q5NciF-xNHtX-WiZt0heB8550HGZnGbEGTPhwAkStFWM/" ], 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!.