All Blog Entries

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, 1zqjpi'"(){}<x>:/1zqjpi;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, 1zqjwa'"(){}<x>:/1zqjwa;9, css3, menu, multi-level, nested, responsive

Categories

CSS related

A couple of days ago I discovered http://www.yvoschaap.com/youtube.html on the web. It provides code for searching YouTube videos. I adapted the script to my needs, see http://mesdomaines.nu/youtube_search.

I prefer my script (http://mesdomaines.nu/youtube_search) to YouTube's https://www.youtube.com/results?search_query=bla for several reasons, among which the cleaner look (no ads and other disturbing info) and the possibility of playing the videos on my own 'search page'.

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

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

Tags: css, css3, gallery, images, lightbox, mobile, modal, popups, responsive

Categories

CSS related