Chia sẻ Flat Mega Menu tuyệt đẹp design by Bác Sĩ Windows

Vô tình lục lại template cũ thấy cái mega menu đẹp quá, nên mang về chỉnh lại CSS một chút rồi đem lên đây chia sẻ lại cho các bạn :)

Thôi không nói nhiều nữa, xem demo ngay nhé, nếu thích thì áp dụng vào blog của mình luôn!

Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong template.

#stickymenubacsiwindows{margin:0!important;height:60px;width:100%;z-index:99;background:#fff;top:0;position:absolute;box-shadow:0 10px 10px rgba(0,0,0,.02)}div.menudanhmuc-bacsiwindowsall{width:1080px;margin:0 auto;overflow:hidden;height:60px}.home-icon1 a{color:#fff!important;padding:5px!important;font-size:120%}.home-icon1{float:left;overflow:hidden;padding:8px;margin:0;background:#3b5998;height:60px}.menudanhmuc-bacsiwindows ul{list-style:none;padding:0;margin:0 auto;overflow:hidden}.menudanhmuc-bacsiwindows li{float:left;padding:0}.menudanhmuc-bacsiwindows ul li a{color:#444;letter-spacing:0;font:700 18px "Roboto Condensed";padding:0 15px;line-height:60px;text-transform:uppercase}.menudanhmuc-bacsiwindows ul ul li a{color:#fff!important;font:13px arial;padding-top:8px;height:23px;padding-left:10px;text-transform:none;border:none}.menudanhmuc-bacsiwindows li a{color:#fff;display:block;line-height:35px;margin:0;padding:0 10px;text-align:center;text-decoration:none}.menudanhmuc-bacsiwindows li a:hover,.menudanhmuc-bacsiwindows ul li:hover a{background-color:#55579e;color:#fff;text-decoration:none}.menudanhmuc-bacsiwindows li ul{background-color:#55579e;margin:0;position:absolute;z-index:-1;overflow:hidden;opacity:0;transition:.3s;transform:scaleY(0)}ul.menufinish{margin-left:-222px!important}.menudanhmuc-bacsiwindows li:hover ul{opacity:1;z-index:99;top:60px;transform:scaleY(1)}.menudanhmuc-bacsiwindows li li{display:block;float:left;margin:0;width:150px}.menuaddgon-bacsiwindows{float:left;width:150px;height:100%}.menuaddgon-bacsiwindows h1{font:700 18px 'ROBOTO CONDENSED'!important;padding:10px 10px;text-transform:uppercase;margin:0;color:#ff0;height:10px;width:150px;overflow:hidden;float:left}.menudanhmuc-bacsiwindows li:hover li a{background:none}.menudanhmuc-bacsiwindows li ul a{display:block;height:35px;font-size:16px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}.menudanhmuc-bacsiwindows li ul a:hover,.menudanhmuc-bacsiwindows li ul li:hover a{background:rgba(0,0,0,.2)!important}.menudanhmuc-bacsiwindows p{clear:left}.home_icon{padding:0 25px!important;font-size:150%!important;background:#55579e;color:#fff!important}

Bước 3: Chèn đoạn HTML sau đây vào nơi bạn muốn hiển thị trong template.

