資訊專欄INFORMATION COLUMN
摘要：側(cè)導(dǎo)航欄在移動(dòng)端會(huì)隱藏，顯示一個(gè)觸發(fā)按鈕，點(diǎn)擊按鈕，打開側(cè)導(dǎo)航欄，再點(diǎn)擊關(guān)閉。
github倉庫地址：https://github.com/meidongwei...
在當(dāng)前這個(gè)大移動(dòng)時(shí)代，我們寫的網(wǎng)頁越來越注重手機(jī)端的適配，這得益于 CSS3 的媒體查詢，我也是在工作中有這樣的需求，要對(duì)移動(dòng)端友好，理所當(dāng)然，我就想到了響應(yīng)式設(shè)計(jì)，今天說的這個(gè)側(cè)導(dǎo)航欄組件就是其中一角。
側(cè)導(dǎo)航欄在移動(dòng)端會(huì)隱藏，顯示一個(gè)觸發(fā)按鈕，點(diǎn)擊按鈕，打開側(cè)導(dǎo)航欄，再點(diǎn)擊關(guān)閉。
其實(shí)這個(gè)效果實(shí)現(xiàn)起來很簡(jiǎn)單，我們可以使用 css 控制側(cè)導(dǎo)航欄位置，讓它 left: -x(負(fù)值會(huì)將側(cè)導(dǎo)航藍(lán)控制在屏幕外), 然后點(diǎn)擊按鈕觸 left: x（讓它回到屏幕內(nèi)），就是這么簡(jiǎn)單～
這個(gè) demo 是由 bootstrap 的樣式模版改變而來
html:
主要內(nèi)容
css:
.row-offcanvas,
{
position: relative;
transition: all .25s ease-out;
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
left: -50%;
}
.row-offcanvas.active {
left: 50%;
}
js:(js使用了jQuery來簡(jiǎn)化代碼)
$(document).ready(function () {
$("[data-toggle="offcanvas"]").click(function () {
$(".sidebar-offcanvas").toggleClass("active");
});
});
根據(jù)這個(gè)思路，我們可以擴(kuò)展這個(gè)組件，使組件可以從左側(cè)出來或者右側(cè)出來，或者上下，希望對(duì)大家有所幫助！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/115742.html
摘要：背景在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題手機(jī)對(duì)于頁面的展示不一致，安卓的顯示不居中頁面的只支持純文本級(jí)別的樣式控制，不能夠做更豐富的效果左上角的事件無法監(jiān)聽定制路由導(dǎo)航單一，只能夠返回上一頁，深層級(jí)頁面的返回不夠友好探索小程序 背景 在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題： Android、IOS手機(jī)對(duì)于頁面title的展示不一致，安卓title的顯示不居中...
摘要：背景在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題手機(jī)對(duì)于頁面的展示不一致，安卓的顯示不居中頁面的只支持純文本級(jí)別的樣式控制，不能夠做更豐富的效果左上角的事件無法監(jiān)聽定制路由導(dǎo)航單一，只能夠返回上一頁，深層級(jí)頁面的返回不夠友好探索小程序 背景 在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問題： Android、IOS手機(jī)對(duì)于頁面title的展示不一致，安卓title的顯示不居中...
摘要：布局組件需要按特定的結(jié)構(gòu)進(jìn)行聲明需要指出的是，在一個(gè)布局聲明中，等子元素不一定全部使用，比如你可以不要側(cè)欄菜單布局組件簡(jiǎn)化了創(chuàng)建可伸縮頁面的過程。 一、布局/Layout MDL的布局/Layout組件用來作為整個(gè)頁面其他元素的容器，可以自動(dòng)適應(yīng)不同的瀏覽器、 屏幕尺寸和設(shè)備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...
摘要：布局組件需要按特定的結(jié)構(gòu)進(jìn)行聲明需要指出的是，在一個(gè)布局聲明中，等子元素不一定全部使用，比如你可以不要側(cè)欄菜單布局組件簡(jiǎn)化了創(chuàng)建可伸縮頁面的過程。 一、布局/Layout MDL的布局/Layout組件用來作為整個(gè)頁面其他元素的容器，可以自動(dòng)適應(yīng)不同的瀏覽器、 屏幕尺寸和設(shè)備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...
閱讀 1363·2023-04-25 23:22
閱讀 1761·2023-04-25 20:04
閱讀 2698·2021-11-22 15:24
閱讀 2883·2021-11-11 16:54
閱讀 1948·2019-08-30 14:03
閱讀 1547·2019-08-29 16:35
閱讀 1763·2019-08-26 10:29
閱讀 2813·2019-08-23 18:01
