Có gì mới trên Blog Hiếu WAI?

Cập nhật những thay đổi, cập nhật mới trên Blog Hiếu WAI

BlogTheme VN

Kho theme blogspot miễn phí khổng lồ với hàng trăm giao diện độc đáo.

PLUS Kiến Thức

Chia sẻ tài liệu học tập, khóa học ôn thi THPT quốc gia 2017 - 2018

Quà tặng - WAILOAD Template Blogger

Tặng theme blogspot chuẩn SEO load siêu nhanh thiết kế bởi Hiếu WAI

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

tháng 5 16, 2017 0 nhận xét
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMz2cblHVHwXmkPggo_PcfveZIKzTgwaDRzr1Q6l7GLIi_-GUc9FVaVrA8uG_a6bWEaZ9VIrEMzWky-SnM7uTV3dgfLljCz0ykKLsdEyFR9wrblzYGVR0IAFAX17YBUVTdBB3K2wnLmU4/s1600/Magento+themes.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!
Nhãn:
https://magpro-plus.blogspot.com/2017/05/huong-dan-tao-mega-menu-responsive-cho.html
Share:
Phản Hồi Bạn Đọc

Không có nhận xét nào

Đăng ký: Đăng Nhận xét ( Atom )