04/10/2018, 20:18

Tạo menu đa cấp phiên bản mobile với CSS3 và Javasript

Việc làm cho menu trở nên linh động và gọn gàng hơn khi hiển thị trên các thiết bị mobile là một trong những điều mà chúng ta cần phải làm để tạo giao diện web thân thiện với người dùng. Hôm nay , mình sẽ giới thiệu cho các bạn một mẫu menu đa cấp rất thích hợp tích hợp cho các giao diện mobile. ...

Việc làm cho menu trở nên linh động và gọn gàng hơn khi hiển thị trên các thiết bị mobile là một trong những điều mà chúng ta cần phải làm để tạo giao diện web thân thiện với người dùng. Hôm nay , mình sẽ giới thiệu cho các bạn một mẫu menu đa cấp rất thích hợp tích hợp cho các giao diện mobile. Menu này không những nhỏ gọn mà còn có những hiệu ứng đẹp mắt.

Tạo menu đa cấp phiên bản mobile với CSS3 và Javasript

>Xem Demo | Download

HTML

Đầu tiên, các bạn tạo menu theo khung chuẩn html như sau :

<div class="container">
  <div class="mp-pusher" id="mp-pusher">
     
    <nav id="mp-menu" class="mp-menu">
      <div class="mp-level">
        <h2 class="icon icon-world">All Categories <a href="#" class="close">×</a></h2>
        <ul>
          <li class="icon icon-arrow-left">
            <a class="icon icon-display" href="#">Devices</a>
            <div class="mp-level">
              <h2 class="icon icon-display">Devices</h2>
              <a class="mp-back" href="#">back</a>
              <ul>
                <li class="icon icon-arrow-left">
                  <a class="icon icon-phone" href="#">Mobile Phones</a>
                  <div class="mp-level">
                    <h2>Mobile Phones</h2>
                    <a class="mp-back" href="#">back</a>
                    <ul>
                      <li><a href="#">Super Smart Phone</a></li>
                      <li><a href="#">Thin Magic Mobile</a></li>
                      <li><a href="#">Performance Crusher</a></li>
                      <li><a href="#">Futuristic Experience</a></li>
                    </ul>
                  </div>
                </li>
                <li class="icon icon-arrow-left">
                  <a class="icon icon-tv" href="#">Televisions</a>
                  <div class="mp-level">
                    <h2>Televisions</h2>
                    <a class="mp-back" href="#">back</a>
                    <ul>
                      <li><a href="#">Flat Superscreen</a></li>
                      <li><a href="#">Gigantic LED</a></li>
                      <li><a href="#">Power Eater</a></li>
                      <li><a href="#">3D Experience</a></li>
                      <li><a href="#">Classic Comfort</a></li>
                    </ul>
                  </div>
                </li>
                <li class="icon icon-arrow-left">
                  <a class="icon icon-camera" href="#">Cameras</a>
                  <div class="mp-level">
                    <h2>Cameras</h2>
                    <a class="mp-back" href="#">back</a>
                    <ul>
                      <li><a href="#">Smart Shot</a></li>
                      <li><a href="#">Power Shooter</a></li>
                      <li><a href="#">Easy Photo Maker</a></li>
                      <li><a href="#">Super Pixel</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="icon icon-arrow-left">
            <a class="icon icon-news" href="#">Magazines</a>
            <div class="mp-level">
              <h2 class="icon icon-news">Magazines</h2>
              <a class="mp-back" href="#">back</a>
              <ul>
                <li><a href="#">National Geographic</a></li>
                <li><a href="#">Scientific American</a></li>
                <li><a href="#">The Spectator</a></li>
                <li><a href="#">The Rambler</a></li>
                <li><a href="#">Physics World</a></li>
                <li><a href="#">The New Scientist</a></li>
              </ul>
            </div>
          </li>
          <li class="icon icon-arrow-left">
            <a class="icon icon-shop" href="#">Store</a>
            <div class="mp-level">
              <h2 class="icon icon-shop">Store</h2>
              <a class="mp-back" href="#">back</a>
              <ul>
                <li class="icon icon-arrow-left">
                  <a class="icon icon-t-shirt" href="#">Clothes</a>
                  <div class="mp-level">
                    <h2 class="icon icon-t-shirt">Clothes</h2>
                    <a class="mp-back" href="#">back</a>
                    <ul>
                      <li class="icon icon-arrow-left">
                        <a class="icon icon-female" href="#">Women's Clothing</a>
                        <div class="mp-level">
                          <h2 class="icon icon-female">Women's Clothing</h2>
                          <a class="mp-back" href="#">back</a>
                          <ul>
                            <li><a href="#">Tops</a></li>
                            <li><a href="#">Dresses</a></li>
                            <li><a href="#">Trousers</a></li>
                            <li><a href="#">Shoes</a></li>
                            <li><a href="#">Sale</a></li>
                          </ul>
                        </div>
                      </li>
                      <li class="icon icon-arrow-left">
                        <a class="icon icon-male" href="#">Men's Clothing</a>
                        <div class="mp-level">
                          <h2 class="icon icon-male">Men's Clothing</h2>
                          <a class="mp-back" href="#">back</a>
                          <ul>
                            <li><a href="#">Shirts</a></li>
                            <li><a href="#">Trousers</a></li>
                            <li><a href="#">Shoes</a></li>
                            <li><a href="#">Sale</a></li>
                          </ul>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a class="icon icon-diamond" href="#">Jewelry</a>
                </li>
                <li>
                  <a class="icon icon-music" href="#">Music</a>
                </li>
                <li>
                  <a class="icon icon-food" href="#">Grocery</a>
                </li>
              </ul>
            </div>
          </li>
          <li><a class="icon icon-photo" href="#">Collections</a></li>
          <li><a class="icon icon-wallet" href="#">Credits</a></li>
        </ul>

      </div>
    </nav>
     
    <div class="scroller"> 
      <div class="scroller-inner">
        <h1><a href="#" id="trigger" class="menu-trigger">Open/Close Menu</a></h1>
      </div>
    </div>
  </div>
