汉堡菜单

by Jared Tong

汤杰(Jared Tong)

开发人员在编写汉堡菜单时犯的错误 (The mistake developers make when coding a hamburger menu)

What do The New York Times’ developers get wrong about the hamburger menu, and what do Disney’s and Wikipedia’s get right?

《纽约时报》的开发人员在汉堡菜单上犯了什么错误，迪士尼和维基百科的做错了什么？

As far as I know, I’ve found only one way to style the hamburger menu’s open state that supports iOS Safari. (Presumably, you want a mobile view to work on iPhone!)

据我所知，我发现只有一种方式可以设置支持iOS Safari的汉堡菜单的打开状态。 (想必您希望在iPhone上使用移动视图！)

It’s all about how the hamburger menu is positioned.

这与汉堡菜单的放置方式有关。

许多汉堡菜单的问题 (The Problem with Many Hamburger Menus)

If your hamburger menu has no need for scroll… Congratulations! The CSS solution you’re thinking of now will probably work just fine: position the sidebar absolutely out of and into the view-port when the user clicks on the menu icon.

如果您的汉堡菜单不需要滚动……恭喜！ 您现在正在考虑CSS解决方案可能会很好地起作用：当用户单击菜单图标时，将侧边栏绝对移出视口并放入视口中。

If your menu has more items than the view-port can display at once, this is what happens when your hamburger menu is positioned absolutely:

如果菜单中的项目多于视图一次显示的数量，则当绝对放置汉堡菜单时会发生以下情况：

If you don’t want to watch the video, I’ll try and describe it in words.

如果您不想观看视频，我将尝试用文字描述。

  • Scrolling within the position: absolute menu is unpleasant: it does not scroll smoothly, and when it reaches the end of scroll, it does not bounce in that satisfying, patented rubber-band way. Try the hamburger menus on New York Times, or Pitchfork.

    在以下position: absolute滚动position: absolute菜单令人不快：滚动不流畅，到达滚动末尾时，不会以令人满意的专利橡皮筋弹跳。 试试《纽约时报》或干草叉上的汉堡菜单。

  • If you over-scroll in the hamburger menu, iOS Safari will scroll the body instead. Try the sidebar on Viki.

    如果在汉堡菜单中过度滚动，iOS Safari将改为滚动身体。 在Viki上尝试侧边栏。

  • An alternative is to use position:fixed and -webkit-overflow-scrolling: touch on the sidebar. Even then, if you tap beyond the menu, like scrolling on the sliver of main content exposed beside the sidebar, you will lose the ability to scroll within the menu. Try the hamburger menu on Grab.

    另一种方法是使用position:fixed和-webkit-overflow-scrolling: touch侧边栏。 即使那样，如果您点击菜单之外的内容，例如滚动显示在侧边栏旁边的主要内容，也将失去在菜单中滚动的能力。 试试Grab上的汉堡菜单。

Notice how sometimes iOS scrolls the menu, sometimes it scrolls the body behind the menu? Frustrating!

请注意，iOS有时如何滚动菜单，有时它如何滚动菜单后面的主体？ 令人沮丧！

And FWIW, you can break the scroll on Apple.com too. An easy way to trigger the scroll on the hamburger menu is to use your phone horizontally.

和FWIW，您也可以在Apple.com上中断滚动。 触发汉堡菜单上滚动的一种简单方法是水平使用手机。

解决方案 (The Solution)

Basically, the key thing you must remember about the Menu’s final, open state is this: instead of positioning the menu absolutely, it will be the main content that is positioned once the sidebar is opened. In other words, instead of positioning the menu, position everything else!

基本上，关于菜单的最终打开状态，您必须记住的关键是：绝对不放置菜单，而是在打开侧栏后定位的主要内容。 换句话说， 不要放置菜单 ， 而是放置其他所有内容 ！

Here is that in code, alongside explanatory comments:

这是代码中的内容，以及解释性注释：

<html><head></head><body>  <div class="sidebar">Hamburger menu links go here</div>  <div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">?</button></div></body></html>
/* Arbitrary CSS variable values for explanatory purposes */:root {  --sidebar-width: 100px;  --sidebar-bg-colour: blue;}.sidebar {  display: none;  position: relative;  width: var(--sidebar-width);}@media (max-width: 767px) {  html.sidebar-is-open .sidebar {    display: block;      /*       The sidebar is just rendered in default position,      as it appears in the document flow     */  }  html.sidebar-is-open .main-content {    position: fixed;     /*      It is the main content that is positioned.      This is the crux of the implementation. The rest is all sugar.     Cons: the body will scroll to the top, losing your user's scroll position    */    /* prevents resizing from its original full-screen width */    bottom: 0;    left: 0;    right: 0;    top: 0;    width: 100%;     overflow: hidden;  }  /* Optional enhancement:      make the over-scroll on iPhone the same color as the sidebar */  html.sidebar-is-open body {    background-color: var(--sidebar-bg-colour);  }  .sidebar {    background-color: var(--sidebar-bg-colour);  }}
const documentElement = document.querySelector("html");const contentElement = document.querySelector(".main-content");const sidebarElement = document.querySelector(".sidebar");const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");const openSidebar = () => {  /* How you trigger the change is up to you */  documentElement.classList.add("sidebar-is-open");};const closeSidebar = () => {  documentElement.classList.remove("sidebar-is-open");};const toggleSidebar = () => {  sidebarIsOpen() ? closeSidebar() : openSidebar();};

结论 (Conclusion)

So far I’ve found two big players who get it right: Wikipedia and Disney USA.

到目前为止，我发现有两个正确的大公司： Wikipedia和Disney USA 。

Try their hamburger menus on iOS and see what a great experience the scrolling is!

