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>


相关文章
|
6月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
676 0
|
15小时前
Foundation 滑动导航(Off-Canvas)1
Foundation框架的Off-Canvas滑动导航是一种流行的移动端页面设计,通过点击菜单按钮从左侧滑出菜单。示例如下:包含标题、链接1、链接2等。
|
5月前
|
存储
Qt无边框窗口可拖动
Qt无边框窗口可拖动
|
Web App开发 JavaScript 前端开发
Element-ui 滚动条美化
有时候为了使界面滚动条,各个浏览器的滚动条能保持一致,这样我们的项目避免在各个浏览器存在差异导致UI界面的不一致,这时候我们就可以考虑使用通用组件的方式,对各个需要滚动的页面,或者弹出窗口添加统一的组件进行包裹,来保证滚动效果在各个浏览器中能有更好的体验效果。最后我们看到各个浏览器中滚动条的效果,基本上各个浏览器的表现效果是一致的,添加通用组件,默认情况下滚动条是不显示的,只有鼠标移动过去才会进行显示,整体上效果和用户体验会更好。在源码顶部,看到有一个链接地址,是参考另一个插件的实现,如下所示。
Element-ui 滚动条美化
|
iOS开发
拖动手势UIPanGestureRecognizer
拖动手势UIPanGestureRecognizer
330 0
拖动手势UIPanGestureRecognizer
Qt无边框窗口拖拽和阴影
无边框窗口的实现
425 0
Qt无边框窗口拖拽和阴影
|
移动开发 前端开发 JavaScript
Canvas之鼠标滑动特效
Canvas之鼠标滑动特效
234 0
Canvas之鼠标滑动特效
|
前端开发 vr&ar 图形学
UGUI系列-UI菜单列表,滑动展示UI(Unity3D)
物体或者UI的在平面上的旋转展示的代码实现,这个功能也是用的比较多的模块,可以将这个代码做成模板,在以后的项目中都会用到。
Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button
550 0
Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
|
存储 前端开发 JavaScript
教程—炫目的Off-Canvas滑动导航
Off-Canvas 滑动导航现在逐渐在移动页面变得越来越流行了,本文就将讨论如何通过 jQuery 增添、删除类来操作 CSS 过渡和动画完成这样的效果。
547 0
教程—炫目的Off-Canvas滑动导航