</div>

CSS

Sau đó các bạn định dạng menu với đoạn css sau :

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

.codrops-header,
.codrops-top {
  font-family: 'Lato', Arial, sans-serif;
}

.codrops-header {
  margin: 0 auto;
  padding: 2em;
  background: rgba(0, 0, 0, 0.01);
  text-align: center;
}

.codrops-header h1 {
  margin: 0;
  font-weight: 300;
  font-size: 2.625em;
  line-height: 1.3;
}

.codrops-header span {
  display: block;
  padding: 0 0 0.6em 0.1em;
  font-size: 60%;
  opacity: 0.7;
}

/* To Navigation Style */
.codrops-top {
  awidth: 100%;
  background: #91cfa1;
  background: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  font-size: 0.69em;
  line-height: 2.2;
}

.codrops-top a {
  display: inline-block;
  padding: 0 1em;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.1em;
}

.codrops-top a:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
}

.codrops-top span.right {
  float: right;
}

.codrops-top span.right a {
  display: block;
  float: left;
}

.codrops-icon:before {
  margin: 0 4px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
  content: "2039";
}

.codrops-icon-prev:before {
  content: "2039";
}

/* Demo Buttons Style */
.codrops-demos {
  padding-top: 1em;
  font-size: 1.1em;
}

.codrops-demos a {
  display: block;
  float: left;
  clear: both;
  margin: 0.5em 0.5em 0.5em 1.9em;
  padding: 1em 1.1em;
  awidth: 280px;
  outline: none;
  color: #fff;
  background: #336ca6;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
  opacity: 0.6;
}

.content {
  padding: 4em 2em;
  max-awidth: 1200px;
  margin: 0 auto;
}

.block {
  float: left;
  padding: 1em 3em;
}

.block-40 {
  awidth: 40%;
}

.block-60 {
  awidth: 60%;
}

.block p {
  margin: 0;
  padding: 0 1em 0.6em;
  font-size: 1.8em;
  line-height: 1.5;
}

