使用jquery+CSS3實(shí)現(xiàn)仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效
更新時(shí)間：2015年09月24日 14:52:51 投稿：mrr
本文是基于jquery和css3實(shí)現(xiàn)的仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效，代碼超簡(jiǎn)單，感興趣的朋友一起看看吧
這是一款仿windows10開(kāi)始菜單的下拉導(dǎo)航菜單特效。該下拉菜單使用jQuery和CSS3來(lái)完成類似windows10開(kāi)始菜單樣式效果，它的代碼簡(jiǎn)潔，效果非常時(shí)尚。
該下拉菜單的HTML結(jié)構(gòu)非常簡(jiǎn)單，基本的HTML結(jié)構(gòu)如下：
<div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button> </div> <div class="navbox"> <div class="navbox-tiles"> <a href="#" class="tile"> <div class="icon"><i class="fa fa-home"></i></div><span class="title">Home</span> </a> ...... </div> </div> </div>
CSS樣式
在CSS樣式中，頂部導(dǎo)航條.top-bar設(shè)置為固定高度50像素和相對(duì)定位，并給出一個(gè)較高的z-index值。
.top-bar {
height: 50px;
position: relative;
z-index: 1000;
}
下拉菜單.navbox開(kāi)始的時(shí)候是隱藏的，它采用絕對(duì)定位，通過(guò)translateY方法將它移動(dòng)到導(dǎo)航條上方200像素的地方。
.top-bar .navbox {
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
-webkit-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all .2s;
transition: all .2s;
}
接著在下拉菜單被激活的時(shí)候，它的透明度被設(shè)置回1，變?yōu)榭梢?jiàn)狀態(tài)，并通過(guò)translateY方法將它移動(dòng)回原來(lái)的位置。
.top-bar.navbox-open .navbox {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity .3s, -webkit-transform .3s;
transition: opacity .3s, transform .3s;
}
JavaScript
該特效中使用jQUery切換相應(yīng)的class類和用于打開(kāi)菜單按鈕。
(function () {
$(document).ready(function () {
$('#navbox-trigger').click(function () {
return $('#top-bar').toggleClass('navbox-open');
});
return $(document).on('click', function (e) {
var $target;
$target = $(e.target);
if (!$target.closest('.navbox').length && !$target.closest('#navbox-trigger').length) {
return $('#top-bar').removeClass('navbox-open');
}
});
});
}.call(this));
您可能感興趣的文章:
- CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- 各式各樣的導(dǎo)航條效果css3結(jié)合jquery代碼實(shí)現(xiàn)
- jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解
- jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
- 7款風(fēng)格新穎的jQuery/CSS3菜單導(dǎo)航分享
- jquery+css3實(shí)現(xiàn)熊貓tv導(dǎo)航代碼分享
相關(guān)文章
基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作的相關(guān)資料，利用jquery實(shí)現(xiàn)了對(duì)一個(gè)表單字段格式的即時(shí)檢查，感興趣的小伙伴們可以參考一下2016-05-05
判斷某元素是否具備指定的樣式的方法有很多，在接下來(lái)的文章中為大家介紹下jquery是如何做到的2013-11-11
jQuery實(shí)現(xiàn)復(fù)選框的全選和反選
本文主要分享了使用jQuery實(shí)現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
這篇文章主要介紹了詳解ECharts使用心得總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
每次滾動(dòng)的長(zhǎng)度不要固定死，可以直接獲取圖片寬度作為滾動(dòng)的長(zhǎng)度。這樣當(dāng)你的網(wǎng)站有很多地方需要這個(gè)效果的時(shí)候一個(gè)函數(shù)就可以搞定了2011-12-12
jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十）事件系統(tǒng)之主動(dòng)觸發(fā)事件和模擬冒泡處理的相關(guān)資料,需要的朋友可以參考下2015-11-11
jQuery操作listbox原理并不難，就是將listbox中的選中項(xiàng)進(jìn)行移動(dòng)，實(shí)現(xiàn)我們需要的移動(dòng)效果，具體實(shí)例如下，感興趣的朋友可以學(xué)習(xí)下2013-05-05
jQuery 拖動(dòng)層(在可視區(qū)域范圍內(nèi))
獲取層元素，在瀏覽器可視區(qū)域的最左、最邊，最上、最下的值。并且在拖動(dòng)層的過(guò)程中，把當(dāng)前層的坐標(biāo)值，去和這幾個(gè)值，做比較，如果超過(guò)這些值。那么就不能再拖動(dòng)這個(gè)方向，即把值設(shè)為最小或最大2012-05-05
jQuery Migrate 1.1.0 Released 注意事項(xiàng)
jQuery開(kāi)發(fā)團(tuán)隊(duì)前一段時(shí)間發(fā)布了jQuery 1.9版本，刪除了1.8版本中的部分API，為了使前端開(kāi)發(fā)者能夠順利遷移至該版本，該團(tuán)隊(duì)還發(fā)布了遷移插件jQuery Migrate2014-06-06
這篇文章主要介紹了jQuery如何計(jì)算iframe窗口大小,需要的朋友可以參考下2014-05-05