CSS only responsive menu
This menu is one of the simplest solutions to creating a responsive menu in that it can be made with CSS only, without the need for JavaScript or JQuery.
It requires two versions of the menu in the html code - one at the top of the page and one at the bottom. Depending on the width of the screen, one version is visible and the other is hidden. In mobile view, there is a button at the top of the page which takes the user to the menu at the base of the page. It looks a bit like an expanding menu but with no expanding! In larger view only the menu at the top of the page is visible.
In order to target the seperate menus with styles, they are given id names: <nav class="nav">
for the menu in theheader and <nav id="mobile-nav">
for the one in the footer. They can then be hidden or revealed as required for the screen size breakpoints:
@media all and (min-width:768px)
{
#mobile-nav { display: none; }
}
This menu is suitable for when there are no sub-menu items.
Try it out
The html and CSS are commented so it should be fairly easy to see how it works. To get to know it, try changing the styling directly in the document. Then, you could try adding it to one of your own projects.
Links
10 examples of responsive lists
An overview of reponsive menu solutions