[6][A.Thông điệp][slider-top-big][nothing]
You are here: Home / , , , , Phần 2: Erhay - Tạo menu OnClick "Start"

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

| No comment
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(&quot;sm_item1&quot;)'>                       <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

<!-- Phần CSS cho Menu Click new -->   
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.
Related Posts

  • Default comments
  • Facebook comments

Subscribe to: Post Comments ( Atom )