Foundation 滑动导航(Off-Canvas)1

简介: Foundation 的 Off-Canvas 滑动导航是一种流行的移动页面设计,通过点击菜单按钮,侧边栏从左侧滑出。示例包括标题、链接和内容。

Foundation 滑动导航(Off-Canvas)
侧边栏导航
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了 (点击菜单按钮菜单从左侧滑出):

创建滑动导航
创建滑动导航实例如下:

实例







  <section class="middle tab-bar-section">
    <h1 class="title">Off-canvas Example</h1>
  </section>
</nav>

<!-- 滑动菜单 -->
<aside class="left-off-canvas-menu">
  <!-- Add links or other stuff here -->
  <ul class="off-canvas-list test">
    <li><label>Heading</label></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    ...
  </ul>
</aside>

<!-- 主要内容 -->
<section class="main-section">
  <h3>Lorem Ipsum</h3>
  <p>....</p>
</section>

<!-- 关闭菜单 -->
<a class="exit-off-canvas"></a>


相关文章
|
23天前
Foundation 滑动导航(Off-Canvas)1
Foundation框架的Off-Canvas滑动导航是一种流行的移动端页面设计,通过点击菜单按钮从左侧滑出菜单。示例如下:包含标题、链接1、链接2等。
|
7月前
|
XML Java Android开发
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
Android App手势冲突处理中上下左右滑动的处理以及侧滑边缘菜单的讲解及实战(附源码 可直接使用)
503 0
|
iOS开发
拖动手势UIPanGestureRecognizer
拖动手势UIPanGestureRecognizer
334 0
拖动手势UIPanGestureRecognizer
|
移动开发 前端开发 JavaScript
Canvas之鼠标滑动特效
Canvas之鼠标滑动特效
241 0
Canvas之鼠标滑动特效
|
存储 前端开发 JavaScript
教程—炫目的Off-Canvas滑动导航
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了,本文就将讨论如何通过 jQuery 增添、删除类来操作 CSS 过渡和动画完成这样的效果。
557 0
教程—炫目的Off-Canvas滑动导航
|
前端开发
[译] 用 Flutter 打造一个圆形滑块(Slider)
大多数情况下你并不会需要它。但想象一下:如果你想要用户选定一个时间段,或者只是想要一个比直线形状更有趣一点的常规滑块的场景时,就可以使用圆形滑块。
2544 0
|
UED
uwp - 做一个相对炫酷的动画按钮/按钮动画
原文:uwp - 做一个相对炫酷的动画按钮/按钮动画   看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验。效果图: 动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是。
1105 0
|
Android开发
Android 自定义控件之SlidingMenuVertical顶部悬浮(垂直折叠抽屉,有滑动渐变回调,可自行添加渐变动画)
顶部悬浮(垂直折叠抽屉,有滑动渐变回调,可自行添加渐变动画)
2073 0
|
C#
WPF Touch操作滚动条,Window弹跳
原文:WPF Touch操作滚动条,Window弹跳 WPF,用ScrollViewer控件,触屏开发,当滑动到最后时会使整个窗体弹跳一下 原因是因为ScrollViewer触屏操作原生支持惯性,ScrollViewer中的内容滚动到边界是会自动触发Window Bounce(窗体弹跳), 以叫做Panning Feedback(拖动回馈)。
1176 0