卡卡網(wǎng)

一個好的菜單設(shè)計，會給用戶好的觀感體驗，更能吸引用戶，因此很多網(wǎng)頁設(shè)計師都會在菜單設(shè)計上下一番功夫。本文介紹一款常見實用的移動網(wǎng)頁(二級)菜單設(shè)計，個人覺得使用起來非常順暢。

demodownload

HTML

<div class="screen">
  <nav>
    <div class="toggle"><span>Menu</span></div>
    <div class="menu-container">
      <ul class="menu visually-hidden">
        <li><a href="#">uno</a></li>
        <li class="has-children"><a href="#">dos<span>more</span></a>
          <ul class="submenu">
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
          </ul>
        </li>
        <li><a href="#">tres</a></li>
        <li><a href="#">cuatro</a></li>
        <li class="has-children"><a href="#">cinco<span>more</span></a>
          <ul class="submenu">
            <li><a href="#">four</a></li>
            <li><a href="#">five</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

菜單盒子使用一個class值為screen的div，該div次級子標簽是一個nav標簽，nav標簽里第一個子元素是div標簽，該標簽的class值是toggle，其內(nèi)容是文字“Menu”，這是一個按鈕，點擊它可打開或關(guān)閉菜單。

nav標簽里第二個子元素是一個div，該div的class值是menu-container，它里面第一個UL容器是主菜單容器，其class值是menu visually-hidden，li標簽是菜單內(nèi)容。li標簽內(nèi)含的UL是子菜單容器，其class值是submenu。子菜單容器UL的父元素li的class值是has-children。

JS

本實例用到了JQuery編程，所以需要引用JQuery庫文件（該文件包含在下載壓縮包里），該庫文件可以加載本地也可以是引用第三方如百度CDN的JQuery庫文件。

<script src='jquery-3.2.1.min.js'></script>

// Toggle menu
toggle.on("click", function () {
  nav.toggleClass('is-visible');
  if (menu.hasClass('visually-hidden')) {
    menu.toggleClass('visually-hidden is-visible');
  } else {
    menu.removeClass('is-visible');
    // Wait for CSS animation
    setTimeout(function () {
      nav.removeClass('view-submenu');
      menu.addClass('visually-hidden');
    }, 200);
  }
});

toggle.on("click", ...是菜單圖標的點擊動作，關(guān)閉或打開菜單。

// Add submenu hide bar
subHide.prependTo(subMenu);
var subHideToggle = $('.hide-submenu');

// Show submenu
subToggle.on("click", function () {
  nav.addClass('view-submenu');
  // Hide all the submenus...
  subMenu.hide();
  // ...except for the one being called
  $(this).parents('li').find('.submenu').show();
});
// Hide submenu
subHideToggle.on("click", function () {
  nav.removeClass('view-submenu');
});

subToggle.on("click",...是次級菜單的點擊動作，打開或關(guān)閉子菜單。

CSS

.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 320px;
  height: 568px;
  background-color: #ededed;
  overflow: hidden;
}
@media (max-height: 568px) {
  .screen {
    top: 24px;
    bottom: auto;
  }
}
@media (max-width: 400px) {
  .screen {
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}
nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #242424;
  transform: translate3d(0, 0, 0);
}

這是菜單盒子的樣式設(shè)計，設(shè)置整個菜單區(qū)域的大小、高、寬、位置等。

.menu-container {
  position: relative;
  transform: translateX(0);
  transition: transform 0.25s ease-out;
}
.view-submenu .menu-container {
  transform: translateX(-100%);
}

這是設(shè)置主菜單打開的過渡效果，使用了漸顯的樣式transition: transform 0.25s ease-out;。

ul {
  position: absolute;
  top: 60px;
  padding: 6px;
  width: 100%;
  height: 508px;
  color: #ededed;
  background-color: #313131;
}
ul li a {
  opacity: 0;
  display: block;
  padding: 10px 12px;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: white;
  border-radius: 3px;
  transform: translateY(12px);
  transition: opacity 0.15s 0.1s ease-out, transform 0.15s 0.1s ease-out;
}
ul li.has-children span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 12px 16px;
  text-indent: -9999px;
}
ul li.has-children span:after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 0px;
  height: 0px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  transform: rotate(-45deg);
}
ul li.has-children span:hover:after {
  border-color: #bababa;
}

這是菜單容器的樣式設(shè)計，背景、邊框、邊距、文字等樣式的設(shè)計。

.menu {
  opacity: 0;
  transition: background-color 0.25s ease-out, opacity 0.15s ease-out;
}
.menu.is-visible {
  opacity: 1;
}
.menu.is-visible li a {
  opacity: 1;
  transform: translateY(0);
}
.view-submenu .menu {
  background-color: #3e3e3e;
}
.view-submenu .menu > li > a {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

這是主菜單的樣式設(shè)計，背景顏色、過度效果等。

.submenu {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #313131;
}
.submenu li {
  margin-left: 60px;
}

.hide-submenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 508px;
  cursor: pointer;
  background-color: #313131;
  transition: background-color 0.25s ease-out;
}
.hide-submenu:before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
  padding: 4px;
  width: 6px;
  height: 6px;
  cursor: pointer;
  font-size: 0;
  border-bottom: 2px solid #ededed;
  border-right: 2px solid #ededed;
  transform: rotate(135deg);
  left: 0;
  right: -6px;
  transition: opacity 0.1s ease-out;
}
.view-submenu .hide-submenu {
  background-color: #3e3e3e;
}
.view-submenu .hide-submenu:before {
  opacity: 1;
  transition: opacity 0.15s 0.3s ease-out;
}

這是子菜單的樣式設(shè)計，位置、高、寬、背景顏色等樣式的設(shè)置。

.toggle {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  left: 18px;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}
.toggle span {
  position: relative;
  align-self: center;
  font-size: 0;
  width: 26px;
  height: 2px;
  background-color: #ededed;
  border-radius: 100px;
  transition: background-color 0.2s ease-out;
}
.toggle span:before, .toggle span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  border-radius: 100px;
  transition: transform 0.2s ease-out;
}
.toggle span:before {
  bottom: calc(100% + 6px);
}
.toggle span:after {
  top: calc(100% + 6px);
}
.is-visible .toggle span {
  background-color: transparent;
}
.is-visible .toggle span:before {
  bottom: auto;
  transform: rotate(45deg);
}
.is-visible .toggle span:after {
  top: auto;
  transform: rotate(-45deg);
}

這是菜單按鈕的樣式設(shè)計，打開、關(guān)閉、過度效果等樣式的設(shè)置。

總結(jié)

本文介紹了一個移動網(wǎng)頁(二級)菜單設(shè)計，這個設(shè)計很常見，在很多網(wǎng)站都能看到，是一個簡單大方操作方便的設(shè)計。

您可能對以下文章也感興趣

• 非常漂亮的響應式導航欄設(shè)計
• 簡單實用的響應式導航菜單設(shè)計
• CSS3實現(xiàn)的可縮進的側(cè)欄導航菜單
• 漂亮的純CSS3水平導航菜單（有過渡動畫效果）
• 可以展開和閉合子菜單的CSS3垂直導航菜單
• 又一個隨內(nèi)容滾動而變化的側(cè)邊/左側(cè)目錄導航
• 側(cè)邊/左側(cè)目錄導航隨內(nèi)容滾動而變化
• 純CSS：非常漂亮的左側(cè)導航/內(nèi)容目錄導航
• 簡單卻實用的CSS水平和垂直導航欄【演示/源碼】
• CSS3+JQuery實現(xiàn)的三級下拉導航菜單

標簽: 菜單