自己动手写一个侧导航栏组件

xuxueli 发布于2019-08-30 14:03 / 1849人阅读

摘要：侧导航栏在移动端会隐藏，显示一个触发按钮，点击按钮，打开侧导航栏，再点击关闭。

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云服务器云服务器自己动手写爬虫自己动手写网路爬虫自己动手写网络爬虫自己动手写开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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