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

Click ngay

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!

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

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 nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • 14 nhận xét:

    1. Cướp cmt đầu :3 Mà bài viết hay :v

      Trả lờiXóa
    2. Để bữa nào rảnh t làm lại cái menu này, k phải dùng cái hôm trước ông share t vì cái kia có js nên bỏ bớt js đi tí nào hay tí đó.

      Trả lờiXóa
      Trả lời
      1. Uhm đúng rồi k cần sub menu cx đc

        Xóa
      2. Ừ, t k làm submenu mà. Nhưng chắc để thư thư đã vì phải chỉnh khá nhiều thứ.

        Xóa
    3. Bước 2 dán thẻ đấy ở đâu ạ ?

      Trả lờiXóa
      Trả lời
      1. Muốn nó hiện chỗ nào thì dán chỗ đó (thường là phần header của blog)

        Xóa
    4. Vẫn chưa hiểu cái nút Wide là cái gì :v

      Trả lờiXóa
    5. Demo đâu bro ? Không có demo link thì phải demo ảnh chứ.

      Trả lờiXóa
    6. Từ nhiên ra 1 loạt bài cái im hơi lặng tiếng luôn :v

      Trả lờiXóa

    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
    » Không spam link, chia sẻ các link không liên quan đến bài viết.
    » Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
    » Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.