Home » Tạo menu cực hay

Hướng dẫn tạo menu ngang có sổ menu con xuống cực hay giống trang benhtimmach.com

BƯỚC 1 : CHÈN CSS :


<!--BIGIN CSS -->
.jqueryslidemenu {
background:transparent url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgOFF1.gif) repeat-x top left;
border-top:1px solid #ccc;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:13px;
font-weight:700;
height:39px;
}
.jqueryslidemenu ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Top level list items*/
.jqueryslidemenu ul li {
display:inline;
float:left;
position:relative;
z-index: 15;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a {
background:transparent url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgDIVIDER1.gif) no-repeat top right;
color:#666;
display:block;
height:23px;
padding:9px 20px 0;
text-decoration:none;
z-index: 10;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #666;
}
.jqueryslidemenu ul li a:hover {
background:#fff url(http://suckhoegiadinh.org/Benhtimmach.com/theme/bgON1.gif) no-repeat top right;
color:#B30000;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul {
background:#fff;
display:block;
left: -999em;
position:absolute;
visibility:hidden;
z-index: 9999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li {
display:list-item;
float:none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a {
background:#f5f5f5;
border-bottom:1px solid #e4e4e4;
border-left:1px solid #e4e4e4;
border-right:1px solid #e4e4e4;
border-top-width:0;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:12px;
font-weight:700;
margin-top:1px;
width:130px;
}
.jqueryslidemenu ul li ul li a:hover {
background:#fff;
color:#B30000;
font-family:Arial,Verdana,Helvitica,sans-serif;
font-size:12px;
font-weight:700;
}
<!--END CSS -->


BƯỚC 2 : TẠO 1 TIỆN ÍCH HTML ĐỂ BỎ HẾT CODE SAU VÀO :


<!--BEGIN CODE HTML -->

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bệnh tim mạch</a><ul>
  <li>
  <a dir="ltr" href="#">
  100 loại bệnh tim</a></li>
  <li>
  <a dir="ltr" href="#">
  Yếu tố gây bệnh</a></li>
  <li>
  <a dir="ltr" href="#">
  Phòng bệnh tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Sơ cấp cứu tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh tăng huyết áp</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh huyết áp thấp</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh Suy tim</a></li> 
  <li>
  <a dir="ltr" href="#">
  Bệnh thấp tim</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh đột quỵ</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh đột tử</a></li>
  <li>
  <a dir="ltr" href="#">
  Stress và bệnh tim</a></li>
  <li>
  <a dir="ltr" href="#">
  Tình dục - bệnh tim</a></li>
  <li>
  <a dir="ltr" href="#">
  Y học cổ truyền</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh tim mạch khác...</a></li>
</ul>
</li>
<li><a href="#">Bệnh liên quan</a><ul>
  <li>
  <a dir="ltr" href="#">
  Bệnh lạ của tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Cường giáp - tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Tim mạch - phụ nữ</a></li>
  <li>
  <a dir="ltr" href="#">
  Tim mạch - mang thai</a></li>
  <li>
  <a dir="ltr" href="#">
  Tiểu đường - tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh thận - tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Môi trường - tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Di truyền - tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Thời tiết - tim mạch</a></li>
</ul>
</li>
<li><a href="#">Tư vấn</a><ul>
  <li>
  <a dir="ltr" href="#">Cao huyết áp</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh huyết áp thấp </a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh mạch vành</a></li>
  <li>
  <a dir="ltr" href="#">
  Ngoại tâm thu thất</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh nhịp tim nhanh</a></li>
  <li>
  <a dir="ltr" href="#">
  Nhồi máu cơ tim</a></li>
  <li>
  <a dir="ltr" href="#">
  Rối loạn lipid máu</a></li>
  <li>
  <a dir="ltr" href="#">
  Rối loạn nhịp tim</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh suy mạch vành</a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh thiểu năng vành </a></li>
    <li>
  <a dir="ltr" href="#">
  Tim mạch và thể thao </a></li>
  <li>
  <a dir="ltr" href="#">
  Bệnh tim mạch</a></li>
  <li>
  <a dir="ltr" href="#">
  Tư vấn Mổ tim</a></li>
</ul>
</li>
<li><a href="#">Triệu chứng</a>
<ul>
  <li>
  <a dir="ltr" href="#">
  Triệu chứng ngất</a></li>
  <li>
  <a dir="ltr" href="#">
  Triệu chứng đau ngực</a></li>
  <li>
  <a dir="ltr" href="#">
  Chóng mặt</a></li>
  <li><a dir="ltr" href="#">
  Khó thở</a></li>
</ul>
</li>
<li><a href="#">
  Dinh dưỡng</a><ul>
  <li>
  <a dir="ltr" href="#">
  Thể dục phòng bệnh</a></li>
  <li>
  <a dir="ltr" href="#">
  Dinh dưỡng tim mạch</a></li>
</ul>
</li>
<li><a href="#">Tin y tế</a>

<ul>
  <li>
  <a dir="ltr" href="#">
  Tin y tế thế giới</a></li>
  <li>
  <a dir="ltr" href="#">
  Tin y tế việt nam</a></li>
</ul>
</li>
<li><a href="#">Mua máy</a><ul>
  <li>
  <a dir="ltr" href="#">
  Máy tạo nhịp</a></li>
  <li>
  <a dir="ltr" href="#">
  Máy đo huyết áp</a></li>
</ul>

</li>
<li><a href="#">Chỉ số sức khỏe</a><ul>
<li><a href="#">Chỉ số BMI</a></li>
<li><a href="#">Chỉ số chuyển hóa</a></li>
</ul>
</li>
</ul>
<p>
<br style="clear: left" />
</p></div>

<script type="text/javascript">var arrowimages={down:['downarrowclass',23],right:['rightarrowclass']}
var jqueryslidemenu={animateduration:{over:200,out:100},buildmenu:function(menuid,arrowsvar){jQuery(document).ready(function($){var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth,h:this.offsetHeight,subulw:$subul.outerWidth(),subulh:$subul.outerHeight()}
this.istopheader=$curobj.parents("ul").length==1?true:false
$subul.css({top:this.istopheader?this._dimensions.h+"px":0})
$curobj.hover(function(e){var $targetul=$(this).children("ul:eq(0)")
this._offsets={left:$(this).offset().left,top:$(this).offset().top}
var menuleft=this.istopheader?0:this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())?(this.istopheader?-this._dimensions.subulw+this._dimensions.w:-this._dimensions.w):menuleft
if($targetul.queue().length<=1)
$targetul.css({left:menuleft+"px",width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},function(e){var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(jqueryslidemenu.animateduration.out)})})
$mainmenu.find("ul").css({display:'none',visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu",arrowimages)

</script>


<!--END CODE HTML -->

LƯU Ý : CÁC BẠN PHẢI THÊM ĐOẠN CODE SAU ĐỀ CHÓNG HIỂN THỊ BỊ LỖI VỚI TRÌNH DUYỆT IE KÉM :

<!--BEGIN CODE CHÓNG HỎNG LINK Ở IE -->
<!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]--> 

<!--END>


XIN LƯU Ý THÊM ! 
Ở  
BƯỚC 2 BẠN CÓ THỂ THÊM TRỰC TIẾP CODE VÀO BỘ NGUỒN HTML CHÍNH, TUY NHIÊN CHÚNG TÔI CHỈ KHUYẾN KHÍCH NHỮNG BẠN RÀNH VỀ CODE 1 CHÚT!

CHÚC CÁC BẠN THÀNH CÔNG!




BÀI VIẾT THUỘC BẢN QUYỀN NSVINA.COM  - GHI RÕ NGUỒN KHI PHÁT LẠI THÔNG TIN 
Xem thêm

Flicker Images


    Giới thiệu : Mời bạn đăng ký dịch vụ để download style templates đây là một sản phẩm được thiết kế bản quyền do trung tâm Vcupdesign kết hợp với giải pháp mạng Việt Nam -nsvina.com thực hiện   
    Tính chất dịch vụ : Chúng tôi sưu tầm các templates chất lượng trên mạng Internet và Download về fix lại tất cả các lỗi, code rác, virus nhằm cung cấp cho quý khách một templates chất lượng cao với phong cách hoàn toàn khác biệt nổi trội. 
    Cam kết sử dụng : Với tính chất như đã trình bày bên trên cho nên chúng tôi cam kết chỉ thu tiền của quý khách khi hoàn chỉnh bàn giao templates như trong hợp đồng. 
    Cho bạn niềm tin : Với đội ngũ Design chuyên nghiệp 6 năm kinh nghiệm và tầm nhìn thẩm mỹ...chúng tôi hứa hẹn mang lại cho quý khách một sản phẩm tốt nhất và ưng ý! 
    Quy định chung cần biết :
  1. Chúng tôi chỉ cung cấp mã nguồn 1 lần duy nhất.
  2. Chúng tôi không bảo hành khi quý khách làm trái quy định bảo lưu templates.
  3. Chúng tôi không hoàn tiền khi quý khách hàng đổi ý chọn giao diện khác.
  4. Chúng tôi chỉ có 1 địa chỉ duy nhất cho nên chúng tôi không chấp nhận việc khiếu nại không đúng bản quyền.
Copyright nsvina.com - Ghi rõ nguồn templates.nsvina.com - Khi phát hành lại bài viết trên trang này
Maxivn | VIỆC LÀM | Thiết kế web rẻ | Thiết kế blogspot