在iOS上尝试他们的汉堡包菜单，看看滚动带来的绝佳体验！

Hopefully you can spread the word, and fix hamburger menus from now on.

希望您能从现在开始传播这个词，并修复汉堡包菜单。

If you’re more of a beginner, you can find an explanation of what a hamburger menu is and how to build a hamburger menu from scratch on my blog.

如果您是初学者，可以在我的博客上找到有关什么是汉堡包菜单以及如何从头开始构建汉堡包菜单的说明 。

翻译自: https://www.freecodecamp.org/news/the-mistake-developers-make-when-coding-a-hamburger-menu-f46c7a3ff956/

汉堡菜单

汉堡菜单_开发人员在编写汉堡菜单时犯的错误相关推荐

  1. 初级测试开发面试题_初级开发人员在编写单元测试时常犯的错误

    初级测试开发面试题 自从我编写第一个单元测试以来已经有10年了. 从那时起,我不记得我已经编写了成千上万的单元测试. 老实说,我在源代码和测试代码之间没有任何区别. 对我来说是同一回事. 测试代码是源 ...

  2. 开发人员在编写 HTML 和 CSS 时最常犯的六大错误

    生活中犯错误是正常的,没有人不会犯错误,更何况是开发人员呢?今天我们就来卡看看开发人员在编写 HTML 和 CSS 时最常犯的六大错误有哪些. 作者 | Stas Melnikov 译者 | 弯月,责 ...

  3. 初级开发人员在编写单元测试时常犯的错误

    自从我编写第一个单元测试以来已经有10年了. 从那时起,我不记得我已经编写了成千上万的单元测试. 老实说,我在源代码和测试代码之间没有任何区别. 对我来说是同一回事. 测试代码是源代码的一部分. 在过 ...

  4. mysql中groupby会用到索引吗_开发人员不得不知的MySQL索引和查询优化

    本文主要总结了工作中一些常用的操作及不合理的操作,在对慢查询进行优化时收集的一些有用的资料和信息,本文适合有 MySQL 基础的开发人员. 索引相关 索引基数 基数是数据列所包含的不同值的数量,例如, ...

  5. ios开发语言本地国际化_开发人员软件本地化最终语言指南

    ios开发语言本地国际化 There are lots of great guides out there for how to prep your product for international ...

  6. 开发人员避免编写测试的2个最常见原因

    This post was originally published on Medium 这篇文章最初发表于Medium Writing tests represents one of those f ...

  7. 编写有效用例电子版_软件测试人员必须编写代码吗？

    相信每一个刚入门软件测试的小伙伴都会琢磨一个问题:软件测试人员,要不要写代码? 其实这个问题同样困扰着已经在测试行业闯荡了几年的测试小司机们. 那今天,我就来给大家分析一下~ 01 各种软件测试角色 ...

  8. 域控 只能访问特定网址_开发人员需要了解的特定于域的语言

    域控 只能访问特定网址 特定领域语言 (DSL)是一种旨在在特定域的上下文中使用的语言. 域可以是业务上下文(例如,银行,保险等)或应用程序上下文(例如,Web应用程序,数据库等).相反,通用语言(G ...

  9. 开发人员安全问题_开发人员需要了解的安全性

    开发人员安全问题 DevOps并不意味着每个人都必须是开发和运营方面的专家. 在角色往往更专业的大型组织中尤其如此. 而是,DevOps思维的发展方式使其更加关注关注点分离. 在一定程度上,运营团队可 ...

最新文章

  1. mysql答题表设计_PHP+MYSQL问答系统中的提问和回答的表怎么设计
  2. android canvas_Android仿IOS11 控制中心进度条
  3. matlab 转换 tfrecord,训练数据集与TFRecord互相转换的两种方式
  4. 华为2288H V5服务器 RAID操作
  5. SHOP++源码部署说明:
  6. html页面通过特殊链接：打电话，发短信，发邮件详细教程
  7. Jquery 操作select总结
  8. 开源社交系统ThinkSNS+和ThinkSNS V4区别在哪里
  9. 计算机word的常用功能技巧,10个Word操作神技巧，看看你会多少？
  10. ems苹果专线投递速度_苹果官网运抵速度让人欲罢不能
  11. 微信小程序真机提示error occurs:ENOENT: no such file or directory, access
  12. java中使用jxls导出excel，excel单元格换行，多sheet页导出
  13. Angular学习笔记之慕课大漠穷秋塞主讲
  14. k3s+traefik+cert-manager+letsencrypt实现web服务全https
  15. 金属铣床行业现状调研及趋势分析报告
  16. 【对话通信原理】第3章 信息的坐骑——信号
  17. css图片精灵定位_CSS精灵图片(CSS sprite)使用心得(转)
  18. 迁移学习技巧以及如何更好的finetune 模型
  19. 马斯克大力推荐Starlink新品：价格更高，网速更慢？？？
  20. 2022年上半年亚太区金融科技投资总额较2021年下半年增长一倍以上，达到破纪录的418亿美元 | 美通社头条...

热门文章

  1. 一招让你拿下seata分布式事务框架，看这篇文章准没错！
  2. T-SQL语句学习(三)
  3. Codeforces 773D Perishable Roads 最短路 （看题解）
  4. 《HTTP 权威指南》笔记:第十五章 实体与编码
  5. django开发商城(提供初始数据,商城首页及购物车)
  6. hiho图的联通性（自留）
  7. hibernate3配置文件hibernate.cfg.xml的详细解释
  8. phoneGap2.9+eclipse开发环境和helloword案例
  9. [css3]:nth-child与:nth-of-type的区别
  10. 汇总：一些不错的使用频率比较高的JS函数