文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

这个 CSS 库帮你做汉堡？

当然不是真的汉堡包，毕竟我们这儿不是美食频道，而是指 HambergurMenu，汉堡包式菜单，由于菜单图标的三条横线酷似一个汉堡包，故得其名。 [是不是很像？]...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...，选择一款自己喜欢的，再给上述汉堡包元素的最外层（含有 hamburger 类名）添加风格对应的类名，其他子元素保持不变即可。...比如我需要一个点击后折叠的汉堡菜单，对应的类名是 hamburger--collapse，则代码如下： <button class="hamburger hamburger--collapse" type

1.9K31

这个 CSS 库帮你做汉堡？

当然不是真的汉堡包，毕竟我们这儿不是美食频道，而是指 HambergurMenu，汉堡包式菜单，由于菜单图标的三条横线酷似一个汉堡包，故得其名。 [是不是很像？]...为了让网页更生动，当点击汉堡包菜单图标时，可以给它添加一个小动画。这不，有个国外的大神，专门开发了一个汉堡包菜单 CSS 动画库，库的名称就叫 Hamburgers！...进入 Hamburgers 库的官网，可以看到各式各样美味的 CSS 动画汉堡。点击菜单图标，即可查看效果，比如点击 Arrow 菜单图标，三条线会自然变化为箭头图标。...，选择一款自己喜欢的，再给上述汉堡包元素的最外层（含有 hamburger 类名）添加风格对应的类名，其他子元素保持不变即可。...比如我需要一个点击后折叠的汉堡菜单，对应的类名是 hamburger--collapse，则代码如下： <button class="hamburger hamburger--collapse" type

