[Hướng Dẫn] cách tạo menu popup giống menu game của StarThảo-IT

Xin chào các bạn, hôm trước có bạn hỏi mình về menu giống như của mình nên hôm nay mình share luôn.

Vài hình ảnh demo:

Bắt tay vào làm luôn nhé 👌👌👌.

Các bạn thêm đoạn code sau vào chỗ trên thanh menu tùy ý nhé.

<li itemprop='name'><a href='#game' itemprop='url'><i aria-hidden='true' class='fa fa-life-ring'/>Game Online<span class='msubtitle'>Trực Tuyến</span></a></li>

Sau đó, khi hết code thanh menu trên blog của các bạn thì các bạn thêm đoạn code sau vào nhé:

#game{display:none}
#game:target{background:#fff;display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:99999;transition:all .3s}
a.close{z-index:9999;position:absolute;top:0;right:0;font-weight:700;font-size:25px;line-height:50px;color:#fff;background:#fa4949;width:50px;height:50px;text-align:center;display:block}
a.close:hover{color:#fff}
label ul{background:#1BA39C;border-radius: 10px;z-index:999;width:700px;max-width:100%;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-webkit-transition:.5s ease-in-out;margin:10px}
label ul li {list-style: none; width: 45%; float: left;}
label a{padding:10px;margin-right:10px; display: block; color: #fff; font-size:20px; font-weight:600; text-transform: capitalize; text-decoration: none; text-align: left;transition:1s ease-out}
label a:hover,label a:focus{color:#ddd}
label ul li img {position:relative;top:5px;margin:0 6px 0 0;width:25px;height:25px;border-radius:100%}
@media screen and (max-width: 640px){
label ul{margin:0}
label ul li {list-style: none; width: 75%; float: left;}
label a{margin:0 0 0 10%}
}
</style>
<div id='game'>
<label>
<ul>
<li><a class='htool' href='http://www.starthao-it.tk/p/kho-games-hanh-ong-cuc-inh.html' target='_blank'><i class='fa fa-product-hunt'/>  Game Hành Động</a></li>
<li><a class='htool' href='http://www.starthao-it.tk/p/kho-game.html' target='_blank'><i class='fa fa-tachometer'/> Game Tốc Độ</a></li>
<li><a class='htool' href='http://www.starthao-it.tk/p/kho-game-vui-tuyet-voi.html' target='_blank'><i class='fa fa-cloud-upload'/> Game Vui</a></li>
<li><a class='htool' href='http://www.starthao-it.tk/p/kho-game-chien-thuat-wow.html' target='_blank'><i class='fa fa-object-group'/> Game Chiến Thuật</a></li>
<li><a class='htool' href='http://www.starthao-it.tk/p/blog-page_67.html' target='_blank'><i class='fa fa-television'/> Game Doraemon</a></li>
<li><a class='htool' href='http://www.starthao-it.tk/p/kho-game-phieu-luu-qua-inh.html' target='_blank'><i class='fa fa-line-chart'/> Game Phiêu Lưu</a></li>
</ul>
</label>
<a class='close' href='#close' title='Close'><i aria-hidden='true' class='fa fa-times-circle'/></a>
</div>
 <div class='clear'/>

Sau đó các bạn lưu mẫu lại là xong. Chúc các bạn thành công!
Bài này cũng là up lại thôi... :D