CodePen

Loading ..................

Responsive menu with CSS Regions

Description

Overflow menu items into a side-menu when they don't fit the viewport.

Tags

  1. responsive
  2. css regions
  3. layout

Comments

  1. It looks interesting but don't work for me .. :/

    (Mac 10.9 | Mavericks | Chrome 30.0.15 )

  2. Hi LuckyVJ,

    This example is using features which are not yet enabled by default in all browsers. Learn how to do that here: http://html.adobe.com/webplatform/enable/

  3. Hey, thanks for this tips ! It works now and its amazing !

  4. I wonder if this idea could be translated into reponsive tables too. Like as the horizontal screen real estate shrinks, columns off the right side of the table disappear into an overflow area that you reveal by tapping something.

    Like a cross between this: http://filamentgroup.com/examples/rwd-table-patterns/ But instead of just hiding the columns and revealing them by adding back to table and causing horizontal scroll, revealing them within the row in a new area like this: http://css-tricks.com/examples/ResponsiveTables/responsive.php

  5. Very cool. Something I was wondering: Is there a way to only show the blue (burger) button when it's filled? Do CSS regions have some pseudo selector for that. Or maybe :only-child might work, if the markup allows it.

  6. The BBC actually implement this on their mobile sites (with JS however). Love the concept though!

    http://m.bbc.co.uk/sports/football/ (you'll probably need to change your user agent to an iPhone or similar).

  7. @simurai I thought it was possible with some jQuery, but CSS Regions doesn't change the DOM so you cant count #nav-compact's children. The only possible solution thus far would be hiding the #menu and showing it when the first menu item is being placed inside #nav-compact (< 997px). You can check it out here

  8. @simurai, @bronsrobin I don't think there's a CSS-only way to achieve that, because, yes, CSS Regions do not alter the DOM. The media-query isn't all that flexible either: dropping menu items may cause false positives.

    There is a CSSOM for regions accessible via JavaScript. Each region has a regionOverset (prefixed) property which can be: 'empty', 'fit' or 'overset'. The NamedFlow dispatches regionoversetchange (prefixed) events when a change occurs in any of the regions. So it is possible to leverage that and trigger the visibility of the 'burger' menu toggle.

  9. @chriscoyier, Interesting idea! I'll need to try it.

    CSS Regions only recently got support for working with non-block elements, like table cells. Support may be not be brilliant yet, but that's a great use case. Thanks for sharing!

  10. @simurai @bronsrobin @oslego I implemented the javascript solution here. It's quite simple.

  11. @FWeinb that's awesome! That is probably what @oslego meant. Didn't know that was possible but yeah its quite simple. Thanks!

  12. @FWeinb, yes that's awesome! Thanks for building it! Using the Regions CSSOM opens up more use cases that CSS alone might not cover. This is an excellent example.

  13. Video demo by Šime Vidas (in case you can't see it in your browser) http://www.youtube.com/watch?v=lrnMcOV_VxA

  14. For the "dont show if empty" is it not possible to construct the thing (burger image, size and style) with css and using the ":not(:empty)" to "display: block;" ?

  15. Hi @simeydotme, it's not possible to use the :not(:empty) selector for that use case because the side-menu is always empty in the DOM. CSS Regions do not alter the DOM, they just visually render the content in another box. That's a good thing. It means that event handlers and styles are preserved regardless of where the content will flow.

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 30923 Views
  • 15 Comments
  • 96 Hearts
Loading...
Loading...