Thu thuat tao menu tuyet dep voi hai dong hien thi

Buoc 1 : Chen code CSS :

/* MENU */
.menucontent{width:960px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRm1hADW7Vx0WtP3MpMQbQJUeg0P-MGG5y7LraNIMRaG5tk1mcs5SDYCjrNj27pyZ466ZAuQ8TLb0d3m-OmsSCevFVIkxr6gpQAtq-N0bMtUzcA2KL0LiBg-5DATZ6mb3Jz0LoR5DRQc/s1600/menurepeat.gif) repeat-x;height:64px; position:relative;margin-top:10px}
.mainmenu{width:950px;float:left;}
.mainmenu .menu{ font-size:13px;}
.mainmenu li{float:left;line-height:38px;font-weight:bold;display:inline; padding:0px 3px;}
.mainmenu span,.active span{padding-right:12px;}
.active a,.mainmenu li a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDXgpaPu-TdsPGhrrCMRYcL8J-tXq7Dinpe7ncYBgUZeryBq8OWvlDYRrHlq9a0q5qXXkOqVjmVeJVkqRwpeG-TcVkVG74cbITqtRsmkfj2ruwI8HIN7i7Kqli6Dbh3J7Gj4HnKbFDjZA/s1600/menuhoverleft.gif) top left no-repeat;float:left;}
.mainmenu li:hover ul{display:block;}
.active span,.mainmenu li a:hover span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoHTbfdTznZrPxKerWsGxHTtqQ9lNC-I34VK8H4B6XZj7dkqteIeraObPcztfwCFRtOJFL9JAxyRjDdRpnySSfViY3SJdmNSVymsd4LaLf0At9EN-9ZmAocH_-Sx2o5dJfDgOFppnWqPA/s1600/menuhoverright2.gif) no-repeat right;float:left;display:block;}
.mainmenu .menu a{color:#fff;padding-left:12px;float:left;display:inline;}
.bodermneu{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjtu8ZctEGF3j-fEW2M2uDLMitQg3loeTDnM4kOtAHPR9l-38CbDaTICWNR0tCp8iIIZISU99fj-M1Vy1YI1muJzl_WgHsvrrcfYYwgipYJBKK8GOp3oRvkSts0NUnVuOb9AjGoKRcskg/s1600/bodermenu.gif) right no-repeat;}
.bodermneu ul{list-style-type:none; float:left; position:absolute; top:36px; left:10px; width:750px;}
.bodermneu ul li{display:block; line-height:18px; font:500 12px/28px Arial; color:#fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMtihWCtF8nIPJ4E13i9eEyr7LUOfT7D_HehOEy68jlqZ20jycehceNx9sYi4itSuw3ffEUyr930tqg9uF9HA0lF3D_n82TuZUhWieOTJqYh5nxUxy7LmuVjBHRh0dnw1km18QVxGgEU/s1600/dot.gif) no-repeat scroll left transparent; margin-right:8px;}
.bodermneu ul li a,.bodermneu ul li a:hover{color:#fff;padding-left:5px;float:left; background:none;}
.menuleft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhprPGyzrws8aNQEpyUo8n7ptx5a1t5hlc4svddAmPUBqpBviKgZT6URBsawfkJutUYH7oSTPdE8XAU62wEnTtLTClI1cLhTQ5RKUqY_VO1POwAboyWiR7wfcVs5cJEnKyhZAderxwVyXk/s1600/menuleft.gif) left top no-repeat;width:4px;height:64px;display:block;float:left;}
.menuright{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfqYRSFjs0-DV5Mpplh9N3Ux8eN2xLNa2juA_AFUr-B6qRPGx2M0TMfVpSI5aqCFR6DXeDJelLNLOhRnehjaZNc9sTinnL3EKQf_IefT0H7G8kBcz3AHSPlOPauK4R6UC2XYIpxl0X4bU/s1600/menuright.gif) right top no-repeat;width:4px;height:64px;display:block;float:right;}
.menufooter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WR3iS1VhJLY2phHGhJwVWOO-V9ebk5oyrBIqpunuIHeFYvNnhLYxYI6r2uAdRK4vGK4Wtu9YQRPnlv2c57Fg7jdr-T0F4itBJs85yZ6KJV0u8WUynF0bpAIoOE-Se4Q6u3Vz8X_nUJw/s1600/menubgfooter.gif) no-repeat bottom;height:14px;margin-top:-1px;}
.submenu{width:950px;float:left;color:#bcbcbc;z-index:100;margin-top:4px;}
.submenu .hot{width:550px; float:left;}
.submenu h4{float:left;width:90px; font:700 12px/18px Arial; color:#fff; text-transform:uppercase;}
.submenu a{color:#BCBCBC;}
.submenu .hotcnt{width:460px; float:left;}
.submenu .hotcnt{}
.colorheader{color:#fff;font-weight:bold;}
.submenu p{float:left;}

Buoc 2 : Chen code javacrip

Tim dong : ]]></b:skin>

Chen duoi no code sau :

<script language='javascript' src='http://bay68-com.googlecode.com/svn/trunk/friends/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var navi={timeout:null,showsub:null,showsub1:null,myself:null,init:function(){myself=this;$("#navi > ul > li").hover(function(){clearTimeout(timeout);$("#navi > ul > li").removeClass("active");var a=$("#hidCurent").val();$("#ul_"+a).hide();$(this).addClass("active");$(this).find("ul").show()},function(){timeout=setTimeout("this.focus();",1E3);$(this).removeClass("active");$(this).find("ul").hide();myself.focus()});myself.focus()},focus:function(){var a=$("#hidCurent").val();$("#li_"+a).addClass("active");
$("#ul_"+a).show()}};$(document).ready(function(){navi.init();bindDate.init();fixHeight();ChangeFont("14px","divNoiDung")});
//]]>
</script>

