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. Menu này không những nhỏ gọn mà còn có những hiệu ứng đẹp mắt.

>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