• ✅ (Đã xác minh)
  • Tạo Menu Responsive Material Design đơn giản với HTML và CSS

    Hôm nay, mình chia sẻ đến các bạn một mẫu Menu Material Design Responsive đơn giản chỉ với HTML và CSS vô cùng nhẹ nhàng và dễ thực hiện.

    Tạo Menu Responsive Material Design đơn giản với HTML và CSS

    Một vài hình ảnh Demo

    Tạo Menu Responsive Material Design đơn giản với HTML và CSS
    Hiển thị trên giao diện PC

    Tạo Menu Responsive Material Design đơn giản với HTML và CSS

    Tạo Menu Responsive Material Design đơn giản với HTML và CSS
    Hiển thị trên giao diện Mobile

    Cách Tạo Menu Responsive Material Design

    Chèn CSS vào trên thẻ ]]></b:skin> hoặc trong cặp thẻ <style>...</style>.
    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
    }
    .nav-fostrap {
      display: block;
      margin-bottom: 15px 0;
      background: #03A9F4;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      border-radius: 3px;
    }
    .nav-fostrap ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: block;
    }
    .nav-fostrap li {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: inline-block;
      position: relative;
      font-size: 14;
      color: #def1f0;
    }
    .nav-fostrap li a {
      padding: 15px 20px;
      font-size: 14;
      color: #def1f0;
      display: inline-block;
      outline: 0;
      font-weight: 400;
    }
    .nav-fostrap li:hover ul.dropdown { display: block; }
    .nav-fostrap li ul.dropdown {
      position: absolute;
      display: none;
      width: 200px;
      background: #2980B9;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      padding-top: 0;
    }
    .nav-fostrap li ul.dropdown li {
      display: block;
      list-style-type: none;
    }
    .nav-fostrap li ul.dropdown li a {
      padding: 15px 20px;
      font-size: 15px;
      color: #fff;
      display: block;
      font-weight: 400;
    }
    .nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }
    .nav-fostrap li:hover a {
      background: #2980B9;
      color: #fff !important;
    }
    .nav-fostrap li:first-child:hover a { border-radius: 3px 0 0 3px; }
    .nav-fostrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
    .nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; }
    .nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
    .arrow-down {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #def1f0;
      position: relative;
      top: 15px;
      right: -5px;
      content: '';
    }
    .title-mobile {
      display: none;
    }
     @media only screen and (max-width:900px) {
    .nav-fostrap {
      background: #fff;
      width: 200px;
      height: 100%;
      display: block;
      position: fixed;
      left: -200px;
      top: 0px;
      -webkit-transition: left 0.25s ease;
      -moz-transition: left 0.25s ease;
      -ms-transition: left 0.25s ease;
      -o-transition: left 0.25s ease;
      transition: left 0.25s ease;
      margin: 0;
      border: 0;
      border-radius: 0;
      overflow-y: auto;
      overflow-x: hidden;
      height: 100%;
    }
    .title-mobile {
      position: fixed;
      display: block;
        top: 10px;
        font-size: 20px;
        left: 100px;
        right: 100px;
        text-align: center;
        color: #FFF;
    }
    .nav-fostrap.visible {
      left: 0px;
      -webkit-transition: left 0.25s ease;
      -moz-transition: left 0.25s ease;
      -ms-transition: left 0.25s ease;
      -o-transition: left 0.25s ease;
      transition: left 0.25s ease;
    }
    .nav-bg-fostrap {
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      height: 50px;
      margin: 0;
      position: absolute;
      top: 0px;
      left: 0px;
      background: #03A9F4;
      padding: 12px 0 0 10px;
      -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }
    .navbar-fostrap {
      display: inline-block;
      vertical-align: middle;
      height: 50px;
      cursor: pointer;
      margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        padding: 12px;
    }
    .navbar-fostrap span {
      height: 2px;
      background: #fff;
      margin: 5px;
      display: block;
      width: 20px;
    }
    .navbar-fostrap span:nth-child(2) { width: 20px; }
    .navbar-fostrap span:nth-child(3) { width: 20px; }
    .nav-fostrap ul { padding-top: 50px; }
    .nav-fostrap li { display: block; }
    .nav-fostrap li a {
      display: block;
      color: #505050;
      font-weight: 600;
    }
    .nav-fostrap li:first-child:hover a { border-radius: 0; }
    .nav-fostrap li ul.dropdown { position: relative; }
    .nav-fostrap li ul.dropdown li a {
      background: #2980B9 !important;
      border-bottom: none;
      color: #fff !important;
    }
    .nav-fostrap li:hover a {
      background: #03A9F4;
      color: #fff !important;
    }
    .nav-fostrap li ul.dropdown li:hover a {
      background: rgba(0,0,0,.1); !important;
      color: #fff !important;
    }
    .nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; }
    .nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
    .arrow-down {
      border-top: 5px solid #505050;
      position: absolute;
      top: 20px;
      right: 10px;
    }
    .cover-bg {
      background: rgba(0,0,0,0.5);
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    }
     @media only screen and (max-width:1199px) {
    .container { width: 96%; }
    }
    .fixed-top {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
    }

    Tiếp theo, chèn đoạn HTML vào nơi bạn muốn hiển thị, có thể tạo Tiện ích HTML trong bố cục để chèn vào.
    <div id='main'>
      <div class='container'>
        <div  style='margin-top:150px;margin-bottom:30px;text-align:center;'>
          <img src='https://4.bp.blogspot.com/-7OHSFmygfYQ/VtLSb1xe8kI/AAAAAAAABjI/FxaRp5xW2JQ/s320/logo.png' style='width: 100px;margin-bottom:15px'>
          <h1>Material Design Responsive Menu</h1>
        </div>
        <nav>
          <div class='nav-fostrap'>
            <ul>
              <li><a href=''>Home</a></li>
              <li><a href='javascript:void(0)'>Web Design<span class='arrow-down'></span></a>
                <ul class='dropdown'>
                  <li><a href=''>HTML</a></li>
                  <li><a href=''>CSS</a></li>
                  <li><a href=''>Javascript</a></li>
                  <li><a href=''>JQuery</a></li>
                </ul>
              </li>
              <li><a href='javascript:void(0)' >Blogger<span class='arrow-down'></span></a>
                <ul class='dropdown'>
                  <li><a href=''>Widget</a></li>
                  <li><a href=''>Tips</a></li>
                </ul>
              </li>
              <li><a href='javascript:void(0)' >SEO<span class='arrow-down'></span></a>
                <ul class='dropdown'>
                  <li><a href=''>Tools</a></li>
                  <li><a href=''>Backlink</a></li>
                </ul>
              </li>
              <li><a href=''>Google Adsense</a></li>
              <li><a href=''>Advertising</a></li>
              <li><a href=''>Business</a></li>
            </ul>
          </div>
          <div class='nav-bg-fostrap'>
            <div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
            <a href='' class='title-mobile'>Fostrap</a>
          </div>
        </nav>
      </div>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
    <script>
    $(document).ready(function(){
      $('.navbar-fostrap').click(function(){
       $('.nav-fostrap').toggleClass('visible');
       $('body').toggleClass('cover-bg');
      });
     });
    </script>

    Chỉ 2 đoạn code khá đơn giản vậy thôi. Ở phần HTML thì các bạn sửa nội dung menu theo ý các bạn nhé! Chúc thành công!

    Đăng nhận xét

    Cùng chuyên mục

    Service & High Quality Anh Trai Nang Blogger

    Powered by BFGMedia

    Chuyên dịch vụ dành cho blogspot
    và truyền thông

    Google Fonts

    Integrated with 100+ Google Fonts on the Blogger Template Designer

    Unlimited Sidebars

    Make your own sidebar with our high quality blogger templates

    Font Awesome

    More than 1000 icons

    Exclusive Documentation

    Easy & Exclusive Documentation

    Unlimited Colors

    Customize the Skin of the template with Unlimited Color Options

    Google Analytics

    Place your Tracing Code like Google Analytics Only in few options

    Social Sharing

    100% Compatible with 200+ Social Sharing Websites

    Fully Responsive

    Full Compatibility with all Devices like Mobile, Tablet and Desktop

    No Coding Required

    Customize your Website with No Coding Knowledge Required