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>


相关文章
|
弹性计算 安全 定位技术
阿里云服务器机房具体地址在哪?查询方法来了
阿里云服务器机房具体地址在哪?查看详细地址方法太牛了
11762 2
阿里云服务器机房具体地址在哪?查询方法来了
|
10月前
|
人工智能 Apache 流计算
参与Flink社区活动,免费赢取FFA大会两日通票~
Flink Forward Asia 2024 将于 11 月 29-30 日在上海举行,庆祝 Apache Flink 诞生十周年。大会将回顾 Flink 的技术成就,展望未来十年的发展,并介绍 Flink 2.0 版本。通过三种参与方式,您有机会免费赢取大会两日通票和 Flink 专属周边。
513 13
参与Flink社区活动,免费赢取FFA大会两日通票~
|
10月前
|
Java Spring
SpringBoot自动装配的原理
在Spring Boot项目中,启动引导类通常使用`@SpringBootApplication`注解。该注解集成了`@SpringBootConfiguration`、`@ComponentScan`和`@EnableAutoConfiguration`三个注解,分别用于标记配置类、开启组件扫描和启用自动配置。
152 17
|
10月前
|
缓存 NoSQL 关系型数据库
Redis和Mysql如何保证数据⼀致?
在项目中,为了解决Redis与Mysql的数据一致性问题,我们采用了多种策略:对于低一致性要求的数据,不做特别处理;时效性数据通过设置缓存过期时间来减少不一致风险;高一致性但时效性要求不高的数据,利用MQ异步同步确保最终一致性;而对一致性和时效性都有高要求的数据,则采用分布式事务(如Seata TCC模式)来保障。
168 14
|
10月前
|
存储 人工智能 调度
阿里云吴结生:高性能计算持续创新,响应数据+AI时代的多元化负载需求
在数字化转型的大潮中,每家公司都在积极探索如何利用数据驱动业务增长,而AI技术的快速发展更是加速了这一进程。
|
10月前
|
开发框架 监控 .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
157 5
|
10月前
|
人工智能 供应链 安全
|
存储 API 图形学
Unity精华☀️二、到底是什么原因导致“万向锁”?旋转翻车的终极解析!
Unity精华☀️二、到底是什么原因导致“万向锁”?旋转翻车的终极解析!
|
11月前
|
监控 Docker 容器
docker常用命令
本文汇总了Docker的常用命令,涵盖了镜像、容器、网络、数据卷的管理,以及系统信息查看、镜像构建、登录和注销Docker Hub,还有容器内部文件操作和事件监控,最后介绍了Docker Compose的使用方法。
223 0
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
542 0