1.8K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    张高兴的 Xamarin.Forms 开发笔记：为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

    所谓 UWP 样式的汉堡菜单，我曾在“张高兴的 UWP 开发笔记：汉堡菜单进阶”里说过，也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon，并且左侧使用填充颜色的矩形用来表示 ListView...但怎样通过 Xamarin.Forms ，将这一样式的汉堡菜单带入到 Android 与 iOS 中呢？...左侧的汉堡菜单称为“大纲”（Master），右侧的页面称为“细节”（Detail）。Xamarin.Froms 为项目提供了若干种导航模式，“大纲-细节”为其中一种。...MasterPageItem.cs 　　和 UWP 的汉堡菜单一样，首先要创建一个类，作为导航的项目，用来绑定 ListView 。名字叫 MasterPageItem.cs 。 　　...里面的属性有页面的标题 Title，左侧的图标 Icon，图标的字体 FontFamily，目的页面 DestPage，还有左侧的矩形显示 Selected 与 颜色 Color。

    6.3K100

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

    不同于Windows 8应用，Windows 10引入了“汉堡菜单”这一导航模式。...说具体点，就拿官方的天气应用来说，左上角三条横杠的图标外加一个SplitView控件组成的这一导航模式就叫“汉堡菜单”。 ? 　　...本文讨论的是如何实现官方的这一样式（点击后左侧出现一个填充矩形），普通实现网上到处都是，有需要的朋友自己百度下吧。 　　...下面将介绍两种不同的实现方法，第一种最简单的方法是直接使用 Template 10 模板，第二种就是纯手写了。 　　若有什么不正确的地方望指正，大家共同讨论。 　1....--汉堡菜单开关--> <Button Name="PaneOpenButton" FontFamily="Segoe MDL2 Assets" Content

    2.1K60

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。 在手机上，使用 modal drawers 代替。 ?...为了点击 bottom app bar 的菜单图标后提高可达性，它们从屏幕底部打开而不是从侧面打开。 ---- 分解 Navigation drawers 包含嵌入在 sheet 内的 list。...每个项目都使用文本标签和可选的图标来描述其目的地。 目的地标签 文本标签应该清晰且足够短，以免被 sheet 切断。 ? 可以只有文本标签无图标 ? 保持文本标签简短，但是长度实在太长时就截断 ?...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。

    5.3K40

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

    为了保持与其他移动应用的一致性，一定要记住平台之间的差异。...抽屉导航其实是一个菜单，通过点击汉堡图标，然后从左侧或右侧滑出。标签栏一般位于标题栏的下方，使得内容能够很好地被管理，通过标签栏，用户可以对应用的视图，数据集和功能进行切换。...左侧就是抽屉导航；右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签，因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中，没有类似抽屉菜单的标准导航控件。...Apple认为，常用导航入口应该尽可能的外置，一些用户不常用的功能才需要被放进汉堡菜单中。而对比安卓规范，通常会把主要导航也放在汉堡菜单中。

    5.3K10

    2019年最实用的导航栏设计实践和案例分析全解

    本文将详细介绍导航栏的设计最佳实践，导航栏的类型以及最佳的导航栏设计案例等等。 主次导航栏 不同的网站，导航是不一样的，甚至相差甚远。...汉堡导航 汉堡包导航，是三条横线呈现的导航按钮，是一种很常见的导航方式。...与网站的风格保持一致 不一致的风格的导航栏看上去很滑稽，用户也会困惑。 响应式设计 响应式的导航栏，在手机端几乎都是以汉堡菜单为主，点击可查看所有导航。以下是几个案列展示： ? ?...8个用户体验最佳的导航栏设计 Harry’s Harry’s是男士剃须护肤品牌，网站的导航栏很清晰，固定在顶部。...并且在首页的左上角有搜索的功能，可以快速查询到用户所需的商品。 ? Pogg 顾名思义，Sweet potato pie是一个卖土豆馅饼的网站。

    4.9K31

    《Motion Design for iOS》（四十三）

    构建一个动画的汉堡按钮 汉堡按钮和滑出式菜单可能是整个产业中最两极分化的界面元素。...苹果的狂热支持者反对汉堡按钮和相应的滑出式菜单，说设计师（以及工程师、产品经理和CEO们）喜欢在那堆积尽可能多的东西，因为你有了很多垂直地空间。...我不能说我不认同，因为用户测试表明用户其实不太使用滑出式菜单，但可能我是一个伪君子，因为我还是在我的iPhone app Interesting中使用了一个汉堡按钮，这样看来我也是一个问题！...典型的是有三个水平栏来描绘常规状态，然后如果你想要精致一点的话，你可以在菜单打开时将栏换成X形。当然了，Pop就是用来让用户界面开发师变得精致的，所以为什么不给这个过渡加上一些动画呢？...开始时，我们有一个圆形的黑色按钮，里面中间有一个汉堡形的线。当按钮被点击时，它动画到一个稍微小一点的尺寸。但点击结束时，线会动画城红色的X。当点击X状态时，动画会回到原始的颜色和位置。

    85330

    2020年网站首屏设计：最佳实践和例子

    但前提是，要保持一致。一个很好的网站设计实践是将内页的首屏设计为主页面首屏的缩写版本。 ? Architectural Platform Home 网站首屏包括什么？...如果可能，请尝试将主题视频材料添加到首屏中。 许多网站使用它来吸引观众，同时以尽可能好的方式展示他们的公司或产品。 另一种让你的设计更有吸引力，更生动，更加印象深刻的方法是添加动画。...Meal Service Home Page 隐藏导航（汉堡菜单） 这是一种使用得越来越多的网站设计解决方案。汉堡包菜单是三条条纹的小图标，点击时显示完整的菜单。...当设计师需要专注于主屏幕时，它们就使用这种方法。 从网站可用性的角度来看，这是一个很好的选择。 这样的菜单来自移动设计，用户已经很熟悉了。...因此，在设计网站时，要最大限度地重视首屏。 网站首屏设计的最后一个最佳实践：定期修改，以保持的网站和最新的设计潮流接轨。 原文作者：Kate Shokurova

    2.5K10

    掌握这7个UI设计法则，让你的界面更出众

    来看一下哪些地方需要用到微交互： 1，打开/关闭 2，调整设置偏好 3，上传和下载 4，通知 5，社交媒体分享 6，下拉菜单和隐藏菜单 7，突出显示CTA号召性用语 ?...即使在平面设计、界面设计，我们也一直尝试着不破坏扁平设计的原则下融入3D的元素： ? 5 为每个页面添加一个聚焦点 突出重点是吸引用户注意特定设计元素的不错策略。...界面设计时，如果汉堡包图标是用来表示来自左侧的菜单，则不要用它来表示配置文件的详细信息。 7 保持一致 一致性的设计是直观的设计。 ?...当设计遵循一致性原则时，人们可以毫无压力的将原有认识迁移到新的环境中，并快速学习新的事物。这样，他们可以专注于执行任务，而不是花大量的时间去学习新的UI界面。...在整个设计系统中使用熟悉的设计模式是保持一致的最佳方法。如果一个网站有两个页面都是显示博客内容的，那么两个页面的设计应该具有共通性，这样用户看到新的页面时，能够明白是什么含义。

    1.4K30

    再见Metro，Windows 10通用应用设计趋势分析 - 腾讯ISUX

    简单来说，在Windows 10上将真正实现以尽可能少的开发量即可打造全平台都可运行的应用，从电脑、平板、智能手机，甚至到Xbox One都无缝过渡，并且保持整体一致的用户界面和操作体验。...这套控件的视觉元素和交互体验都是整体一致的，但针对不同的操作场景和设备有细微不同的体现，比如触摸屏、应用弹出控件等，当用户触摸时自动使用较大面积按钮，使用键盘时与之相反。 ?...· 探索新的导航解决方案 既然Windows 10已决定弱化横向浏览，那必然需要一种更好的导航形式来替代之前的大字号横滑导航，大部分的通用应用都开始尝试采用“汉堡菜单”（Navigation Drawer...虽然汉堡菜单已经被广泛应用在网站、IOS及Android系统中，但是由于其易用性还存在很大争议（特别是在Phone上），所以在正式版发布前，汉堡菜单会不会成为微软的最终解决方案还不得而知。 ?...还好在新的通用应用设计中，我们可以看到除了开始菜单以外，曾经那些单一的Metro元素已经越来越少，而线型图标、居中布局、圆形、分割线等等元素的加入使界面变得更加丰富起来，可以说Metro UI的设计语言已被逐渐弱化

    1.5K40

    Android 发布 15 周年了！Google 员工说出了这些年的美好回忆

    因此，我们打造了一个 Android Oreo 超级英雄，将它与最新版本中的所有超能力结合在一起，并将它（以及 Android Oreo ）的发布时间定在纽约市日食的准确时刻”。...白板草图上有一排图标，表示聊天、Gmail 和 Youtube，第二排是时钟、返回、菜单和主页图标，下面是一系列草图，有 Android bugdroid、时钟和各种方形图标。...Android Studio 图标由一个蓝色模板和一个从右侧探出的绿色 Android 机器人头像组成。 伟大的芝士汉堡 芝士汉堡表情符号的前后照片。...看到我们的技术被用于帮助家庭管理护理，并与在重症监护室接受 COVID 治疗的亲人保持联系，我感到非常震撼。...我相信，我们将共同创造更加难忘的下一个 15 年。

    58610

    H5 App实战进阶十三：H5 App的响应式设计与适配多屏幕

    本文将深入探讨响应式设计的原则、工具和技术，并通过实例展示如何在H5 App中实现多屏幕适配。核心内容1. 响应式设计原则灵活性：布局应能够根据不同屏幕尺寸和分辨率进行自适应调整。...流体排版：根据视口大小动态调整字体大小，以保持内容的可读性。示例：构建一个响应式导航栏解释HTML结构：创建了一个包含品牌标识、汉堡菜单图标和菜单项的导航栏...CSS样式：使用Flexbox布局导航栏，使品牌标识和菜单项在较大屏幕上水平排列。...使用媒体查询（@media (max-width: 768px)）来调整小屏幕上的布局，隐藏菜单项，并在点击汉堡菜单图标时显示。添加了一些基本的样式，如背景颜色、文本颜色、悬停效果等。

    2.2K10

    UI设计之动画—从虚拟到现实

    但是，静态设计（字形，图标，改变颜色和控件的形状或整个界面）和UI的动画提供了让应用程序从类似应用程序（有时看起来像克隆）中脱颖而出的方法。...动画概念试验更新的材料设计（图二） UI动画概念的示例 滚动项目列表 第一个示例包含与项目列表的交互：左侧变体只是将所有列表向上移动，但是右侧变体模仿拉动卡片设计的。...从列表转换到项目 这是另一个例子：左侧选项显示从列表或菜单转换到特定项目屏幕的基本方式，而右侧选项的流程更加动态。 打开侧边菜单 概念动画会让人觉得更加生动且富有生命力，比如打开侧面菜单等基本操作。...Home Budget app中的UI动画概念增加了打开汉堡包菜单的动态 ? Business Card 中的UI概念模仿从配置文件头像拉出卡的有趣 ?...在扁平化设计时代，当形状和颜色追求简洁时，在紧张竞争中，动画成为应用程序和设计解决方案脱颖而出的可靠方法。 ?

    1.3K60

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

    我可以显示一个标志，一个导航图标（譬如汉堡形状的菜单按钮），一个标题与副标题，以及一个功能列表。标题和副标题会在中间显示，徽标和导航图标会在左侧显示，而功能列表则在右侧显示。...特别注意：尽管我上面的标识（徽标）和导航图标可以显示远程图片，也就是从服务器和网络获取，但是仅限开发者模式，如果在发行（release）模式下，你永远都应该用图片资源来渲染这些图标。...title 功能标题 icon 功能图标 show icon显示还是隐藏，在弹出菜单里显示：always总是显示，ifRoom如果放的下则显示，或者never从不显示。...传递给此回调的唯一参数是该功能在actions数组中的位置 onIconClicked func 当图标被点击时，回调此函数 overflowIcon 设置功能列表的弹出菜单的图标 rtl bool 设置...除了将这一属性设为true以外，你还需要在AndroidManifest.xml中添加：android:supportsRtl="true"以及在MainActivity的onCreate方法中调用 setLayoutDirection

    2.7K100

    鸿蒙5开发宝藏案例分享---一多断点开发实践

    ）应用场景：Pad横屏显示侧边栏，手机隐藏为汉堡菜单关键技术：@Watch监听 + 条件渲染@Entrystruct MainPage { @State isCollapsed: boolean =...}) Content() } } }}交互逻辑：宽度≥840vp（lg）：固定左侧240vp导航栏320vp≤宽度汉堡菜单 案例6：阅读器分栏模式（文档类APP）特殊需求：折叠屏半开状态特殊布局核心代码：@Componentstruct ReaderLayout { @StorageLink...根据断点设置视频比例 private getVideoRatio(): number { switch(this.bp) { case 'sm': return 16/9; // 手机保持...├── AdaptiveContainer.ets # 自适应容器 └── ResponsiveImage.ets # 响应式图片组件掌握这些案例后，相信大家在面对复杂的多端适配需求时，

    32710

    你真的知道如何正确清除 DNS 缓存吗？( 附全平台详细教程 )

    在开始菜单搜索文本框中键入 cmd。 右键单击 “命令提示符”，然后单击 “以管理员身份运行”。这将打开 “命令提示符” 窗口。...如果那对你不起作用，请尝试清除缓存和 Cookie。 按下 CTRL+Shift+Del 以打开 “清除浏览数据” 对话框窗口。 选择一个时间范围。选择 “所有时间” 以删除所有内容。...火狐 Firefox 要清除 Firefox 的 DNS 缓存，请执行以下步骤： 在右上角，单击汉堡包图标 ☰ 以打开 Firefox 的菜单： 点击 ⚙ Options (Preferences) 链接...单击左侧的 “隐私和安全性” 或 “隐私” 选项卡。 向下滚动到该 History 部分，然后单击 Clear History... 按钮。 选择要清除的时间范围。...如果这对你不起作用，请尝试以下方法并暂时禁用 DNS 缓存。 打开一个新标签，然后在 Firefox 的地址栏中输入 about:config 。

    61.2K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券