Author: | andornagy |
---|---|
Views Total: | 129,895 views |
Official Page: | Go to website |
Last Update: | March 13, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS responsive menu created by andornagy that automatically changes to a toggleable dropdown menu at a specified breakpoint based on CSS3 media queries.
How to use it:
Create a regular multi-level navigation menu using nested unordered list. It uses checkbox & label technique to toggle sub menus.
<nav> <div id="logo">Your Logo here</div> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li><a href="#">Home</a></li> <li> <!-- First Tier Drop Down --> <label for="drop-1" class="toggle">Service +</label> <a href="#">Service</a> <input type="checkbox" id="drop-1"/> <ul> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul> </li> <li> <!-- First Tier Drop Down --> <label for="drop-2" class="toggle">Portfolio +</label> <a href="#">Portfolio</a> <input type="checkbox" id="drop-2"/> <ul> <li><a href="#">Portfolio 1</a></li> <li><a href="#">Portfolio 2</a></li> <li> <!-- Second Tier Drop Down --> <label for="drop-3" class="toggle">Works +</label> <a href="#">Works</a> <input type="checkbox" id="drop-3"/> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Python</a></li> </ul> </li> </ul> </li> <li><a href="#">Blog</a></li> <li><a href="#">Submit</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>
The core CSS styles for the navigation menu.
nav { margin: 0; padding: 0; background-color: #254441; } #logo { display: block; padding: 0 30px; float: left; font-size: 20px; line-height: 60px; } nav:after { content: ""; display: table; clear: both; } nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { margin: 0px; display: inline-block; float: left; background-color: #254441; } nav a { display: block; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; } nav ul li ul li:hover { background: #000000; } nav a:hover { background-color: #000000; } nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display: inherit; } nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } nav ul ul ul li { position: relative; top: -60px; left: 170px; } li > a:after { content: ' +'; }
.toggle, [id^=drop] { display: none; }
li > a:only-child:after { content: ''; }
The CSS3 media queries to define how the navigation menu works on mobile devices (screen size < 768px).
@media all and (max-width : 768px) { #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } nav { margin: 0; } .toggle + a, .menu { display: none; } .toggle { display: block; background-color: #254441; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; border: none; } .toggle:hover { background-color: #000000; } [id^=drop]:checked + ul { display: block; } nav ul li { display: block; width: 100%; } nav ul ul .toggle, nav ul ul a { padding: 0 40px; } nav ul ul ul a { padding: 0 80px; } nav a:hover, nav ul ul ul a { background-color: #000000; } nav ul li ul li .toggle, nav ul ul a { background-color: #212121; } nav ul ul { float: none; position: static; color: #ffffff; } nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; } } @media all and (max-width : 330px) { nav ul li { display: block; width: 94%; } }
I have issue when adding more additional item and sub menu no longer line up correctly when resize down to smaller device. Is there a way to add more items to the list without modify css every time? Thanks.
This excellent menu was a very good starting point to create my own mobile navigation menu. Thanks a lot for sharing, Andor!
Hello! I was just wondering what the nav:after is supposed to achieve. I’ve been trying to follow line by line and I’m stuck here at the moment.
I love the simplicity of your menu but could not get the mobile feature to work. The menu appears the same on my desktop and all mobile devices. Did I miss something?
This menu is exactly what I’ve been looking for. But! On a mobile device when you click on a menu and it drops down, it will not close unless you click a link. How can I make it close by clicking outside the menu?
but this menu is not working on iphone5s
Can you help me with this?
Thank you so much for sharing. this is exactly what i want. unfortunately my skills are pretty basic and i dont know how to set it up always to start collapsed on mobile devices. i mean when i load the page on a device with narrow screen the menu is expanded and the user will not have a look at the content. i want the default initial position collapsed for narrow screens and always expanded for wide screens. can you advice me what to do?
Hi. This is a great menu thanks. There is one thing it doesn’t do which I need.
In the mobile version it doesn’t seem possible to have a link on a parent item. The parent item expands the relevant submenu but can’t actually link to a page. Is this something I could modify perhaps?
Many thanks in advance.
This all seems to work fine on desktop, even changes modes when you resize the browser. But I’ve tried this on an IPAD AIR and also a older galaxy3. Both cases, it displays the desktop view.
What could I be doing wrong, or is this not compatible on all mobile devices?