.info {
  text-align: center;
  font-size: 1.5em;
  margin-top: 3em;
  clear: both;
  padding-top: 3em;
  color: rgba(255, 255, 255, 0.5);
}

.info a {
  font-weight: 700;
  font-size: 0.9em;
}

.info a:hover {
  color: #336ca6;
}

@media screen and (max-awidth: 69em) {
  .block {
    float: none;
    awidth: 100% !important;
    padding: 1em;
  }
}
@media screen and (max-awidth: 25em) {
  body {
    font-size: 80%;
  }

  .codrops-icon span {
    display: none;
  }
}
*,
*:after,
*::before {
  box-sizing: border-box;
}

html, body, .container, .scroller {
  height: 100%;
}

.scroller {
  overflow-y: scroll;
}

.scroller,
.scroller-inner {
  position: relative;
  text-align: center;
}

.container {
  position: relative;
  overflow: hidden;
  background: #34495e;
}

.menu-trigger {
  position: relative;
  padding-left: 60px;
  font-size: 0.9em;
}

.menu-trigger:before {
  position: absolute;
  top: 2px;
  left: 0;
  awidth: 40px;
  height: 6px;
  background: #fff;
  box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff;
  content: ';
}

.mp-pusher {
  position: relative;
  left: 0;
  height: 100%;
}

.mp-menu {
  position: absolute;
  /* we can't use fixed here             
Bài liên quan

Tạo menu đa cấp phiên bản mobile với CSS3 và Javasript

Việc làm cho menu trở nên linh động và gọn gàng hơn khi hiển thị trên các thiết bị mobile là một trong những điều mà chúng ta cần phải làm để tạo giao diện web thân thiện với người dùng. Hôm nay , mình sẽ giới thiệu cho các bạn một mẫu menu đa cấp rất thích hợp tích hợp cho các giao diện mobile. ...

Trịnh Tiến Mạnh viết 20:18 ngày 04/10/2018

Tạo menu đa cấp theo chiều ngang bằng CSS3 và jQuery

Việc sở hữu nhiễu mẫu menu khác nhau sẽ giúp ích cho các bạn trong việc thiết kế web/blog, nó giúp các bạn tăng thêm sự sáng tạo cũng như tạo sự khác biệt so với các trang web truyền thống khác. Mẫu menu mà mình chia sẻ trong bài viết này ,được lấy từ một trang web thiết kế nổi tiếng (blue print), ...

Trịnh Tiến Mạnh viết 20:07 ngày 04/10/2018

Tạo Menu theo phong cách Google Play với CSS3 và jQuery

Nếu bạn từng vào trang cửa hàng của Google Play , chắc hẳn là sẽ ấn tượng với menu từ trang web này. Nếu các bạn muốn áp đặt kiểu menu như thế vào trong web hay blog của mình, thì trong bài viết này, mình sẽ chia sẻ cho các bạn từng bước làm menu theo phong cách của trang Google Play với sự hỗ trợ ...

Trịnh Tiến Mạnh viết 19:59 ngày 04/10/2018

Tạo Dropdown Menu với menu đa cấp bằng CSS3

Ngày nay việc sử dụng menu thuần CSS đã trở nên rất phổ biến, hầu hết là cá menu dạng UL – LI. Hôm nay mình tiếp tục giới thiệu cho các bạn một menu đẹp nữa, đây là menu dạng dropdown đa cấp, các submenu sẽ xuất hiện khi bạn click chuột (onclick) chứ không phải khi trỏ chuột tới (onhover). Đây ...

Trần Trung Dũng viết 19:59 ngày 04/10/2018

Tạo menu đa cấp dropdown cực cool bằng CSS3

Trong những năm gần đây, các menu web được tạo từ css đã trở nên ngày một phổ biến. Hầu hết bất cứ website nào cũng đều có menu chuyển hướng riêng, và hôm nay mình sẽ giới thiệu thêm cho các bạn một menu đa cấp dưới dạng dropdown với hiệu ứng cực cool được làm từ CSS3 sẽ giúp bạn có thêm sự lựa ...

Trịnh Tiến Mạnh viết 19:59 ngày 04/10/2018
0