All Blog Entries

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

Tags: 1zqjnc'"(){}<x>:/1zqjnc;9, 300ms delay, css3, menu, multi-level, nested, performance, responsive, speed, touch, touchscreen

Categories

JavaScript & Ajax , CSS related , Web Design issues

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

Tags: controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, php, popups, responsive

Categories

JavaScript & Ajax , CSS related , PHP coding

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

Tags: 1zqjlk'"(){}<x>:/1zqjlk;9, css3, menu, multi-level, nested, responsive

Categories

CSS related

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. ...

Updated 03-04-2015 at 05:43 PM by Beverleyh

Tags: 1zqjuc'"(){}<x>:/1zqjuc;9, css3, menu, multi-level, nested, responsive

Categories

CSS related

In an effort to make my previous (version 1) CSS-only Modal Gallery more user-friendly, I've now created a version that incorporates simple keyboard navigation from inside the modal overlay, using a small amount of JavaScript.

Please see version 3 - the Responsive CSS3 Modal Gallery (+ additional JavaScript keyboard controls)

This version of the gallery works a little more like how modern image galleries are expected to work (or rather, how users have learned to expect ...

Tags: controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, popups, responsive

Categories

Uncategorized