<div id="stickymenubacsiwindows">
<div class="menudanhmuc-bacsiwindowsall">
<div class="menudanhmuc-bacsiwindows">
<ul>
<li>
<a class="home_icon" href="https://blogttcn.blogspot.com/" title="Trang chủ">
<i class="fa fa-home">
</i>
</a>
</li>
<li>
<div class="themmau1">
<a class="trigger" href="https://blogttcn.blogspot.com/search/label/%C4%90%E1%BB%93-h%E1%BB%8Da?&max-results=30">
Đồ họa
</a>
</div>
<ul class="menuul1">
<div class="menuaddgon-bacsiwindows">
<h1>
Photoshop
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Photoshop?&max-results=30">
Thủ thuật
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Photoshop?&max-results=30">
Phụ kiện
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/04/photoshop-cs3-portable.html">
Download PS Portable
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/07/Adobe-Photoshop-CS3-Full.html">
Download PS Full
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Làm phim - clip
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Premiere?&max-results=30">
Premiere Pro
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/After%20effect?&max-results=30">
After Efects
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Avid%20liquid%207?&max-results=30">
Avid Liquid 7
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/proshow%20gold?&max-results=30">
Proshow Gold
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Tổng hợp
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Flash?&max-results=30">
Flash
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Media?&max-results=30">
Media
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Photoshop%20v%C3%A0%20%C4%90%E1%BB%93%20h%E1%BB%8Da?&max-results=30">
Ðồ họa kỹ thuật
</a>
</li>
</div>
</ul>
</li>
<li>
<div class="themmau1">
<a class="trigger" href="https://blogttcn.blogspot.com/search/label/Download?&max-results=30">
Download
</a>
</div>
<ul class="menuul1">
<div class="menuaddgon-bacsiwindows">
<h1>
Bộ cài Windows
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Download-windows?&max-results=30">
Windows XP
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Download-windows?&max-results=30">
Windows 7
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Download-windows?&max-results=30">
Windows 8 & 8.1
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Download-windows?&max-results=30">
Windows 10
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Hình nền máy tính
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/H%C3%ACnh-n%E1%BB%81n-m%C3%A1y-t%C3%ADnh?&max-results=30">
Phong cảnh
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/H%C3%ACnh-n%E1%BB%81n-m%C3%A1y-t%C3%ADnh?&max-results=30">
Xe 360
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/H%C3%ACnh-n%E1%BB%81n-m%C3%A1y-t%C3%ADnh?&max-results=30">
Động vật
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/H%C3%ACnh-n%E1%BB%81n-m%C3%A1y-t%C3%ADnh?&max-results=30">
Hoạt hình
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Game - trò chơi
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Game-offline?&max-results=30">
Game offline
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Game-online?&max-results=30">
Game online
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Web-game?&max-results=30">
Web game (flash)
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Font chữ
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Fonts?&max-results=30">
Font Việt Hóa
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Fonts?&max-results=30">
Font VNI
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Fonts?&max-results=30">
Font Unicode
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Fonts?&max-results=30">
Font Thư pháp
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Phần mềm
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Antivirus?&max-results=30">
Diệt Virus
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/%C4%90%E1%BB%93-h%E1%BB%8Da?&max-results=30">
Đồ họa - thiết kế
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Ch%E1%BB%89nh-s%E1%BB%ADa-video?&max-results=30">
Làm clip - video
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/04/idm.html">
Hỗ trợ download
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/12/ccleaner-501-moi-nhat-cap-nhat-30-12-2014.html">
Dọn dẹp hệ thống
</a>
</li>
</div>
</ul>
</li>
<li>
<div class="themmau1">
<a class="trigger" href="https://blogttcn.blogspot.com/search/label/Ph%E1%BA%A7n-m%E1%BB%81m?&max-results=30">
Phần mềm
</a>
</div>
<ul class="menuul3">
<div class="menuaddgon-bacsiwindows">
<h1>
Diệt virus - Antivirus
</h1>
<li>
<a href="https://blogttcn.blogspot.com/2014/04/huong-dan-cai-dat-va-su-dung-Avast.html" target="blank">
Avast Free Antivirus
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2015/02/Avira-Free-Antivirus-2015.html" target="blank">
Avira Free Antivirus
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/09/phan-mem-diet-virus-AVG.html" target="blank">
AVG Free Antivirus
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/11/Bkav-Home-Free.html" target="blank">
Bkav Free Antivirus
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/" target="blank">
KIS Free Antivirus
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Đồ họa - thiết kế
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Ch%E1%BB%89nh-s%E1%BB%ADa-video?&max-results=30">
Chỉnh sửa video
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/L%C3%A0m-phim?&max-results=30">
Làm phim (Proshow..)
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Photoshop?&max-results=30">
Adobe Photoshop
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Hỗ trợ download
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/IDM?&max-results=30">
Internet DM
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/">
Youtube Downloader
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Trình duyệt web
</h1>
<li>
<a href="https://blogttcn.blogspot.com/2014/04/huong-dan-cai-dat-trinh-duyet-Coc-Coc.html" target="blank">
Cốc Cốc
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/10/huong-dan-cai-dat-trinh-duyet-Google-Chrome.html" target="blank">
Google Chrome
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/10/huong-dan-cai-dat-trinh-duyet-Mozilla-Firefox.html" target="blank">
Mozilla Firefox
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/11/trinh-duyet-web-Safari.html" target="blank">
Apple Safari
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Dọn dẹp hệ thống
</h1>
<li>
<a href="https://blogttcn.blogspot.com/2014/06/huong-dan-cai-dat-va-su-dung-CCleaner-don-rac.html">
CCleaner
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/CCleaner?&max-results=30">
Key CCleaner
</a>
</li>
</div>
</ul>
</li>
<li>
<div class="themmau2">
<a class="trigger" href="https://blogttcn.blogspot.com/search/label/Th%E1%BB%A7-thu%E1%BA%ADt?&max-results=30">
Thủ thuật
</a>
</div>
<ul class="menuul3">
<div class="menuaddgon-bacsiwindows">
<h1>
Hệ điều hành
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Windows-XP?&max-results=30">
Windows XP
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Windows-7?&max-results=30">
Windows 7
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Windows-8?&max-results=30" target="_blank">
Windows 8/8.1
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Windows-10?&max-results=30">
Windows 10
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Phần mềm
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Ph%E1%BA%A7n-m%E1%BB%81m?&max-results=30">
Cài đặt phần mềm
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Ph%E1%BA%A7n-m%E1%BB%81m?&max-results=30">
Crack phần mềm
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Ph%E1%BA%A7n-m%E1%BB%81m?&max-results=30">
Key phần mềm
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/B%E1%BA%A3n-quy%E1%BB%81n-ph%E1%BA%A7n-m%E1%BB%81m?&max-results=30">
Bản quyền phần mềm
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Thủ thuật khác
</h1>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Youtube?&max-results=30">
Youtube
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Yahoo?&max-results=30">
Yahoo Messenger
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Facebook?&max-results=30">
Facebook
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Gmail?&max-results=30">
Gmail
</a>
</li>
</div>
<div class="menuaddgon-bacsiwindows">
<h1>
Cách vào facebook
</h1>
<li>
<a href="https://blogttcn.blogspot.com/2014/04/huong-dan-sua-DNS-va-file-hosts-de-vao-Facebook-cho-cac-ban-bi-chan.html" target="blank">
Sửa DNS & hosts
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/04/huong-dan-cai-dat-trinh-duyet-Coc-Coc.html" target="blank">
Trình duyệt Cốc Cốc
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/11/su-dung-add-on-vao-facebook-cho-trinh-duyet-Google-Chrome.html" target="blank">
Cài Extensions
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2015/02/vao-facebook-thoai-mai-bang-phan-mem-ultrasurf.html" target="blank">
Cài phần mềm hỗ trợ
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/2014/03/sua-thoi-gian-tren-windows.html" target="blank">
Sửa thời gian
</a>
</li>
</div>
</ul>
</li>
<li>
<a href="https://blogttcn.blogspot.com/p/contact.html">
Hỗ trợ
</a>
<ul class="menuul5">
<div class="menuaddgon-bacsiwindows">
<li>
<a href="https://blogttcn.blogspot.com/p/contact.html">
Liên hệ - góp ý
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/p/contact.html" target="_blank">
Báo lỗi - báo hỏng
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/p/lien-ket.html">
Liên kết hợp tác
</a>
</li>
</div>
</ul>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Gi%E1%BA%A3i-tr%C3%AD?&max-results=30">
Giải trí
</a>
<ul class="menuul5">
<div class="menuaddgon-bacsiwindows">
<li>
<a href="http://mp3.zing.vn/" target="_blank">
Nghe nhạc
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/p/television.html" target="_blank">
Xem tivi
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/search/label/Web-game?&max-results=30" target="_blank">
Chơi game
</a>
</li>
<li>
<a href="https://blogttcn.blogspot.com/p/piano.html" target="_blank">
Chơi Piano
</a>
</li>
</div>
</ul>
</li>
<li>
</li>
<li>
<a href="//blogttcn.blogspot.com" target="blank" title="Xem hướng dẫn cách làm menu">
Xem hướng dẫn
</a>
</li>
</ul>
</div>
</div>
</div>

Bước 4: Lưu template.

Bình luận Blogger

MỘT SỐ LƯU Ý KHI BÌNH LUẬN:
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !