Hỗ trợ trực tuyến
Codedayroi.Net
© Copyright 2018 Code đây rồi

Tạo menu Responsive hoàn toàn bằng CSS cực nhẹ và đẹp cho Blogger/Blogspot


Chào các bạn, hôm nay mình sẽ viết bài hướng dẫn các bạn Tạo 1 menu Responsive hoàn toàn bằng CSS cực nhẹ và đẹp cho blogger nhé.

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên phía trên
#navigation{width:100%;max-width:1024px;height:30px;text-transform:uppercase;font-size:100%;background:#359131;color:#000}
#navigation ul.menus{background:#359131;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navigation a{display:block;line-height:30px;padding:0 10px 0;text-decoration:none;color:#fff;font-weight:600;font-size:12px;border-right: 1px solid #3eaa3a; transition: .4s}
#navigation ul,#navigation li{margin:0 auto;padding:0;list-style:none}
#navigation ul{height:30px;width:100%;max-width:1024px}
#navigation li{float:left;display:inline;position:relative}
#navigation input{display:none;margin:0;padding:0;width:100%;height:30px;opacity:0;cursor:pointer}
#navigation label{display:none;width:35px;height:31px;line-height:31px;text-align:center}
#navigation label span{font-size:16px;position:absolute;left:35px}
#navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none;border-bottom:1px dashed #31AFDB}
#navigation ul.menus a{color:#FFF;line-height:35px}
#navigation li ul{background:#0F5341;margin:0;width:180px;height:auto;position:absolute;top:30px;left:0;z-index:10;display:none;border-bottom:3px solid #16a085}
#navigation li a:hover{background:#3eaa3a}
#navigation li li{display:block;float:none}
#navigation li ul ul{left:100%;top:0}
#navigation li li > a{font-size:12px;display:block;padding:0 10px;margin:0;line-height:24px;text-decoration:none;color:#fff;border-bottom:1px dotted #777}
@media screen and (max-width:960px) {
#search-box{display:block!important}
.search,#hide-mb{display: none;}
}
@media screen and (max-width:800px) {
#navigation{position:relative}
#navigation ul{background:#359131;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navigation ul.menus{width:100%;position:static;padding-left:20px}
#navigation li{display:block;float:none;width:auto}
#navigation input,#navigation label{position:absolute;top:0;left:0;display:block}
#navigation input{z-index:4}
#navigation input:checked + label{color:#fff}
#navigation input:checked ~ ul{display:block;width:100%}
#navigation li:hover > ul{width:100%}
}
Bước 2: Bạn dán HTML menu vào nơi muốn hiển thị, thường là ở phần header blog !
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label><i class='fa fa-bars' style='font-size:16px;color:#fff'></i></label>
<ul>
<li><a href='/'><i class='fa fa-home'></i> Trang chủ</a></li>
<li><a href='/search/label/Facebook?&max-results=10'><i aria-hidden='true' class='fa fa-facebook'></i> Thủ thuật Facebook</a></li>
<li><a href='/search/label/Blogger?&max-results=10'><i aria-hidden='true' class='fa fa-code'></i> Thủ thuật Blogger</a></li>
<li><a href='/search/label/Blogger%20fix?&max-results=10'><i aria-hidden='true' class='fa fa-wrench'></i> Blogger fix</a></li>
<li><a href='/search/label/Template%20Blogger?&max-results=10'><i aria-hidden='true' class='fa fa-star'></i> Template Blogger</a></li>
<!-- Search -->
<div class='search' id='data-search'> <a class='search-btn' href='#search'> <i class='fa fa-search'/> <i class='fa fa-times'/> </a> <div class='unstyled-list search-menu'> <div id='search-box-pc'> <form action='/search' id='search-form-pc' method='get' target='_top'> <input id='search-text-pc' name='q' placeholder='Bạn muốn tìm gì...' type='text'/> </form> </div> </div> </div>
<script type='text/javascript'>
(function(){window.Menu=function(){function a(a){this.nav=a,this.menubtn=$(".search-btn",this.nav),this.menubtn.on("click",function(a){return function(b){return a.nav.toggleClass("active"),!1}}(this))}return a.init=function(){return $("#data-search").each(function(b,c){return new a($(c))})},a}(),$(function(){if($("#data-search").length)return Menu.init()})}).call(this);
</script>
</ul>
</nav>
Ưu điểm của menu này: Nhẹ, không dùng js nên không ảnh hưởng đến việc load,...
Chúc bạn thành công!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...