# Proposing a left-aligned slide out hamburger menu

**URL:** https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287
**Category:** Feature
**Created:** [6월 21, 2015, 8:07오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287 "2015-06-21T20:07:47Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![nothing](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nothing/32/95750_2.png) [@nothing](https://meta.discourse.org/u/nothing)
#### Post date: [7월 11, 2018, 12:09오전 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/23 "2018-07-11T00:09:31Z")

</div>

Hello, I have tried your sidebar but I want to make changes.

1. I want to show only the categories on the left, so I want to use the categories to make the drop down menu.

2. And I want to write a text instead of icon .

3. The menu that opens is not closing when I click on the image (header)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 19, 2018, 5:50오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/24 "2018-07-19T17:50:13Z")

</div>

A post was split to a new topic: [Category list in the hamburger menu](https://meta.discourse.org/t/category-list-in-the-hamburger-menu/92739)

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [7월 30, 2018, 5:22오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/25 "2018-07-30T17:22:42Z")

</div>

I took up another weekend project to allow swipe gestures for mobile, building off of some previous swipe work that is already in core. I only target mobile views here, so neither large nor small desktop views change.

IMO gestures allow for Discourse to feel a lot more at home on mobile - this is the result:

 ![swipe-menu-demo](https://global.discourse-cdn.com/meta/original/3X/1/a/1af3f915cc49012b6f3c53893a1d396dd3c76aca.gif)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [7월 30, 2018, 5:32오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/26 "2018-07-30T17:32:46Z")

</div>

Just an experimental prototype or is that going to make a release?

I guess the issue with ‘swipe from left’ is that is an iOS gesture in Safari for ‘back’?

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [7월 30, 2018, 5:35오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/27 "2018-07-30T17:35:30Z")

</div>

It’s not yet released - it’s a coded proposal, but I wanted to collect some feedback first 😉

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [7월 30, 2018, 5:36오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/28 "2018-07-30T17:36:07Z")

</div>

Great stuff Jeff! I’m such a fan of making web pages behave like native apps!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 30, 2018, 6:07오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/29 "2018-07-30T18:07:08Z")

</div>

I’m not sure we could release something like this… as mentioned previously, this would interfere with the iOS swipe to go back/forward functionality, right? I think that’s a restriction we have to live with.

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [7월 30, 2018, 6:43오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/30 "2018-07-30T18:43:19Z")

</div>

I was hoping that safari would honor css touch action properties so that we could define our own gestures. If not, consider me pretty disappointed in Safari.

It was a pretty nice --gesture-- at least.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [7월 30, 2018, 6:53오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/31 "2018-07-30T18:53:10Z")

</div>

As far as I know Apple has the browser gestures locked down entirely. There are some hacks out there, but they’re pretty extreme (preventing all touch within 20px from either edge). We’ll have to continue pushing buttons the old fashioned way.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 30, 2018, 11:18오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/32 "2018-07-30T23:18:07Z")

</div>

I’m fine with the button pushing, I’d expect that actually – I use swipe back and forward from the sides a fair bit on my iPhone!

I love the full size menu on mobile, have wanted that for some time, kudos @featheredtoast 😍

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [7월 31, 2018, 12:08오전 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/33 "2018-07-31T00:08:45Z")

</div>

Thanks for the feedback! Kinda bummed that iOS steals swipe gestures like this but I guess I get the appeal for that gesture on browsing at-large.

I’d really like to play around in this space and see if there’s a way to eek out progressive changes, where swipe-to-open could be disabled on iOS so the swipe back/forth could continue to just work without interruption there. (Note in the gif that good ol’ button pushing still works!) Will eventually like to test out different options here, but I unfortunately do not yet have an iOS device to test this out on just yet.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [7월 31, 2018, 12:21오전 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/34 "2018-07-31T00:21:01Z")

</div>

Well if you like slow mobile devices, Qualcomm and Android have got your back 😈

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [8월 2, 2018, 7:57오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/35 "2018-08-02T19:57:20Z")

</div>

