Grow your CSS skills. Land your dream job.

Responsive Menu Question

  • # December 12, 2012 at 9:57 pm

    For the sake of this simplicity, this involves a responsive mobile-first (small menu) and a full width (big menu, with drop downs).

    In general I try to take the mobile first approach, where all mobile styles reside in the main styling (not in a media query).

    However when it comes to menus, sometimes they tend to be completely different and overriding styles and just dealing with them can be tedious.

    What is your opinion on not putting the small menu in the main styles at all and instead put both menus in the media queries?

    Example:

    Mobile-first Main Styles (with no menu)
    @media (max-width: 768px) { small menu }
    @media (min-width: 768px) { large menu }

    For most menus, I don’t think this is needed. Although when both are very different it feels like this approach seems logical. Any thoughts?

    # December 12, 2012 at 10:04 pm

    This will only work if you are using a polyfill for older browsers (otherwise IE 8 and below would have no menus).

    I generally take a mobile first approach with my web development, and while I agree that menus are often the biggest component of my media queries, I think that your suggestion is just introducing more work for yourself.

    If I’m understanding correctly, you would be then maintaining two separate styles for your menus? I prefer to set a base style for small devices, and then alter that (based on the core styling) for larger devices. Sure it can be a bit of code that sits in your media queries, but it should mean less code overall, and easier maintainability. Also, I generally choose a specific width (depending on the content), and then have everything larger than that use the ‘big screen’ menu styles.

    # December 12, 2012 at 10:08 pm

    sometimes I do it myself, declare class just withing media query like thi one for photo gallery

    @media only screen
    and (max-width : 1280px) {
    .gallery {width:11.28%;}
    }

    @media only screen
    and (max-width : 1024px) {
    .gallery {width:13.667%;}
    }

    @media only screen
    and (max-width : 768px) {
    .gallery {width:17%;}
    }

    # December 13, 2012 at 12:10 pm

    Thanks @joshuanhibbert, the whole IE8 thing is enough for keeping the mobile first approach. I was just getting distracted because I was trying to think of ways to make the menu easier for other people to use (I am working on a theme for developers, most who are barely getting into responsive design).

    I am 90% done and after combining crunching code, there isn’t nearly as much code/complexity as I thought there would be. :P

    —-

    @jurotek, Yeah, I hear Chris Coyer talk a lot about his Papa Bear/Baby Bear mixin on the ShopTalkShow Podcast which is pretty much what you are describing, but I haven’t adopted it yet. I just haven’t really seen the benefit of this method.

    Lol, F&*# responsive menus with dropdowns, such a pain. :P

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

You must be logged in to reply to this topic.

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