Tạo menu xổ xuống

Bài viết trước đây, mình đã cùng các bạn tìm hiểu cách tạo một Menu đơn giản dành cho Blogspot. Hôm nay chúng ta tiếp tục tìm hiểu cách tạo một Drop-Down Menu đơn giản cho Blogger.

Bước 1:

Đăng nhập vào Blogger, chọn "Thiết kế" -> "Chỉnh sửa HTML"

Bước 2:
Tìm code:

</head>

Và chèn đoạn code sau phía trước đó:

<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>

<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://ruabien.net-->

Lưu template lại. Hãy điều chỉnh lại màu sắc cho phù hợp với blog, website của bạn.

Bạn có thể xem thêm các mã màu ở đây để thuận tiện cho việc điều chỉnh:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
 
Bước 3:
Vào phần "Giao diện" -> "Bố cục"
click vào "Thêm tiện ích", chọn "HTML/JavaScript" . Tiện ích này chính là phần hiển thị menu do đó bạn cần di chuyển nó đến vị trí thích hợp.
Dán code bên dưới vào tiện ích mới nhé:

<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://blogger.com">Blogger Help</a></li>
</ul>

Chỉnh sửa lại đường dẫn menu cho phù hợp và lưu lại là xong. Chúc bạn thành công!