On Android, be careful that you don’t turn scrolling motions into menu opens. A drag at the edge of the screen @ a 320deg heading should be a scroll, not the menu.

(Google’s Blogger platform is _terrible_ at this, because almost the entire screen is a place you can start a Previous/Next Article drag from. Which isn’t even something you want to do that often.)

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [8월 2, 2018, 8:38오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/36 "2018-08-02T20:38:39Z")

</div>

Yeah, I hear you - it’s definitely a priority to get those details right. I’m making sure that vertical scrolling is not being stolen, and that menu events only fire within a set px from the edges of the screen.

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [8월 2, 2018, 8:41오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/37 "2018-08-02T20:41:25Z")

</div>

> [@featheredtoast](#):
>
> and that menu events only fire within a set px from the edges of the screen

Actually, I think a percent might be fine here? Some devices have heavily beveled edges or have overstepping screen protectors, so it’s hard to get all the way on the edge. As long as the angle is reasonably tight it’ll be fine.

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [8월 2, 2018, 8:50오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/38 "2018-08-02T20:50:53Z")

</div>

% might work. I’ll have to experiment and see what works best here. Regardless, I can declare that the center is definitely ignore zone central.

I also spent a bit of time trying to get direction right, and I am only determining movement in 4 directions (up/down/left/right). It also waits for a 5px move before making a decision about where the finger is going, because otherwise I’ve found it is just not accurate at all.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [8월 2, 2018, 9:09오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/39 "2018-08-02T21:09:09Z")

</div>

> [@featheredtoast](#):
>
> Kinda bummed that iOS steals swipe gestures like this but I guess I get the appeal for that gesture on browsing at-large.

This came up here (FFed to 8:10):

[![](https://global.discourse-cdn.com/meta/original/4X/2/0/0/20035e4e5e96e3a889f4a0eb83c3bc98bc174853.jpeg "YouTube") ](https://www.youtube.com/watch?v=d4Lq4DBUMOs)

---

<div class="post-metadata">

### Author: ![jtbayly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jtbayly/32/119510_2.png) [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [10월 19, 2018, 3:56오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/42 "2018-10-19T15:56:37Z")

</div>

I definitely don’t want swipe from the left being stolen on my iPhone. Glad they’ve got it locked down to going back one page. 😉

But I’m looking forward to the full-size menus and being able to swipe to dismiss them.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [10월 19, 2018, 4:19오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/43 "2018-10-19T16:19:59Z")

</div>

> [@jtbayly](#):
>
> Glad they’ve got it locked down to going back one page. 😉

I think the point is that they have it so locked down you can’t leverage that in a PWA even for the action it is intended for, e.g. to go back from Topic to Topic List. And that is NOT good. You then need an actual button, which is rubbish, given all you are trying to do is repeat the same action as the website has which would seem to be a perfectly reasonable expectation and a de facto standard. It works even in e.g. Whatsapp.

[https://meta.discourse.org/t/progressive-web-application-pwa/79217/26?u=merefield](https://meta.discourse.org/t/progressive-web-application-pwa/79217/26)

---

<div class="post-metadata">

### Author: ![jtbayly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jtbayly/32/119510_2.png) [@jtbayly](https://meta.discourse.org/u/jtbayly)
#### Post date: [10월 19, 2018, 4:57오후 UTC](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287/44 "2018-10-19T16:57:42Z")

</div>

> [@merefield](#):
>
> they have it so locked down you can’t leverage that in a PWA

I must have misunderstood. I thought that if I saved the site to my home screen as an “app” then it worked?

Otherwise, it is a website in my mind, and must conform to website standards.

Not to say that this UX would be bad in an app, but imagine all the websites stealing the “back” button and preventing you from going back to the website you were on prior to visiting the site. That’s just basic dark UX behavior. Websites that prevent me from leaving the site via the back button need to be shot. Lol.

[이전 페이지](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287.md?page=1)

[다음 페이지](https://meta.discourse.org/t/proposing-a-left-aligned-slide-out-hamburger-menu/30287.md?page=3)
