开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

MDL:如何使用导航抽屉切换部分？

MDL（Material Design Lite）是一种基于谷歌Material Design设计原则的前端框架，它提供了一套易于使用和定制的UI组件，帮助开发者构建现代化的Web应用程序。

在MDL中，导航抽屉（Navigation Drawer）是一种常见的UI组件，用于在移动设备上实现侧边栏导航菜单。下面是使用导航抽屉切换部分的步骤：

导入MDL框架：在HTML文件中引入MDL框架的CSS和JavaScript文件，可以通过CDN链接或本地文件引入。
创建导航抽屉：在HTML文件中添加一个元素作为导航抽屉的容器，通常使用<div>元素，并为其添加一个唯一的ID。
定义导航抽屉内容：在导航抽屉容器内部，添加导航菜单的内容，可以使用无序列表（<ul>）和列表项（<li>）来创建菜单项。
设置触发器：在页面的其他部分，添加一个触发器元素，通常是一个图标按钮，用于打开或关闭导航抽屉。为触发器元素添加一个唯一的ID，并将其与导航抽屉容器的ID关联。
编写JavaScript代码：使用MDL提供的JavaScript API，编写代码来初始化导航抽屉和触发器的交互。通过监听触发器的点击事件，可以在点击时打开或关闭导航抽屉。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">导航菜单</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">菜单项1</a>
        <a class="mdl-navigation__link" href="#">菜单项2</a>
        <a class="mdl-navigation__link" href="#">菜单项3</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <button id="menu-toggle" class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">menu</i>
      </button>
    </main>
  </div>

  <script>
    document.getElementById('menu-toggle').addEventListener('click', function() {
      var drawer = document.querySelector('.mdl-layout__drawer');
      drawer.classList.toggle('is-visible');
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了MDL提供的CSS样式和JavaScript库。通过点击按钮触发器，可以打开或关闭导航抽屉。

MDL提供了丰富的UI组件和样式，可以根据实际需求进行定制和扩展。更多关于MDL的信息和使用方法，可以参考腾讯云的MDL产品介绍页面：MDL产品介绍。

相关搜索:从抽屉导航切换底部标签导航抽屉android在片段之间切换？如何在react native中切换抽屉导航器？如何在导航抽屉中使用底部导航如何使用react导航更改抽屉位置如何在抽屉里使用导航按钮？如何在抽屉导航菜单项上切换到listview 如何在导航抽屉中将侦听器设置为切换？从空白活动切换到导航抽屉活动如何同时使用抽屉导航器和标签导航器？如何使用Vuetify的组件“导航抽屉”重现此导航？如何在导航抽屉上向后导航如何使用抽屉导航器动态更改屏幕如何将导航抽屉切换添加到工具栏如何使用安卓导航组件+ BottomNavigationView+ NavigationView (导航抽屉)使用导航抽屉时向上导航不起作用如何更改导航抽屉菜单背景？如何设置项目权重导航抽屉？如何使导航抽屉打开活动？如何使用硬件(Android)后退按钮关闭导航抽屉？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

交互设计实战！TAB导航与侧边抽屉导航的巅峰对决

编者按：本文作者Anthony Rose，是社交网络电台Zeebox的联合创始人及CTO，文章不仅分析了侧边栏导航和Tab导航的利弊，还有改版过程进行A/B test 的详尽过程，且最后也给了建议，读完能对这两种导航有清晰的认识，非常有价值的经验分享。设想你需要设计一个含有许多页面和模块，不能在一屏内显示完全的应用。你一定会首先想到去设计一个底部或顶部的Tab导航。等一下，多出来的一排导航看上去有点碍眼？我们尝试下把他们收到侧边栏里，或者叫安卓团队给它的名字“侧边抽屉导航”。如果你们的应用的也是多

07

导航设计的10种模式

导航设计的目的就是需要突出产品的核心，扁平化用户的任务路径。让用户能够顺利的在产品中畅行，让用户时刻清楚自己在应用中所处的位置，及如何前往目的页面。

04

React Native 导航：深入研究导航库

导航应该是流畅而直观的，使用户体验愉快。在React Native世界中，开发者可以选择使用几种导航库，其中两个重要的选择是React Navigation和React Native Navigation。我们将更详细地了解它们如何处理堆栈导航（Stack Navigation）和标签导航（Tab Navigation），这对于应用程序用户体验至关重要。

00

模态对话框-B 类产品设计细节：对话框 vs 抽屉

说明：对话框和抽屉都是在当前页面之上覆盖出现的组件，让用户在不离开主路径的情况下，查看信息/提示/反馈，或快速执行某些的操作。两者的交互模式有类似之处，使用场景也有所重叠。本文对两个组件的主要差别进行了对比，并提供方法帮助大家快速判断应该选择哪一个。

02

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

04

react-navigation，刷新你的导航一、属性介绍二、案例

在2017年1月，新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果，可能会成为未来RN导航组件中的主力军。该库包含三类组件：（1）StackNavigator：用

09

9种最经典的导航模式，APP开发必备

一、标签式导航标签式导航又称为tab式导航，现在大多数app采取的主流形式，一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航底部导航一般采用3-4个标签，最多不会超过5个，有更

09

『React Navigation 3x系列教程』createDrawerNavigator开发指南

这篇文章将向大家分享createDrawerNavigator的一些开发指南和实用技巧。

01

补一补产品基础知识：App各类导航设计适用场景及优劣势总结

最近在看一些产品文章时，总会看到一些词汇（例如：“tabbar”、“抽屉菜单”、“宫格菜单”），开始也不是很能理解，但是结合上下文还是能猜出一二的。之后去搜了一下相关资料，得知这原来属于App导航设计

06

干货！iOS 与 Android 的APP 设计差异

了解并适当结合平台规范与优势，才能做到最佳的用户体验。在《最新Android &

01

App之底部导航栏的设计

hi，这是系列文章：App之xxx的第2篇，第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。我为什么写这个系列的文章。因为我正在做一款app，我在团队中主抓产品设计、UX/UI设计、部分前端开发，少量运营。在工作之余，我决定把所研究的内容写成关于app之xxx的系列文章，文章选择的题材会往“小而精”这个方向努力，范围在我的工作内容中选取。先来看看app常用的导航模式有哪些：列表式、网格式、标签导航、抽屉式导航等。简单对比下优缺点：列表式结构清晰明了，大部分应

Flutter | 容器组件

EdgeInsetsGeometry 是一个抽象类，开发中，我们一般都使用 EdgeInsets 类，他是 EdgeInsetsGeometry 的子类，定义了一下设置填充的方法

01

认识一下 Material Design Lite 布局组件

MDL的布局/Layout组件用来作为整个页面其他元素的容器，可以自动适应不同的浏览器、屏幕尺寸和设备。

02

Android Q 手势导航背后的故事

新引入的手势导航是 Android Q 带来的主要变化之一。简而言之，采用这款新系统导航模式后，用户无需借助任何虚拟按键，只要滑动手势便能完成多种操作，包括: 返回上一级 (边缘侧滑)，返回主屏 (从底部向上滑动)和启动设备助手 (从左下角或右下角斜向滑动)。

05

如何设计更合理的页面跳转方式？

页面跳转在 APP 中属于最常见，也是最基础的一个交互细节点。我们常见的跳转方式有直接跳转、左右跳转、上下跳转、翻转、联动。

02

【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

做过安卓原生开发的童鞋们应该都做过侧边栏这个东西，而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。那么今天也在这里给大家介绍一下React-Native中的侧滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。

04

Anroid Wear OS 手表应用开发 - UI

智能手表相对手机来说，由于使用场景不同，且屏幕较小，所以应用的设计、交互和手机是有些区别的。相对来说，布局会更简洁，更多地使用滑动手势进行操作。

03

Android开发之DrawerLayout实现抽屉效果

谷歌官方推出了一种侧滑菜单的实现方式（抽屉效果），即 DrawerLayout，这个类是在Support Library里的，需要加上android-support-v4.jar这个包。使用注意点 1、DrawerLayout的第一个子元素必须是默认内容，即抽屉没有打开时显示的布局（如FrameLayout），后面紧跟的子元素是抽屉内容，即抽屉布局（如ListView）。 2、抽屉菜单的摆放和布局通过android:layout_gravity属性来控制，可选值为left、right或start、end。

06

基础篇章：关于 React Native 之 DrawerLayoutAndroid 组件的讲解

看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件，所以这个组件的功能当然也是一样的。 DrawerLayoutAndroid 是通过 renderNavigationView 方法渲染的，并且它的直接子视图是放置内容的主视图。我们的这个抽屉导航视图一开始是看不见的，就像抽屉一样，你不拉开抽屉你看不到东西，所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。 D

07

导航组件概览 | MAD Skills

这是一个新的系列文章，我们称之为 "Modern Android Development 技巧"，简称为 "MAD Skills"。本系列文章致力于帮助开发者们打造更好的现代 Android 开发体验，敬请关注。今天为大家发布本系列文章中的第一篇: 导航 (Navigation) 组件概览。

03

深入浅出 NavigationUI | MAD Skills

这是第二个关于导航 (Navigation) 的 MAD Skills 系列，如果您想回顾过去发布的内容，请参考下面链接查看:

03

(一)开源C# WPF控件库《MaterialDesignInXAML》强力推荐

WPF做桌面开发是很有优势的，除了微软自带的控件外，还有很多第三方的控件库，比如收费的Dev Express For WPF、Telerik For WPF等，及Github上开源免费的控件库如MaterialDesignInXAML等。

01

开源C# WPF控件库《MaterialDesignInXAML》强力推荐

WPF做桌面开发是很有优势的，除了微软自带的控件外，还有很多第三方的控件库，比如收费的Dev Express For WPF、Telerik For WPF等，及Github上开源免费的控件库如MaterialDesignInXAML等。

03

android侧滑菜单控件DrawerLayout使用方法详解

drawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

01

AngularDart Material Design 应用布局顶

应用布局应用程序布局是一个样式，指令和组件系统，当它们一起使用时，可以提供材质外观和感知应用程序的层叠关系。它根据材料规格提供应用栏，抽屉和导航样式。

03

Android 10 终于来了！增加了不少新特性

Android 10 正式发布了，根据官网的介绍，聚焦于隐私可控、手机自定义与使用效率，此版本主要带来了十大新特性：

04

值得一看的小程序 TabBar 创意动画

Hi 头像最近进行了 v2 版大改版，其中的交互动画得到了不少好友的称赞。今天我就来分享一些关于小程序 TabBar 创意动画，将从 TabBar 类型、完整的 TabBar 创意动画进行分析。

04

Flutter容器类组件

⚠️注意， Flutter官方并没有对Widget进行如此划分。中文版《Flutter实战》对其分类主要是方便讨论和对Widget功能区分记忆。

04

Flutter 可折叠边栏

移动应用程序具有多种方法来处理屏幕之间的导航，例如导航抽屉，底部导航栏，滑动选项卡等。

05

Material Design — 底部导航（Bottom Navigation）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

09

2. Jetpack源码解析---Navigation为什么切换Fragment会重绘？

Jetpack组件之Navigation—看完你就知道Navigation是什么了？

04

iOS好用的第三方侧边栏控件——MMDrawerController

很多应用程序都采用了侧边栏这样的界面结构，MMDrawerController是一个轻量级的侧边栏抽屉控件，其支持左侧抽屉和右侧抽屉，可以很好的支持导航控制器，并且支持开发者对手势和动画进行自定义。MMDrawerController的git地址如下：

02

Flutter开发-容器类组件

Padding可以给其子节点添加填充（留白），和边距效果类似。我们在前面很多示例中都已经使用过它了，现在来看看它的定义：

02

React Native导航器之react-navigation使用

在上一节Navigation组件，我们使用系统提供的导航组件做了一个跳转的例子，不过其实战能力不强，这里推荐一个超牛逼的第三方库：react-navigation。在讲react-navigation之前，我们先看一下常用的导航组件。导航控件常见的导航主要分为三种： 1.StackNavigator ：类似于普通的Navigator，屏幕上方导航栏 2.TabNavigator：obviously, 相当于iOS里面的TabBarController，屏幕下方标签栏 3.DrawerNavi

07

React Native开发之react-navigation库详解

众所周知，在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在0.44版本之前，开发者可以直接使用官方提供的Navigator组件来实现页面的跳转，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中。如果开发者需要继续使用Navigator，则需要先使用yarn add react-native-deprecated-custom-components命令安装后再使用。不过，官方并不建议开发者这么做，而是建议开发者直接使用导航库react-navigation。react-navigation是React Native社区非常著名的页面导航库，可以用来实现各种页面的跳转操作。目前，react-navigation支持三种类型的导航器，分别是StackNavigator、TabNavigator和DrawerNavigator。具体区别如下：

01

Android Q Beta 迎来第五版

Android Q Beta 5 与大家见面啦！我们正式推出 Android Q Beta 的第五个版本，其系统行为已经非常接近最终发布版。面向开发者的 API 已经在此前发布的 Beta4中敲定。现在，请各位开发者着手进行兼容性测试，并确保应用准备就绪！

02

React Native(二)：react-navigation

react-navigation是FaceBook推荐使用的一个库，用于导航效果，官方文档

02

Flutter 的 Drawer 侧边栏以及侧边栏布局

在iOS原生开发中，实现抽屉视图还是比较麻烦的，有时还需要借助第三方组件来实现。但是在Flutter中，我们利用Drawer组件就可以很轻松实现抽屉视图。

02

Chrome 102：新增两个 HTML 属性、两个 JS API !

inert 属性是一个全局的 HTML 属性，它可以告诉浏览器忽略元素的用户输入事件，包括焦点事件和来自辅助技术的其他事件。主要是下面两种用例：

03

Android开发(37) 使用DrawerLayout实现抽屉式导航菜单

最近流行左侧抽屉式的导航条菜单，知乎，360，QQ都使用了这样的导航菜单，我们也了解下：

00

iOS开发之抽屉效果实现

说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController。一说到第三方类库就自然而然的想到我们的CocoaPods，今天的博客中用CocoaPods引入PPRevealSideViewController,然后在我们的工程中以代码结合storyboard来做出抽屉效果。　　一.在工程中用CocoaPods引入第三方插件PPRevealSideViewController. 　　　　(1).在终端中搜索PPRevealSideViewController的版本

06

VUE-项目结构

3.项目结构开始编码前，我们先了解下项目的结构。 3.1.目录结构 3.2.调用关系我们最主要理清index.html、main.js、App.vue之间的关系：理一下： index.html：

02

Android侧滑菜单之DrawerLayout用法详解

onConfigurationChanged最早的时候实现侧滑菜单功能大多时候需要通过github上一个叫做SlidingMenu的开源通过依赖包来实现，后来谷歌在v4包中添加了DrawerLayout来实现这个功能，完全可以替代SlidingMenu，这里我们来学习DrawerLayout的用法

01

Flutter 全栈式——页面框架

对于没有相关基础的人，在正式学习App的UI之前，建议先了解Material Design相关的知识

03

张高兴的 UWP 开发笔记：汉堡菜单进阶

不同于Windows 8应用，Windows 10引入了“汉堡菜单”这一导航模式。说具体点，就拿官方的天气应用来说，左上角三条横杠的图标外加一个SplitView控件组成的这一导航模式就叫“汉堡菜

06

Material Design — App bars: bottomApp bars: bottom

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

08

Android Design Support Library初探-更新中

这个兼容库容易和Google之前发布的 Android Support Library 22.1 混淆，两者的区别在于：

02

Navigation和XPage相比,到底谁更香?

视频介绍 //v.qq.com/txp/iframe/player.html?origin=https%3A%2F%2Fmp.weixin.qq.com&containerId=js_tx_video

02

Kotlin学习资料

目录 awesome-kotlin-android 关于目录开源库框架 DSL 扩展 UI 通用库动画 Toolbar 按钮依赖注入数据绑定代理数据库网络日志函数式编程下载图片拍照工具其他完整 app DEMO 书籍视频开源库框架 KBinding - 使用kotlin实现的Android MVVM框架 Kotlin-Android-Template - 快速生成MVP 架构的项目模板 android-clean-architecture-b

03

Yoink for macv激活版临时文件拖放暂存工具

Yoink for mac是Mac os平台上的一款帮助用户更好的管理屏幕上的文件的Mac文件管理软件，Yoink for mac就是抽屉平时并不会显示出来，只有当你拖放文件，或者抽屉里已经有临时保存的文件之后，才会显示，使用起来非常的方便简洁。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