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>


相关文章
Foundation 滑动导航(Off-Canvas)1
Foundation框架的Off-Canvas滑动导航是一种流行的移动端页面设计,通过点击菜单按钮从左侧滑出菜单。示例如下:包含标题、链接1、链接2等。
Material Design 实战 之第四弹 —— 卡片布局以及灵动的标题栏(CardView & AppBarLayout)
Material Design 实战 之第四弹 —— 卡片布局以及灵动的标题栏(CardView & AppBarLayout)
|
前端开发 vr&ar 图形学
UGUI系列-UI菜单列表,滑动展示UI(Unity3D)
物体或者UI的在平面上的旋转展示的代码实现,这个功能也是用的比较多的模块,可以将这个代码做成模板,在以后的项目中都会用到。
UGUI系列-Dropdown控件研究(Unity3D)
Dropdown下拉列表,控件还是很强大的,做UI的时候用的比较多,现在就将Dropdown使用中的一些经验总结起来,分享给大家了
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity UGUI组件Scroll View禁止 左右 或 上下 滑动
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。 也可以简单把 Unity 理解为一个游戏引擎,可以用来专业制作游戏!
【Unity3D 灵巧小知识点】☀️ | Unity UGUI组件Scroll View禁止 左右 或 上下 滑动
|
存储 前端开发 JavaScript
教程—炫目的Off-Canvas滑动导航
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了,本文就将讨论如何通过 jQuery 增添、删除类来操作 CSS 过渡和动画完成这样的效果。
588 0
教程—炫目的Off-Canvas滑动导航
Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
原文:Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)   在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown、MouseLeftButtonUp和MouseMove)来完成,实际应用中我们可以通过行为(Behavior)特性将拖放操作封装为行为,这样可达到代码复用的效果。
1087 0
|
UED
Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
原文:Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)   Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控制对象在多个不同的视觉状态之间切换、导航。
810 0
|
C# Shell 缓存
从PRISM开始学WPF(八)导航Navigation?
原文:从PRISM开始学WPF(八)导航Navigation? 0x6Navigation Basic Navigation Prism中的Navigation提供了一种类似导航的功能,他可以根据用户的输入,来刷新UI。
1531 0
|
前端开发 C#
MVVMLight 实现指定Frame控件的导航
原文:MVVMLight 实现指定Frame控件的导航 在UWP开发中,利用汉堡菜单实现导航是常见的方法。汉堡菜单导航一般都需要新建一个Frame控件,并对其进行导航,但是在MvvmLight框架默认的NavigationService中,只能对根Frame进行导航,这就需要我们实现自己的NavigationService了。
1591 0