技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類(lèi)目錄

贊助商

最新文章

搜索

一款精致好看的移動(dòng)網(wǎng)頁(yè)可上下伸縮的CSS3導(dǎo)航菜單

作者:admin    時(shí)間:2023-6-16 16:26:52    瀏覽:

這款移動(dòng)網(wǎng)頁(yè)導(dǎo)航菜單因?yàn)樽龅煤芫潞每矗晕铱吹胶缶推炔淮暗厥詹夭⒎窒沓鰜?lái)了。

效果圖

 一款精致好看的移動(dòng)網(wǎng)頁(yè)可上下伸縮的CSS3導(dǎo)航菜單

demodownload

示例介紹

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

當(dāng)點(diǎn)擊任一菜單項(xiàng)目時(shí),導(dǎo)航欄縮進(jìn)漢堡菜單圖標(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>首頁(yè)</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>公司動(dòng)態(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)外層是一個(gè)nav標(biāo)簽,內(nèi)層是一個(gè)ul容器,li列舉是菜單項(xiàng)目。nav標(biāo)簽的class屬性值是cd-stretchy-nav

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

<span aria-hidden="true" class="stretchy-nav-bg"></span> 是展開(kāi)后的導(dǎo)航菜單背景,請(qǐng)看后面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;
}

cd-stretchy-nav定義導(dǎo)航菜單的區(qū)域大小

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 偽元素, 共同畫(huà)出三條橫杠。

.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;
}

span標(biāo)簽css使用:before和:after偽元素共同畫(huà)出三條橫杠 

ulli 元素,是導(dǎo)航菜單的容器和項(xiàng)目列舉,它們的CSS設(shè)計(jì)為:

.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;
}

ul 和 li 元素,它們是導(dǎo)航菜單的容器和項(xiàng)目列舉 

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

.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;
}

 是導(dǎo)航菜單的背景,上下設(shè)計(jì)為圓角

JavaScript

本示例使用了jQuery編程,因此要首先引用jQuery庫(kù)文件。

jQuery編程主要是實(shí)現(xiàn)漢堡菜單的onclick(點(diǎn)擊)效果,以及頁(yè)面的onclick(點(diǎn)擊)事件——縮進(jìn)菜單。

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

<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ì)介紹了一款精致好看的移動(dòng)網(wǎng)頁(yè)可上下伸縮的CSS3導(dǎo)航菜單,喜歡的朋友可以收藏本頁(yè),或者直接下載源碼備用。

相關(guān)文章

x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */