<fieldset id="ukuww"></fieldset>

<ul id="ukuww"></ul>

<tfoot id="ukuww"></tfoot>

自己動手寫一個側導航欄組件

xuxueli 發布于2019-08-30 14:03 / 1878人閱讀

摘要：側導航欄在移動端會隱藏，顯示一個觸發按鈕，點擊按鈕，打開側導航欄，再點擊關閉。

github倉庫地址：https://github.com/meidongwei...

在當前這個大移動時代，我們寫的網頁越來越注重手機端的適配，這得益于 CSS3 的媒體查詢，我也是在工作中有這樣的需求，要對移動端友好，理所當然，我就想到了響應式設計，今天說的這個側導航欄組件就是其中一角。

側導航欄在移動端會隱藏，顯示一個觸發按鈕，點擊按鈕，打開側導航欄，再點擊關閉。
其實這個效果實現起來很簡單，我們可以使用 css 控制側導航欄位置，讓它 left: -x(負值會將側導航藍控制在屏幕外), 然后點擊按鈕觸 left: x（讓它回到屏幕內），就是這么簡單～

這個 demo 是由 bootstrap 的樣式模版改變而來

html:

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");
    });
  });

根據這個思路，我們可以擴展這個組件，使組件可以從左側出來或者右側出來，或者上下，希望對大家有所幫助！

GPU云服務器云服務器自己動手寫爬蟲自己動手寫網路爬蟲自己動手寫網絡爬蟲自己動手寫開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115742.html

小程序自定義導航欄（適配所有手機）

摘要：背景在做小程序時，關于默認導航欄，我們遇到了以下的問題手機對于頁面的展示不一致，安卓的顯示不居中頁面的只支持純文本級別的樣式控制，不能夠做更豐富的效果左上角的事件無法監聽定制路由導航單一，只能夠返回上一頁，深層級頁面的返回不夠友好探索小程序背景在做小程序時，關于默認導航欄，我們遇到了以下的問題： Android、IOS手機對于頁面title的展示不一致，安卓title的顯示不居中...

jayzou 2019-08-30 15:44 評論0 收藏0
小程序自定義導航欄（適配所有手機）

摘要：背景在做小程序時，關于默認導航欄，我們遇到了以下的問題手機對于頁面的展示不一致，安卓的顯示不居中頁面的只支持純文本級別的樣式控制，不能夠做更豐富的效果左上角的事件無法監聽定制路由導航單一，只能夠返回上一頁，深層級頁面的返回不夠友好探索小程序背景在做小程序時，關于默認導航欄，我們遇到了以下的問題： Android、IOS手機對于頁面title的展示不一致，安卓title的顯示不居中...

Yu_Huang 2019-08-26 10:49 評論0 收藏0
認識一下 Material Design Lite 布局組件

摘要：布局組件需要按特定的結構進行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側欄菜單布局組件簡化了創建可伸縮頁面的過程。一、布局/Layout MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應不同的瀏覽器、屏幕尺寸和設備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

wanglu1209 2019-08-28 18:17 評論0 收藏0
認識一下 Material Design Lite 布局組件

摘要：布局組件需要按特定的結構進行聲明需要指出的是，在一個布局聲明中，等子元素不一定全部使用，比如你可以不要側欄菜單布局組件簡化了創建可伸縮頁面的過程。一、布局/Layout MDL的布局/Layout組件用來作為整個頁面其他元素的容器，可以自動適應不同的瀏覽器、屏幕尺寸和設備。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

MadPecker 2019-08-01 14:51 評論0 收藏0