Trang chủ » Thủ Thuật Blogspot

Hướng dẫn tạo mega menu responsive cho blogspot

16 tháng 5
Thông tin
Tiêu đề Hướng dẫn tạo mega menu responsive cho blogspot
Chuyên mục , ,
Định dạng File PDF
Ngày đăng 16 tháng 5
Lượt xem
Lượt thích
Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo một menu responsive cực đẹp cho blogspot.

DEMO


Cách thực hiện

Bước 1: Các bạn vào Chủ đề > Chỉnh sửa tìm đế thẻ ]]></b:skin> rồi chèn đoạn code sau lên trên nó
*,*:before,*:after{box-sizing:border-box}
html,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
.container{margin:10px auto;display:table;max-width:1140px;width:100%}
.container:after,.container:before{content:"" clear:both}
nav.menu{background:coral;position:relative;min-height:45px;height:100%}
.menu > ul > li{list-style:none;display:inline-block;color:#fff;line-height:45px}
.menu > ul li a,.xs-menu li a{text-decoration:none;color:#fff;display:block;padding:0 10px}
.menu > ul li a:hover{background:#444;color:#fff;transition-duration:0.3s;-moz-transition-duration:0.3s;-webkit-transition-duration:0.3s}
.active{background:#444!important}
.displaynone{display:none}
.xs-menu-cont{display:none}
.xs-menu-cont > a{background:none repeat scroll 0 0 #ff7f50;border-radius:3px;padding:3px 6px;display:block;border-bottom:1px solid #E67248;box-shadow:0 1px 2px #e67248;-webkit-box-shadow:0 1px 2px #e67248;-moz-box-shadow:0 1px 2px #e67248}
.xs-menu-cont > a:hover{cursor:pointer}
.xs-menu li{color:#fff;padding:14px 30px;border-bottom:1px solid #ccc;background:#FF7F50}
.xs-menu a{text-decoration:none}
.mega-menu{background:none repeat scroll 0 0 #888;left:0;margin-top:0px;position:absolute;width:100%;padding:15px;display:none;transition-duration:0.9s}
#menutoggle i{color:#fff;font-size:33px;margin:0;padding:0}
.mm-6column:after,.mm-6column:before,.mm-3column:after,.mm-3column:before{content:"";display:table;clear:both}
.mm-6column,.mm-3column{float:left;position:relative}
.mm-6column{width:50%}
.mm-3column{width:25%}
.responsive-img{display:block;max-width:100%}
.left-images{margin-right:25px}
.left-images,.left-categories-list{float:left}
.categories-list li{display:block;line-height:normal;margin:0;padding:5px 0}
.categories-list li:hover{background:inherit!important}
.left-images > p{background:none repeat scroll 0 0 #ff7f50;display:block;font-size:18px;line-height:normal;margin:0;padding:5px 14px}
.categories-list span{font-size:18px;padding-bottom:5px;text-transform:uppercase}
.mm-view-more{background:none repeat scroll 0 0 #ff7f50;color:#fff;display:inline!important;line-height:normal;padding:5px 8px!important;margin-top:10px}
.display-on{display:block;transition-duration:0.9s}
.drop-down > a:after{content:"\f103";color:#fff;font-family:FontAwesome;font-style:normal;margin-left:5px}
@media (max-width:600px){
  .menu{display:none}
  .xs-menu li a{padding:0}
  .xs-menu-cont{display:block}
}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
Bước 2:  Các bạn tìm đến thẻ <body>  và chèn vào sau nó đoạn code sau
<div class="container">
<div class="xs-menu-cont">
<a href="https://www.blogger.com/null" id="menutoggle"><i class="fa fa-align-justify"></i> </a>
    <br />
<nav class="xs-menu displaynone">
      <ul>
<li class="active">
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Home</a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">About</a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Services</a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Team</a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Portfolio</a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Blog</a>
        </li>
<li>
          <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Contact</a>
        </li>
</ul>
</nav>
  </div>
<br />
<nav class="menu">
    <ul>
<li class="active">
        <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Home</a>
      </li>
<li class="drop-down">
        <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Products</a>
        <div class="mega-menu fadeIn animated">
<div class="mm-6column">
<span class="left-images">
        <img src="https://4.bp.blogspot.com/-faF-AemPFUM/U4ryP7pQRsI/AAAAAAAAEvA/fZ-hskCSln4/s1600/Magento%2Bthemes.jpg" />
        </span><br />
<span class="left-images">Most Popular Styles </span><br />
<span class="left-images">
    </span>
            <span class="categories-list">
       <ul>
       Computer
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
<li>Monitors</li>
<li>Networking Printers</li>
<li>Scanners</li>
<li>Jumpers &amp; Cardigans</li>
<li><a class="mm-view-more" href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">View more →</a></li>
</ul>
</span>
    </div>
<div class="mm-3column">
<span class="categories-list">
      </span><br />
<ul><span class="categories-list">
        TV &amp; Video
<li>LED TVs
        </li>
<li>Plasma TVs
          </li>
<li>3D TVs
            </li>
<li>DVD &amp; Blu-ray Players
              </li>
<li>Home Theater Systems
                </li>
<li>Cell Phones
                  </li>
<li>Apple iPhone
                    </li>
<li><a class="mm-view-more" href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">View more →</a></li>
</span></ul>
<span class="categories-list">
                    </span>
    </div>
<div class="mm-3column">
<span class="categories-list">
      </span><br />
<ul><span class="categories-list">
       Car Electronics
<li>GPS &amp; Navigation</li>
<li>In-Dash Stereos</li>
<li>Speakers</li>
<li>Subwoofers</li>
<li>Amplifiers</li>
<li>MP3 Players</li>
<li>iPods</li>
<li><a class="mm-view-more" href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">View more →</a></li>
</span></ul>
<span class="categories-list">
      </span>
    </div>
</div>
</li>
<li>
      <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Services</a>
    </li>
<li>
      <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Team</a>
    </li>
<li>
      <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Blog</a>
    </li>
<li>
      <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#" target="_blank">Contact</a>
    </li>
<li style="float: right;">
      <a href="https://www.blogger.com/blogger.g?blogID=4224993115016807116#">Go my Blog</a>
    </li>
</ul>
</nav>
</div> 
Bước 3: Các bạn tìm thẻ </body> và chèn lên trên nó đoạn code sau
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
  //responsive menu toggle
  $("#menutoggle").click(function() {
    $(".xs-menu").toggleClass("displaynone");
  });
  //add active class on menu
  $("ul li").click(function(e) {
    e.preventDefault();
    $("li").removeClass("active");
    $(this).addClass("active");
  });
  //drop down menu
  $(".drop-down").hover(function() {
    $(".mega-menu").addClass("display-on");
  });
  $(".drop-down").mouseleave(function() {
    $(".mega-menu").removeClass("display-on");
  });
});
//]]>
</script> 
Bước 4: Cuối cùng các bạn chèn đoạn code sau trong phần <head>....</head> 
<link href="http://fonts.googleapis.com/css?family=Sintony:400,700&amp;subset=latin-ext" rel="stylesheet" type="text/css"></link>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Xong rồi các bạn lưu lại và chỉnh sửa cho phù hợp với template của mình là xong.
Chúc các bạn thành công!

Hướng dẫn tạo mega menu responsive cho blogspot là một trong những bài viết về chủ đề . Ngoài ra chúng tôi còn rất nhiều bài biết khác về chủ đề này nữa. Hãy tìm thêm cho mình những tài liệu khác nữa để nâng cao kiến thức nhé!

Báo link hỏng

Bình Luận Gần Đây