Buoc 3 : Chen code sau vao vi tri muon hien thi :

<div id='menu'>
<div class='menucontent'>
<div class='menuleft'/>
<div class='mainmenu' id='navi'>
<ul class='menu'>
<li class='bodermneu' id='li_0'><a href='/'><span>Trang chủ</span> </a></li>
<li class='bodermneu' id='li_1035'><a href='#'><span>Giới thiệu</span> </a>
<ul id='ul_1035' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
<li class='bodermneu' id='li_1036'><a href='#'><span>Kiếm tiền</span></a>
<ul id='ul_1036' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
<li class='bodermneu' id='li_1047'><a href='#'><span>Tin vui</span></a>
<ul id='ul_1047' style='display: none'>

<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
<li class='bodermneu' id='li_1037'><a href='#'><span>Xem tin</span>

</a>
<ul id='ul_1037' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>

</ul>
</li>
<li class='bodermneu' id='li_1034'><a href='#'><span>Tin vui</span>
</a>
<ul id='ul_1034' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
<li class='bodermneu' id='li_1040'><a href='#'><span>Tin vui</span></a>
<ul id='ul_1040' style='display: none'>

<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
<li class='bodermneu' id='li_1039'><a href='#'><span>Tin vui </span>
</a>
<ul id='ul_1039' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
<li class='bodermneu' id='li_1038'><a href='#'><span> Tin vui </span>
</a>

<ul id='ul_1038' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>

<li class='bodermneu' id='li_1043'><a href='#'><span> Tin vui</span>
</a>
<ul id='ul_1043' style='display: none'>
<li><a href='#'> Tin mới</a> </li>
<li><a href='#'> Tin vắn</a> </li>
<li><a href='#'>Tin hay</a> </li>
</ul>
</li>
</ul>
</div> </div> </div>

Chuc cac ban thanh cong!!!!

Hướng dẫn khách hàng sử dụng dịch vụ

Để xem được các thủ thuật hay nhất quý khách hãy lick vào button bên dưới, xem xong quý khách thấy hài lòng hãy liên hệ nhanh với chúng tôi để sở hữu bộ code bản quyền ưng ý nhất!

ĐĂNG KÝ MUA CODE

Quý khách muốn đăng ký mua templates bản quyền thiết kê tinh xảo đẹp mắt hãy liên hệ nhanh với chúng tôi để đặt hàng Trân trọng cảm ơn quý khách đã sử dụng dịch vụ của chúng tôi!

ĐĂNG KÝ MUA TEMPLATE