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
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 ...
The latest CSS-only offering is my attempt at an image gallery where image enlargements open in a modal window. It was inspired by a tutorial on modal popups and uses the :target selector in CSS to match the hash at the end of an URL with the id of a corresponding element. The logic for this (taken from the modal popups tutorial) is that a hashed URL can be wrapped around a small thumb image, which matches the id of an image enlargement in a modal overlay div. When the hashed small ...
Updated 04-28-2014 at 11:39 AM by Beverleyh
Fiddling some more with CSS transitions and the checkbox hack to emulate click events via CSS, I tried my hand at making a CSS-only content slider. Initially I attempted to make it with checkboxes, but due to the behaviour of multiple checkboxes being checkable at the same time (which totally mungs up the idea for a slider where you only want one slide activated), I turned to radio buttons instead. The key difference between radios and checkboxes is that only one radio ...
Updated 11-27-2014 at 01:27 PM by Beverleyh (basic support added for IE7)
Blog Categories
Recent Comments
