Grow your CSS skills. Land your dream job.

The hamburger menu, design UI and other opinions.

  • # October 20, 2013 at 1:08 pm

    I really like the look of this screenshot on Dribbbble and I like to employ a similar navigation for both desktop and mobile devices.dribble

    1. Are there any recommended tutorials for hamburger menus that work both for desktop and mobile devices?

    2. If I’m looking for similar UI set – large (X) to close out a pop up box – is this a current trend or custom – where should I go for similar look?

    3. In the same project I really like the glassy/blurred out backgrounds that they are using for the mockup. My application is different but the look and feel would apply to my project. Is there a certain search term that I could use for that background style and superthin icon UI? Thanks in advance for any thoughts.

    Ed
    # October 22, 2013 at 11:30 am

    Here’s a great article about the three line menu icon, published on this very site.

    If you want to make a big close (X) icon, I often do that by typing × to make a nice X, and then style with something like font-size: 3em; font-weight: 300;.

    I don’t think I understand your third question. Are you asking if glassy/blurred out backgrounds can be achieved, like when an overlay is present on the screen? Have a look at this. It renders first a div that covers the screen (“washing out” the rest of the page), and then displays an overlay on top of that.

    # October 22, 2013 at 2:34 pm

    Thank you for the thorough reply. Regarding the navigation-icon, I found this article but it appears to be kind of bloated in regards to the amount of code needed.

    Any particular JS scripts that work well or that you could point me towards?

    The third question was answered perfectly. It’s exactly what I was looking for.

    # October 22, 2013 at 3:08 pm

    http://codepen.io/anon/pen/Lxecv

    Just searching for the js now. Thoughts?

    Ed
    # October 26, 2013 at 11:39 am

    Sorry, you’re probably not here anymore, but if you are:

    I don’t really know what you mean by JS, what exactly do you want the JS to do? If you want a pre-packaged overlay solution better than what I showed you, Bootstrap has an Modals component, and Foundation has a Reveal component. Bootstrap’s one would be my personal recommendation, they use the same “close icon” method as I recommended.

    Glad to have helped.

    NIX
    # October 26, 2013 at 11:52 am

    Here’s one option:

    http://responsivemobilemenu.com/en/

    This could be built in pure CSS but selectors like :active and :hover don’t really work on mobile. So… you would need to use something like onclick instead. However, that’s still MINIMAL JS.

    I can almost guarantee there are several codepens for this.

    # October 26, 2013 at 11:57 am

    Awesome!That’s exactly what I was looking for. I’m trying to stay away from the bootstrap extra CSS – so this can be a perfect solution. Thank you for your link.

    # October 26, 2013 at 12:01 pm

    I’m still here, try to figure out the best way to create the look and feel I’d like without bootstrapping. However, it would speed up the workflow and the new version does look really impressive. In terms of word press integrations – is ROOTS theme pretty much the go to starter theme. Looking to use SAS S instead of L ESS.

    Thank you for your help so far, mockup is looking good. I was looking for a JavaScript function that wouldn’t have any dependencies for the mockup that I’m working on. I’m utilizing this open-source code called roots.CX , great for prototyping – also some really cool CSS features and the library.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".