Material Design Responsive Menu đơn giản chỉ với HTML và CSS cực nhẹ

Like Rê chuột vào nút Like để chọn biểu tượng cảm xúc
Загрузка...
Material Design là một ngôn ngữ lập trình trực quan được tạo ra bởi Google. Nó là lập trình ngôn ngữ sử dụng hiển thị trực quan một cách thú vị nhưng vô cùng đơn giản.

Hôm nay Niemstyle.com chia sẻ đến các bạn một mẫu Menu Material Design Responsive đơn giản chỉ với HTML và CSS cực nhẹ.

Material Design Responsive Menu đơn giản chỉ với HTML và CSS cực nhẹ

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

Material Design Responsive Menu đơn giản chỉ với HTML và CSS cực nhẹ

Material Design Responsive Menu đơn giản chỉ với HTML và CSS cực nhẹ

Material Design Responsive Menu đơn giản chỉ với HTML và CSS cực nhẹ

Create Responsive Navigation Nenu

Đây là HTML
<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> 
Đây là CSS
* {
  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;
}
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 theo ý các bạn nhé! Chúc thành công!

Bài viết thuộc về Fostrap.

Đăng nhận xét

9 Nhận xét

» Hướng dẫn nhúng hình ảnh: chỉ cần sử dụng link ảnh dán vào, vd: http://domain.com/image.png
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow">Link</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. Xem thêm...

  1. Khá thú zị :v mà e thích menu kiểu apple store

    Trả lờiXóa
  2. em come rồi nè :P chắc vớt em menu này về thay quá

    Trả lờiXóa
  3. Xin phép được "bắt bẻ" bác 2 ý nhằm mục đích góp ý cùng phát triển. Material Design không phải là ngôn ngữ lập trình mà là ngôn ngữ thiết kế. Thứ 2, đây không phải "chỉ có html và css", mà nó còn có javascript, javascript lại sử dụng thư viện Jquery.

    Trả lờiXóa
Loading...