CSS NAVIGATION MENUS
Latest Demonstrations
- A CSS ONLY click action flexbox menu
13-05-2016
An accordion menu using flexbox and order animation.
- A circular menu with bounce
09-03-2016
A CSS only circular menu with bounce animation using cubic-bezier animation timing
- A responsive swipe-momentum menu
24-02-2016
A responsive swipe action momentum menu suitable for all the latest browsers and OS.
- A responsive slide down menu
19-09-2015
A responsive slide down menu suitable for all the latest browsers, OS and devices without using media queries.
- A responsive multi-level menu
26-05-2015
A responsive multi-level menu suitable for all browsers and OS, PCs, tablets and smartphones using a little jQuery.
- A responsive multi-level menu
18-05-2015
Another responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
- A responsive multi-level menu
14-05-2015
A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
- A responsive fade in/out menu panel
23-04-2015
A responsive fade in/out menu panel suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A second responsive droplist
20-04-2015
A second responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A responsive droplist
10-01-2015
A responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A responsive multi-level
16-12-2014
A responsive click/tap multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A second click action multi-level
22-10-2014
A second click/tap action multi-level menu suitable for all the latest browsers and operating systems.
- A responsive slide out/in
29-09-2014
A universal slide in/out menu suitable for PCs, tablets and smartphones using just CSS.
- A responsive slide down/up
03-09-2014
A responsive slide down/up droplist menu suitable for PCs, tablets and smartphones using just CSS.
- A vertical slide concertina
26-08-2014
A vertical slide concertina menu suitable for all modern browsers and OS including touch screens and smartphones.
- A responsive slide down/up
15-08-2014
A responsive slide down/up menus suitable for PCs, tablets and smartphones using just CSS.
- A responsive multi-level droplist
13-08-2014
A responsive multi-level droplist menus suitable for PCs, tablets and smartphones using just CSS.
Responsive menus
- A responsive droplist
23-04-2013
A responsive droplist menus that works in all modern browser including touch screens, iOS and Android OS. No javascript
- A responsive dropdown/flyout
26-04-2013
A responsive dropdown/flyout menu that works in all modern browser including touch screens, iOS and Android OS. No javascript
- A responsive single level
07-05-2013
A responsive single level menus that works in all modern browser including touch screens, iOS and Android OS.
- A responsive droplist
03-10-2013
A responsive droplist menu that works in all modern browser including touch screens, iOS, Android OS and smartphones.
- A couple of responsive single level menus
04-10-2013
Responsive single level menus that works in all modern browser including touch screens, iOS, Android OS and smartphones.
- A responsive multi-level
03-02-2014
A Responsive multi-level menus suitable for PCs, tablets and smartphones.
- A second responsive multi-level
10-02-2014
A second responsive multi-level menus suitable for PCs, tablets and smartphones using just one menu.
- A responsive multi-level droplist
13-08-2014
A responsive multi-level droplist menus suitable for PCs, tablets and smartphones using just CSS.
- A responsive slide down/up
15-08-2014
A responsive slide down/up menu suitable for PCs, tablets and smartphones using just CSS.
- A responsive slide down/up
03-09-2014
A responsive slide down/up droplist menu suitable for PCs, tablets and smartphones using just CSS.
- A responsive slide out/in
29-09-2014
A universal slide in/out menu suitable for PCs, tablets and smartphones using just CSS.
- A responsive multi-level
16-12-2014
A responsive click/tap multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A responsive droplist
10-01-2015
A responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A second responsive droplist
20-04-2015
A second responsive click/tap droplist menu suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A responsive fade in/out menu panel
23-04-2015
A responsive fade in/out menu panel suitable for all the latest browsers and OS, PCs, tablets and smartphones using just CSS.
- A responsive multi-level menu
14-05-2015
A responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
- A responsive multi-level menu
18-05-2015
Another responsive multi-level menu suitable for all the latest browsers and OS, PCs, tablets and smartphones.
- A responsive multi-level menu
26-05-2015
A responsive multi-level menu suitable for all browsers and OS, PCs, tablets and smartphones using a little jQuery.
- A responsive slide down menu
19-09-2015
A responsive slide down menu suitable for all the latest browsers, OS and devices without using media queries.
- A responsive swipe-momentum menu
24-02-2016
A responsive swipe action momentum menu suitable for all the latest browsers and OS.
Menus suitable for iPhone/iPad/iPod
- A dropdown
12-01-2011
A single level dropdown menu for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A slide down
15-01-2011
A single level slide down menu for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A flyout
19-01-2011
A flyout menu for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A droplist
21-01-2011
A droplist menu with delay action for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A droplist
23-03-2011
A droplist menu with top level links suitable for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A flyout list
22-01-2011
A flyout list menu with delay action for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A flyout list
19-03-2011
A flyout list menu for Safari Mobile browsers with top level links.
- A flyout icons list
25-01-2011
A flyout list of icons for Safari Mobile browsers (iPhone, iPad and iPod Touch).
- A 'exploding images'
10-02-2011
An exploding stack of image links, suitable for the iPhone, iPad and iPod Touch.
- An image fix for closing sub menus
06-04-2011
Using an image to close sub menus on the iPhone, iPad and iPod Touch.
- An 'anywidth' multi level
07-06-2011
An 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch.
- An 'anywidth' multi level
09-06-2011
A version 2 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch.
- An 'anywidth' multi level
07-10-2011
A version 3 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques.
- An 'anywidth' multi level
31-10-2011
A version 4 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques.
- An 'anywidth' multi level
31-10-2011
A version 5 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques.
- An 'anywidth' multi level
19-04-2012
A version 6 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the latest techniques with no 'close' button.
- An 'anywidth' multi level
30-10-2012
A version 7 'anywidth' drop/fly menu for the iPhone, iPad and iPod Touch. Using the new technique to close an open sub menu.
- A slidedown
11-06-2011
A single level slidedown menu for the iPhone, iPad and iPod Touch.
- A slide/hide
13-06-2011
A multi level slidedown/flyout menu with animation for the iPhone, iPad and iPod Touch.
- A droplist
25-06-2011
A droplist menu with slide action and pushdown for the iPhone, iPad and iPod Touch.
- A drop panel
25-08-2011
A drop panel menu with multi configurations, suitable for the iPhone, iPad and iPod Touch.
- A dropdown
11-09-2011
A dropdown menu with click open/close, suitable for the iPhone, iPad and iPod Touch.
- A vertical concertina
04-10-2011
A vertical conertina menu with click open/close and slide action, suitable for the iPhone, iPad and iPod Touch.
- Vertical concertina menu #2
10-09-2012
A vertical conertina menu with click open/close and slide action version #2
- A single level dropdown
06-10-2011
A single level dropdown menu with click open/close using a new technique for bug fixes in IE and the iPad.
- A single level dropdown
02-04-2012
A single level dropdown menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
- A multi level flyout
18-04-2012
A multi level flyout menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
- A slide up / dropdown
17-09-2012
A slide up/ dropdown animated menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
- A slide down / concertina
18-01-2013
A slide down / concertina animated menu suitable for the Safari Mobile browser which can be 'closed' by tapping anywhere on the screen.
- A vertical slide concertina
26-08-2014
A vertical slide concertina menu suitable for all modern browsers and OS including touch screens and smartphones.
Image replacement menu
- png image replacement
18-11-2009
A method of replacing link text with png images that works in IE6 and degrades well with images off etc.
Menus with curved border - pre border-radius
- Snazzy menu
A resizeable tab menu without images.
- More snazzy menus
Two more tab menus using border art.
The above is an index of all my navigation menus which range from the very simple to the more advanced.
These menus all work in the latest versions of the most popular browsers but cannot be guaranteed to work in older browser version or some of the lesser known browsers. I am unable to test on Mac browsers so if you want to use any of my menu ideas on a Mac then you should check that it works on your particular platform / browser combination.
I have received feedback from Mac owners on many of these menus so it is always worth checking the comments on each page to see if there are any known problems.
For these demonstrations to work in Internet Explorer please make sure that you are using a standards compliant doctype as the first line of your code. A list of the recommended DTDs can be found at the following link:
Recommended DTDs to use in your Web document.
Copyright
Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.