成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

自己動手寫一個側(cè)導(dǎo)航欄組件

xuxueli / 1893人閱讀

摘要：側(cè)導(dǎo)航欄在移動端會隱藏，顯示一個觸發(fā)按鈕，點(diǎn)擊按鈕，打開側(cè)導(dǎo)航欄，再點(diǎn)擊關(guān)閉。

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

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

側(cè)導(dǎo)航欄在移動端會隱藏，顯示一個觸發(fā)按鈕，點(diǎn)擊按鈕，打開側(cè)導(dǎo)航欄，再點(diǎn)擊關(guān)閉。
其實(shí)這個效果實(shí)現(xiàn)起來很簡單，我們可以使用 css 控制側(cè)導(dǎo)航欄位置，讓它 left: -x(負(fù)值會將側(cè)導(dǎo)航藍(lán)控制在屏幕外), 然后點(diǎn)擊按鈕觸 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ù)這個思路，我們可以擴(kuò)展這個組件，使組件可以從左側(cè)出來或者右側(cè)出來，或者上下，希望對大家有所幫助！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115742.html

相關(guān)文章

  • 小程序自定義導(dǎo)航欄（適配所有手機(jī)）

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

    jayzou 評論0 收藏0

  • 小程序自定義導(dǎo)航欄（適配所有手機(jī)）

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

    Yu_Huang 評論0 收藏0

  • 認(rèn)識一下 Material Design Lite 布局組件

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

    wanglu1209 評論0 收藏0

  • 認(rèn)識一下 Material Design Lite 布局組件

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

    MadPecker 評論0 收藏0

發(fā)表評論

0條評論

xuxueli

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<