One of the most annoying things on touch devices is the way that CSS hover activated menus stay open until another link is clicked. Well, this example fixes that; UPDATED! Responsive CSS3 Multi-Level, Drop-Down Menu (Earlier releases of the Drop-Down menu have been replaced with better support for tap-activated sub-menus on touchscreen - reverted to using the arrow labels and checkbox hack [like the Fly-Out version does] - they're there for mobile view so why not use ...
Updated 09-06-2014 at 08:56 AM by Beverleyh
Images can be tricky to deal with in a responsive environment; by nature they are a 'static' element with specific dimensions, so how can we manipulate them into working with our lovely fluid/flexible web layouts? Thankfully there are a few techniques, and this post rounds up my top 3. Please note, this article mostly covers visual resizing in a web browser, and not any "true" responsive image techniques, i.e. serving different images to different screen sizes. These are ...
Updated 08-16-2014 at 10:26 AM by Beverleyh
My modal gallery has evolved and here come versions 4 and 5. Both now include pagination but version 5 is PHP generated to help with maintainability. First, a recap on the gallery development so far; Version 1: Responsive CSS3 Modal Gallery (no JavaScript)Version 2: Responsive CSS3 Modal Gallery (with JavaScript on-demand images)Version 3: Responsive CSS3 Modal Gallery (with JavaScript on-demand images + keyboard controls) Now, so far, this gallery has only ...
Updated 07-10-2014 at 10:49 AM by Beverleyh
The earlier version of this menu utilises the same checkbox hack and "off-canvass" pattern in desktop view as it does in mobile - apart from being always-visible on a large screen, it looks and works the same, regardless of what device is accessing it (modern browsers and IE9+). Thanks to the increasing popularity of touch devices, where tappable/clickable triggers now seem more favourable than hover actions, this has the benefit of consistency. Minus the initial trigger ...
Updated 06-04-2014 at 10:43 AM by Beverleyh
I was emailed the other day by somebody asking if my earlier CSS-Only Multi-Level, Off-Canvass Mobile Menu could be visible on desktop too. At its most basic level, the following CSS inside of a desktop media query will do that; Code: #menu { left:0 } .container { padding-left:13.75em } Except this stumps IE8 and under because of no media query support and no checkbox hack support. So I set to work on creating a version that is visible (and works) on desktop and older browsers. ...
#menu { left:0 } .container { padding-left:13.75em }
Updated 03-04-2015 at 05:43 PM by Beverleyh
Recent Visitors
Go to Profile
Mark as Read