卡卡網(wǎng)

這款移動網(wǎng)頁導(dǎo)航菜單因為做得很精致好看，所以我看到后就迫不待及地收藏并分享出來了。

效果圖

demodownload

示例介紹

漢堡菜單底色是一個實心圓，固定在容器右上角，當(dāng)鼠標(biāo)點擊它時，導(dǎo)航菜單向下滑出，這是漢堡菜單圖標(biāo)轉(zhuǎn)變成叉圖標(biāo)。

當(dāng)點擊任一菜單項目時，導(dǎo)航欄縮進漢堡菜單圖標(biāo)里。

HTML

<nav class="cd-stretchy-nav">
    <a class="cd-nav-trigger" href="#0"> Menu <span aria-hidden="true"></span></a>
    <ul>
        <li><a href="#0" class="active"><span>首頁</span></a></li>
        <li><a href="#0"><span>產(chǎn)品展示</span></a></li>
        <li><a href="#0"><span>服務(wù)中心</span></a></li>
        <li><a href="#0"><span>公司動態(tài)</span></a></li>
        <li><a href="#0"><span>關(guān)于我們</span></a></li>
    </ul>
    <span aria-hidden="true" class="stretchy-nav-bg"></span>
</nav>

HTML結(jié)構(gòu)外層是一個nav標(biāo)簽，內(nèi)層是一個ul容器，li列舉是菜單項目。nav標(biāo)簽的class屬性值是cd-stretchy-nav。

<span aria-hidden="true"></span> 是三條橫杠的標(biāo)簽，實現(xiàn)方法看后面CSS介紹。

<span aria-hidden="true" class="stretchy-nav-bg"></span> 是展開后的導(dǎo)航菜單背景，請看后面CSS介紹。

CSS

HTML代碼里nav標(biāo)簽的class屬性值cd-stretchy-nav是定義導(dǎo)航菜單的區(qū)域位置、大小、顯示方式等樣式。

.cd-stretchy-nav {
  position: fixed;
  z-index: 2;
  top: 40px;
  right: 5%;
}
nav {
  display: block;
}
nav {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

a.cd-nav-trigger 是漢堡圓形菜單的樣式設(shè)置。

.cd-nav-trigger {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
a {
  color: #9acd91;
  text-decoration: none;
}
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html代碼 <span aria-hidden="true"></span> 的span標(biāo)簽的css使用了 :before 和 :after 偽元素， 共同畫出三條橫杠。

.cd-nav-trigger span::after {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.cd-nav-trigger span::after, .cd-nav-trigger span::before {
  content: '';
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.cd-nav-trigger span::before {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger span {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.cd-nav-trigger span, .cd-nav-trigger span::after, .cd-nav-trigger span::before {
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: #ffffff;
}
span {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
*, ::after, ::before {
  box-sizing: border-box;
}

ul 和 li 元素，是導(dǎo)航菜單的容器和項目列舉，它們的CSS設(shè)計為：

.cd-stretchy-nav.nav-is-visible ul {
  visibility: visible;
}
.cd-stretchy-nav ul {
  position: relative;
  z-index: 2;
  padding: 60px 0 0;
  visibility: hidden;
  -webkit-transition: visibility 0.3s;
  -moz-transition: visibility 0.3s;
  transition: visibility 0.3s;
  text-align: right;
}
ol, ul {
  list-style: none;
}
ul, li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

<span aria-hidden="true" class="stretchy-nav-bg"></span> 是導(dǎo)航菜單的背景，上下設(shè)計為圓角，其CSS設(shè)計為：

.stretchy-nav-bg {
  height: 100%;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}
.stretchy-nav-bg {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: #9acd91;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: height 0.2s, box-shadow 0.2s;
  -moz-transition: height 0.2s, box-shadow 0.2s;
  transition: height 0.2s, box-shadow 0.2s;
}
span {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

JavaScript

本示例使用了jQuery編程，因此要首先引用jQuery庫文件。

jQuery編程主要是實現(xiàn)漢堡菜單的onclick（點擊）效果，以及頁面的onclick（點擊）事件——縮進菜單。

另外引用一個 modernizr.js 的插件，它的作用是使菜單具有鼠標(biāo)懸停的效果，令整個導(dǎo)航交互操作更有活力，大大增強了用戶的使用體驗。

<script src="resources/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
  if ($(".cd-stretchy-nav").length > 0)
  {
    var a = $(".cd-stretchy-nav");
    a.each(function()
    {
      var b = $(this),
      c = b.find(".cd-nav-trigger");
      c.on("click", function(d)
      {
        d.preventDefault();
        b.toggleClass("nav-is-visible")
      })
    });
    $(document).on("click", function(b)
    {
      (!$(b.target).is(".cd-nav-trigger") && !$(b.target).is(".cd-nav-trigger span")) && a.removeClass("nav-is-visible")
    })
  }
});
</script>
<script src="resources/modernizr.js"></script>

總結(jié)

本文詳細(xì)介紹了一款精致好看的移動網(wǎng)頁可上下伸縮的CSS3導(dǎo)航菜單，喜歡的朋友可以收藏本頁，或者直接下載源碼備用。

相關(guān)文章

• 3款純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變叉動畫
• 純CSS3實現(xiàn)漢堡(三橫杠)菜單點擊變?yōu)椴?X)關(guān)閉圖標(biāo)
• 純CSS3實現(xiàn)的漢堡(三條橫杠)菜單，點擊變叉
• 純CSS+svg實現(xiàn)三條橫線點擊變叉菜單按鈕動畫
• jQuery黑色左側(cè)邊導(dǎo)航菜單(可折疊可縮進滑出)
• layui框架實現(xiàn)的可折疊側(cè)欄導(dǎo)航菜單（適合信息管理系統(tǒng)）
• 非常受歡迎好看的CSS3水平導(dǎo)航菜單(含二級菜單)
• 一款簡易的CSS3側(cè)欄滑動導(dǎo)航菜單
• 很漂亮的 Bootstrap 3 側(cè)欄滑動導(dǎo)航菜單【演示/源碼下載】
• 一款漂亮的CSS3藍(lán)色垂直導(dǎo)航菜單

• 二級菜單水平方向排列的CSS3響應(yīng)式水平導(dǎo)航菜單
• 含二級下拉菜單的CSS3響應(yīng)式水平導(dǎo)航菜單
• CSS3 PC/移動響應(yīng)式網(wǎng)頁水平導(dǎo)航菜單
• CSS3折疊下拉菜單（深色背景）【演示/源碼下載】
• 常見的簡單大方的純CSS3水平下拉導(dǎo)航菜單
• CSS+JS實現(xiàn)可伸縮可折疊的左邊側(cè)欄項目導(dǎo)航菜單
• CSS實現(xiàn)樣式新穎有特色又好看的下拉菜單
• #純CSS實現(xiàn)#網(wǎng)頁返回頂部按鈕設(shè)計【演示/源碼】
• 具有滑動效果的純CSS菜單[演示/源碼]
• 純CSS大氣通用移動網(wǎng)頁導(dǎo)航菜單【演示/源碼下載】

標(biāo)簽: 菜單  移動導(dǎo)航菜單  導(dǎo)航菜單  css3