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>


相关文章
|
弹性计算 安全 定位技术
阿里云服务器机房具体地址在哪?查询方法来了
阿里云服务器机房具体地址在哪?查看详细地址方法太牛了
12086 2
阿里云服务器机房具体地址在哪?查询方法来了
|
存储 人工智能 物联网
LoRA大模型微调的利器
LoRA模型是小型的Stable Diffusion模型,它们对checkpoint模型进行微小的调整。它们的体积通常是检查点模型的10到100分之一。因为体积小,效果好,所以lora模型的使用程度比较高。
LoRA大模型微调的利器
|
机器学习/深度学习 PyTorch 算法框架/工具
PyTorch 中的动态计算图:实现灵活的神经网络架构
【8月更文第27天】PyTorch 是一款流行的深度学习框架,它以其灵活性和易用性而闻名。与 TensorFlow 等其他框架相比,PyTorch 最大的特点之一是支持动态计算图。这意味着开发者可以在运行时定义网络结构,这为构建复杂的模型提供了极大的便利。本文将深入探讨 PyTorch 中动态计算图的工作原理,并通过一些示例代码展示如何利用这一特性来构建灵活的神经网络架构。
1005 1
|
11月前
|
存储 Oracle 关系型数据库
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
本文介绍了MySQL InnoDB存储引擎中的数据文件和重做日志文件。数据文件包括`.ibd`和`ibdata`文件,用于存放InnoDB数据和索引。重做日志文件(redo log)确保数据的可靠性和事务的持久性,其大小和路径可由相关参数配置。文章还提供了视频讲解和示例代码。
350 11
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
|
11月前
|
Java Spring
SpringBoot自动装配的原理
在Spring Boot项目中,启动引导类通常使用`@SpringBootApplication`注解。该注解集成了`@SpringBootConfiguration`、`@ComponentScan`和`@EnableAutoConfiguration`三个注解,分别用于标记配置类、开启组件扫描和启用自动配置。
177 17
|
11月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
329 12
|
11月前
|
开发框架 监控 .NET
【Azure App Service】部署在App Service上的.NET应用内存消耗不能超过2GB的情况分析
x64 dotnet runtime is not installed on the app service by default. Since we had the app service running in x64, it was proxying the request to a 32 bit dotnet process which was throwing an OutOfMemoryException with requests >100MB. It worked on the IaaS servers because we had the x64 runtime install
192 5
|
存储 API 图形学
Unity精华☀️二、到底是什么原因导致“万向锁”?旋转翻车的终极解析!
Unity精华☀️二、到底是什么原因导致“万向锁”?旋转翻车的终极解析!
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
625 0
|
编解码 前端开发 图形学
【技术深度解析】多平台适配下的UI适配难题:U3D游戏UI错乱的终极解决方案
【7月更文第12天】随着移动设备市场的多元化,Unity游戏开发者面临的一大挑战是如何在不同分辨率和屏幕尺寸的设备上保持UI的一致性和美观性。游戏在高分辨率平板与低分辨率手机上呈现出的UI布局混乱、按钮错位等问题,严重影响玩家体验。本文旨在探讨Unity UI(UGUI)在多平台适配中的最佳实践,通过优化Canvas Scaler设置、灵活运用RectTransform和Anchor Points,以及高效利用设计工具,确保UI的完美适配。
1780 1