CSS3 Multi-Level Priority Menu (no JavaScript)
Give that ☰ / 3-line-stripy / 'hamburger' icon in the top-right corner a click to start things rolling...
Features
A CSS-only, multi-level priority menu that;
- Prioritises visible buttons on the left, while hiding those on the right
- Supports unlimited sub-menus, of infinite depth *
- Uses a nested list format
- Uses the "advanced checkbox hack" to activate sub-menus (for Android/iOS)
* Although an infinite number of nested sub-menus is possible, you'll probably want to stop at 2 or 3 deep due to the collective length of expanded sub-menus that can quickly take over the web page.
Please view the source of this web page to grab the CSS and HTML markup.
Compatibility
- IE8+ (JavaScript required for IE8)
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything hinky.
Related
- Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (no JavaScript)
- Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (with JavaScript enhancement)
- Also see CSS3 Multi-Level, Off-Canvas Mobile Menu (with JavaScript IE7/8 support)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (with JavaScript enhancement)
- Also see Responsive CSS3 Multi-Level, Drop-Down Menu (SwiftClick - no 300ms delay + tap-to-close drop-downs)
- Also see Responsive CSS3 Multi-Level, Push/Slide Menu (no JavaScript)
- Also see Responsive CSS3 Multi-Level, Push/Slide Menu (with JavaScript enhancement)
- Also see Responsive CSS3 Multi-Level, Fly-Out Menu (no JavaScript)
- Also see Responsive CSS3 Multi-Level, Fly-Out Menu (with JavaScript enhancement)
Freebies
Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.