Mobile Menu

Discussion in 'HTML & Website Design' started by meet_dilip, Mar 25, 2016.

  1. #1
    I have seen responsive websites have a mobile menu ( normally indicated by 3 horizontal lines ) when view in a mobile device. Can someone help me use one ?
     
    meet_dilip, Mar 25, 2016 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    It's called a hamburger icon. I recently wrote a tutorial on doing this as a text based menu, or showing the hamburger icon WITHOUT resorting to using JavaScript.

    http://www.cutcodedown.com/tutorial/mobileMenu

    The hard part is figuring out when it would break width-wise. The breakpoint for when to hide the menu should when posssible be based NOT on some arbitrary number of pixels or for any specific device, but on the needs of the menu. JUST as your breakpoints for responsive layout changes should also be based on the content (in EM) and not at some pre-designated pixel size.

    At least if you care about accessibility and want to be both future and backwards support ready. That's why thinking "mobile" vs. "desktop" is actually the wrong mindset given the plethora of device sizes and resolutions that exists, and the sheer volume of devices that we can't even conceive of yet. That's why layout should be built to the content, NOT the other way around. Hence why the ignorant PSD jockeys who call themselves "designers" typically don't know enough about HTML, CSS, JS or accessibility to be designing a blasted thing!
     
    deathshadow, Mar 25, 2016 IP
  3. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #3
    This is a pretty clever method. I just tried it and am going to make this my new go-to. Thanks for sharing DS.
     
    KewL, Apr 2, 2016 IP