Responsive Accessible Dropdown Navigation without JavaScript (pure CSS)

Try it? Click here for the Demo

Like it? Click here for the GitHub-Repo

What is this for?

Sites with long pages.

This navigation bar is made for small sites with only a few, but long pages, that need their own table of content (like Wikipedia).

So it's good for tutorials, short stories, sites with pages that have the look and feel of single-page-sites, but using more than just one single page.

Sites with sub pages

When you have a site with different topics and for each topic a main page and several sub pages, you can also use this navigation.

The problem is, that some browsers do not support focus-within. For users with these browsers you should provide links to the subpages on the main topic page and all sub pages.

By the way: as a user I personally like redundant navigation possibilities.

What is it doing?

The navigation has links to pages and in nested lists links to the chapters or sections of these pages.

The links to the pages are always visible, the links to the chapters can be reached with mouse (hovering the nav bar) and keyboard. Keyboard access works only in browsers, that do support focus-within. As a fallback for older browsers I recommend a table of contents on each page.

Pretty much the behaviour that you are used to.

How can I use it?

If you are using a nav-Element for your main navigation (what you should do) and a nested list as a container for the links in the navigation, this navigation has all it needs!

Just copy the css into your own css file or copy my css into your web space and reference it from your html documents like this:

<link rel="stylesheet" href="path/to/main.css">