Paradeiser – An Alternative to the Hamburger Menu
lucidlemon.github.io
lucidlemon.github.io
This implementation works very nice for sites that have like 6 menu items, but the reason designers loved these fricking hamburger menus is because they could stuff a shitload of content in there.
Sidenote: position:fixed still doesn't always work properly on mobile, plus a navigation bar should really be at the bottom of a page for thumb-accessibility (but that's just a matter of tweaking some css, ofcourse) Sidenote2: Why do you hide it on desktop? Mystery meat!
Good work, keep the initiatives coming!
Well, there is a screenshot right at the greeting :)
Yes, this implementation is focusing on 3-5 pages on your website - which is mostly enough for like 90% of all common sites. And if you need more for less important stuff like Terms of Service, FAQ or anything you could imagine, there is still an overflow button, which is kinda like a hamburger menu, but at least you have a few items without clicking a second time - and you see them instantly. On a usual hamburger menu you can't even see your options without opening it, which increased my bounce rate on gaumengut.at by 80%.
I noticed that position:fixed is a bit awkward when pinch-zooming on mobile, but what are other and better alternatives? I primarily wanted to make it as easy as possible so that it's just a drop-in solution, without further code. Hence why I positioned it on the top instead of the bottom, it's easier to implement using pure css and without forcing the user to change his DOM too much.
I hide it on Desktop as I primarily wanted it to be a mobile navigation. The font size is too small for Desktops (distance to the display, mostly non retina...), but a desktop version is planned.
Thanks a lot for your feedback!
Given that, wouldn't it be better if the menu were always visible? I had to resize my browser window to be tiny to even see that it was there on the Paradeiser site (and not just in the screenshot).
As mentioned earlier, it currently is only thought as an alternative to the hamburger menu on mobile, as most websites use different menus for desktop, and therefore it is really hard to make this `use this menu and you will be happy` menu on desktops. But we don't quite have so much room to play with on mobile screens.
In addition to that the font size really just works on high-density screens, so it would require major reworking for desktops. I planned to do that though.
I used to use hamburgler (http://johnm.io/project/hamburgler/) which seems to be a clone of the website you mentioned.
I used it on gaumengut aswell, but saw an increase in the bounce rate by 80%. Therefore I needed something else :)