Blog Comments

  1. Beverleyh's Avatar
    Just a note that this menu has been replaced with a version that has better tap-support for the desktop view on large screen touch devices;

    UPDATED Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript):

    UPDATED Responsive CSS3 Multi-Level, Drop-Down Menu (with JavaScript enhancement):

    And for a menu where sub-menu drops-downs can be closed by tapping anywhere in the surrounding area, try this:
  2. Beverleyh's Avatar
    Ah, I see what you mean. Good catch!

    No problem - the fix is to add this to the desktop CSS media query;
    .container, #menu, #menu .sub-nav { -webkit-transform:translate(0,0) !important; -ms-transform:translate(0,0) !important; transform:translate(0,0) !important }
    I'll update the demo (and the other menu scripts, as I imagine they'll all need this little snippet too) shortly.

    Just heading off home for the weekend. Have a good one!
  3. molendijk's Avatar
    Hi Beverleyh,
    Just a quick thing I noticed when I resized from fullscreen to a size where the mobile-icon appears. If after a click on the icon I return directly to fullscreen mode, part of the horizontal menu is cut off / becomes invisible.
  4. Beverleyh's Avatar
    To remove the 300ms touch delay and make the fly-out menus contract again on large touchscreen devices, please install the SwiftClick script from the source of this page:

    The article to support this update is here:
  5. molendijk's Avatar
    I revised the script so as to make it possible to not only load files into divs on page load but also on click, using one and the same script.
  6. molendijk's Avatar
    Ah, I see. Thanks.
  7. Beverleyh's Avatar
    Yes, but wouldn't that just preserve the original aspect ratio, doing the same thing as the 1st method?:

    The rest of this post (Demo 2 and 3) is to demonstrate image scaling and ratios that change within responsive design - e.g. shifting from a wide 5:1 ratio on desktop, to a squarer 2:1 ratio on mobile, which typically produces more visually pleasing results that maintain artistic direction in fluid/flexible layouts.
    Its probably most evident in this demo:

    All 3 methods have their merits - #1 is more convenient for user-generated content, while #2 and #3 are more useful from a design perspective - think of them as a way of fake-cropping to retain visual impact at small sizes.

    If I have misunderstood your description though, and it doesn't behave as demo 1 does, let me know.
    Updated 08-14-2014 at 10:38 PM by Beverleyh
  8. molendijk's Avatar
    Hi Beverleyh,
    Maybe I'm being naive, but can't we scale images in a more simple way by giving them EITHER a size in percentages for the width OR a size in percentages for the height (not both!).
    If we give them a size in percentages for the width, we can add a max-width and/or a min-width.
    If we give them a size in percentages for the height, we can add a max-height and/or a min-height.
    This will always preserve the width-height ratio.
  9. molendijk's Avatar
    I was not happy with the fact that the old script didn't allow us to write html (into the alerts) in the normal way. So I revised it. I also added the possibility to dynamically size the window.
    You can find the new script plus demos and explanations here.