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!
Xem demoBướ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.

aaaaaaaaaa

Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Thành Kent Blog

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