As part of a school website's responsive rebuild, I wondered if it would feasible to remake this dartboard-esque "faculty web" menu and convert it from an image into pure CSS. Well, it *is* possible, but not without glitches - follow my journey from this to this (best viewed in Firefox, Opera and Chrome) below, and grab a more refined "take-away" freebie too.
Inspiration: http://fofwebdesign.co.uk/template/_...t-menu/source/ (made with images)
Updated 05-11-2015 at 09:54 AM by Beverleyh
The common factor in all previous versions of the modal gallery is that alternative markup is offered for IE7/8 users to allow them to view image enlargements in a new browser window instead of the modal overlay. This is because those earlier versions of Internet Explorer do not support the CSS :target pseudo selector which triggers the modal overlay, but let's face it - having each image open in a new browser window doesn't do much for usability and it doesn't look very nice either. So, if you're
Updated 01-28-2015 at 12:43 PM by Beverleyh
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
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;
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