Using Sitepointe's Pure CSS Off-Screen Navigation Menu - Browsers supported: IE9+, Firefox 3.5+, Chrome any, Safari 3.2+, Opera 9.5+
This navigation trick presents serious accessibility issues:
- While a TAB key can be used o get to the menu's trigger/button, there is no taxt in the label for a text-to-speech reader to use.
- There is no visiual indication when the trigger/button is the FOCUS
- There is no text or icon-based indication that clicking the icon will openor closethe menu
- Having to click the same button to Close Menu is no longer traditional/intuiative behavior.
It also may present some exepectation conflict-y issues
- Having to click the same button to Close Menu is no longer traditional/intuiative behavior.
SAMPLER
Thank you for using GetSimple CMS. This is your homepage, so please change this text to be what you want.
Header 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec this is code
venenatis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vulputate pretium augue.
Header 3
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
Header 4
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Donec ut est risus, placerat venenatis augue
A blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut est risus, placerat venenatis augue. Link in BlockQuote Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.This patched look forces me to require everything be in
tags so that the P elements can be lifted up one layer in the Z-index. I hate that. Need a new way to make the patched look.
Currently thinking using CSS gradient backgrounds. SVG can apparently do many of the same things. Dunno if it is better to use. Obviously an actually image could be used but when stretched the stitches would not be even. 2 images (one with the horizontal and one with the vertical stitching would be needed.