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