Author: | micjamking |
---|---|
Views Total: | 3,083 views |
Official Page: | Go to website |
Last Update: | November 4, 2019 |
License: | MIT |
Preview:

Description:
navigataur.css is a pure CSS responsive navigation solution that converts the regular navbar into a dropdown menu with a toggle button when the screen size reaches a specific breakpoint.
Based on checkbox input and CSS media queries.
How to use it:
1. Download and place the stylesheet navigataur.css
in the header of the document.
<link href="navigataur.css" rel="stylesheet" />
2. Create a checkbox input for the menu toggle behavior.
<input type="checkbox" id="toggle" />
3. The HTML structure for the responsive navbar.
<div> <label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label> <ul class="menu"> <li><a href="#">CSS</a></li> <li><a href="#">Script</a></li> <li><a href="#">COM</a></li> <li><a href="#">Example</a></li> </ul> </div>
4. Override the default styles & breakpoints of the responsive menu.
- Media queries should be edited in both style sections if you require a different breakpoint for your navigation.
- Toggle class & menu anchor tags in list items have box-sizing: border-box style property to allow padding inside the container without conflicting with the layout.
@media only screen and (max-width: 768px){ .menu{ background: #FFFFFF; border-top: 1px solid #51C1F1; } .menu, .menu > li, .menu > li > a{ height: auto; } .menu > li > a{ padding: 15px 15px; } .menu > li > a:hover, .menu > li > a:focus{ background: #F2F2F2; box-shadow: inset 5px 0px #51C1F1; padding: 15px 15px 15px 25px; } .toggle:after { content: attr(data-open); display: block; width: 200px; margin: 33px 0; padding: 10px 50px; background: #51C1F1; -webkit-border-radius: 2px; border-radius: 2px; text-align: center; font-size: 12px; color: #FFFFFF; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toggle:hover:after{ background: #45ABD6; } #toggle:checked + div .toggle:after{ content: attr(data-close); } }