Thứ Bảy, 14 tháng 4, 2012

Menu xổ dọc đẹp cho blog

Ở những bài trước thuthuatfree.come.vn đã hướng dẫn cho các bạn nhiều menu dạng xổ dọc xuống cho blog. Hôm nay, thuthuatfree.come.vn tiếp tục sẽ hướng dẫn cho các bạn một lựa chọn mới.Cách làm khá đơn giản.


View Demo Button
1. Đăng nhập vào blog-> Thiết kế-> Chỉnh sửa HTML
2. Nhấn Ctrl F để tìm thẻ </head> và chòn code sau vào trước thẻ </head>
<!--start drop menu từ thuthuat-mya5class.blogspot.com-->
<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: #0033CC; /*Màu của Menu chính*/
-moz-border-radius: 6px;-webkit-border-radius: 6px;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED; /*Màu của menu link*/
white-space: nowrap}

#jsddm li a:hover
background: #24313C /*Màu khi chuột rẽ vào menu*/-moz-border-radius: 6px;-webkit-border-radius: 6px;}

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

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

#jsddm li ul li a
{ width: auto;
background: #BFCFFE; /*Màu của Menu xổ xuống*/
color: #24313C /*Màu của các menu link xổ xuống*/
}

#jsddm li ul li a:hover
background: #809FFE /*Màu của các menu link xổ xuống khi chuột rẽ vào*/}
</style>


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

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

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

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

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

$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--end menu code từ  thuthuat-mya5class.blogspot.com-->
3. Save theme lại. Và vào thiết kế-> Thêm Tiện ích -> Html/Javascript. Dán đoạn code sau đây vào:
<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link One</a>
<ul>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
</ul>
</li>
<li><a href="#">Link Two</a>
<ul>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
</ul>
</li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</li></ul>
Thay đổi các chữ màu xanh và "#" sao cho phù hợp với blog bạn. Chúc bạn thành công!!!
BÀI VIẾT BẢN QUYỀN (Coppy ghi rõ nguồn)

Chuyên mục:

Không có nhận xét nào:

Đăng nhận xét

 
LÊN ĐẦU TRANG