Phần 2: Erhay - Tạo menu OnClick "Start"

Menu Onclick:
Nếu bạn thường tới Erhay, bạn sẽ không khó để nhận ra một Menu được hiển thị khi bạn bấm vào Chữ "Start" trên màn hình.

Bài hôm nay mình sẽ hướng dẫn mọi người cách làm Menu như vậy.

1. Đầu tiên là menu Onclick - Tức là khi bạn kích vào chữ Start và menu hiện lên, kích lại để close.

Xem demo:

Nhấn vào đây để mở menu

Hoặc xem tại đây: Demo Onclick

Nếu bạn có ý định áp dụng trực tiếp Menu onclick này vào Website/blog của mình thì dưới đây mình sẽ hướng dẫn bạn cách làm.
Thêm CSS vào trước thẻ ]]></skin>

ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type: none} .mainMenus li { position: relative} .subMenus { display: none; position: absolute; top: 20px; left: 0px;}

Vị trí bạn muốn đặt menu để open(close) giống như Start trên Erhay

<ul class='mainMenus'> <li onclick='showSubMenu("sm_item1")'> <a style='cursor:auto;font-size:15px; font-family:Segoe,Arial,sans-serif; color:Green; text-decoration:none' href="#open">Nhấn vào đây để mở menu</a> <ul class='subMenus' id='sm_item1'> Một menu được mở ra. </ul>
</li> </ul>

Đặt đoạn mã Javascript này trước thẻ </head> hoặc sau thẻ <head>

window.onload=function() { subMenusO = getElementsByClassName(document,'ul','subMenus'); } function showSubMenu(elemId) { var dispStatus = (document.getElementById(elemId).style.display == 'block')? 'none' : 'block'; for(var i=0; i < subMenusO.length; i=i+1) { subMenusO[i].style.display = 'none'; } document.getElementById(elemId).style.display = dispStatus; } function getElementsByClassName(oElm, strTagName, strClassName){ var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/\-/g, "\\-"); var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); var oElement; for(var i=0; i<arrElements.length; i++) { oElement = arrElements[i]; if(oRegExp.test(oElement.className)) { arrReturnElements.push(oElement); } } return (arrReturnElements) }

2. Menu Open giống Erhay

Nếu bạn muốn một Menu như Erhay thì dưới đây là toàn bộ CSS và html. Thao tác thêm hoàn toàn tương tự như trên.

CSS

a{text-decoration:none;
font-size:11px;
}
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}

.mainMenus li {
position: relative}

.subMenus {
display: none;
position: absolute;
top: 20px;
left: 0px;
}
   #div-header .div-header   {   height:45px!important;   width:340px!important;   background:url();   line-height:45px!important;   text-align:left!important;   padding-left:30px!important;   margin-bottom:20px!important;   }   .div-subheader     {   width:170px;   line-height:20px;   font:inherit;   padding-left:40px;   }   .div-subheader a     {   text-decoration:underline;   font-size:12px;   color:white;   font-family:Verdana;   }   .div-header a   {   text-decoration:none;   font-size:13px;   color:white;   font-family:Verdana;   font-weight:bold;   }   .div-box1   {   height:170px; width:160px; float:left; list-style-type:none;padding-left:20px   }   .div-box2   {   height:170px; width:160px; float:left;     }   .div-box1 ul li, .div-box2 ul li   {   list-style-type:none;   text-decoration:none;   padding-bottom: 15px;   }   .div-box1 ul li a, .div-box2 ul li a   {   text-decoration:none;   color:white;   font-family: inherit;   }   .div-box1 li a:hover, .div-box2 ul li a:hover   {   text-decoration:underline;   }   #menu-2{}

HTML

Mời bạn Xem tại Demo

Phần Javascript hoàn toàn như trên.

Xem Demo: Demo menu Onclick Erhay

Nếu bạn có bất cứ ý kiến hay thắc mắc nào bạn có thể để lại phản hồi tại Erhay-Hỏi đáp hoặc comment trực tiếp. Xin cảm ơn.

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn