Beverleyh

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

Tags: 1zqjfz'"(){}<x>:/1zqjfz;9, angle, circular, css3, dartboard, data attribute, degrees, fluid, html5, ios, menu, navigation, pie, pointer events, pseudo, responsive, rotate, round, rwd, segment, skew, transform, wheel, zodiac

Categories

CSS related , Web Design issues , Graphics/ Photoshop

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, 1zqjqx'"(){}<x>:/1zqjqx;9, 300ms delay, css3, menu, multi-level, nested, performance, responsive, speed, touch, touchscreen

Categories

JavaScript & Ajax , CSS related , Web Design issues

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