Thêm Mega Dropdown Menu vào Blogger

Add mega dropdown menu to blogger

Hôm nay trong bài viết này chúng ta sẽ thảo luận về việc làm thế nào để thêm Mega Dropdown Menu vào Blogger. Trong một số trường hợp thanh Menu này tốt hơn so với Dropdown Menu vì nó có thể giữ số lượng lớn các liên kết trong một danh sách thả xuống đơn. Menu này hoàn toàn được tạo ra từ CSS, không sử dụng Jquery hoặc JavaScript. Vì lý do này nó tải rất nhanh mà không ảnh hưởng tốc độ tải blog của bạn.

Cách thực hiện

Vào Mẫu >> Chỉnh sửa HTML và dán đoạn code dưới đây sau thẻ </header>

 <ul class="wc-megamenu" id="nav">
<li class="wcnavlist"><a class="wclink" href="http://iris-tips.blogspot.com/">Home</a></li>
<li class="wcnavlist"><span class="wclink">Categories</span>
<ul>
<li>
                <ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Wp plugins</a></li>
<li><a href="#">Wp Themes</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Traffic</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li>
                <ul>
<li><a href="#"> JavaScript </a></li>
<li><a href="#"> HTML5 </a></li>
<li><a href="#"> Jquery </a></li>
<li><a href="#"> Responsive </a></li>
<li><a href="#"> Web design </a></li>
<li><a href="#"> Blogging Tips </a></li>
<li><a href="#"> Facebook </a></li>
<li><a href="#"> Twitter </a></li>
<li><a href="#"> Make money </a></li>
<li><a href="#"> Adsense </a></li>
</ul>
</li>
<li>
                <ul>
<li><a href="#"> Services </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> About us </a></li>
<li><a href="#"> Disclaimer</a></li>
<li><a href="#"> Privacy Policy </a></li>
<li><a href="#"> Terms of use </a></li>
<li><a href="#"> Item 7 </a></li>
<li><a href="#"> Item 8 </a></li>
<li><a href="#"> Item 9 </a></li>
<li><a href="#"> Item 10 </a></li>
</ul>
</li>


</ul>
</li>

<li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></li>
<li class="wcnavlist"><a class="wclink" href="http://iris-tips.blogspot.com/">Contact Us</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Services</a></li>
<li class="wcnavlist"><a class="wclink" href="http://iris-tips.blogspot.com/">>> Iris Tips</a></li>
</ul>

<style>
 
ul.wc-megamenu li{
font:16px georgia, verdana;
}
ul.wc-megamenu,ul.wc-megamenu li,ul.wc-megamenu ul
{
list-style:none;
margin:0;
padding:0
}
ul.wc-megamenu
{position:relative;z-index:999;float:left;}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:relative;z-index:9999;color:#111111;text-decoration:none}
ul.wc-megamenu ul li{float:none;font-weight:700}
ul.wc-megamenu li:hover>ul{visibility:visible}
ul.wc-megamenu{width:100%}
ul.wc-megamenu ul li{float:left}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:static}
ul.wc-megamenu ul ul{display:none!important}
ul.wc-megamenu ul li{position:static;width:180px}
ul.wc-megamenu ul ul{display:block!important;position:static;width:auto!important}
ul.wc-megamenu ul ul li{float:none}
ul.wc-megamenu ul ul ul{display:none}
ul.wc-megamenu li.hover ul,ul.wc-megamenu li:hover ul{visibility:visible!important;color:#fff}
ul.wc-megamenu{background: #111111; font:18px georgia, verdana;}
ul.wc-megamenu a:link,ul.wc-megamenu a:visited{text-decoration:none;color:#2c539e;}
ul.wc-megamenu a:hover{color:#fff}
ul.wc-megamenu a:active{color:#2c539e;}
ul.wc-megamenu li.last ul li{float:right}
ul.wc-megamenu ul ul li{font-weight:400}
ul.wc-megamenu li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;list-style:none;}
ul.wc-megamenu li a{display:block;}
ul.wc-megamenu ul{list-style:none;visibility:hidden;position:absolute;top:100%;left:0;z-index:99999;width:550px;font-size:14px;letter-spacing:normal;background:#222222; padding:0 0 0 10px}
ul.wc-megamenu ul a{width:180px;padding:5px;color:#222222;}
ul.wc-megamenu ul a:hover{background:#8fc800;}
ul.wc-megamenu ul ul{padding:0;margin-left:-5px;top:1px;left:99%;margin-top:5px;text-transform:none}
ul.wc-megamenu .wcnavlist{padding:4px 10px}
.wclink,.wclink a:link,.wclink a:visited{color:#fff;font-size:18px}
.wclink hover,.wclink a:link,.wclink a:visited.wclink a:active,.wclink a:hover{color:#fff}
ul.wc-megamenu .wcnavlist a:link, ul.wc-megamenu .wcnavlist a:visited,ul.wc-megamenu .wcnavlist a:active{color:#fff}

</style> 

• DEMO

See the Pen GJNPOv by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm