Author: | kalash14 |
---|---|
Views Total: | 4,193 views |
Official Page: | Go to website |
Last Update: | February 22, 2019 |
License: | MIT |
Preview:

Description:
A modern CSS only popover navigation menu as you seen on Google.com.
How to use it:
Load the main stylesheet in the head section of the document.
<link rel="stylesheet" href="css/main.min.css" />
Create the header navigation following the markup structure as follows:
<header class="header"> <nav class="navigation"> <ul class="navigation-list"> <li class="navigation-list-item"> <a href="#" class="navigation-link navigation-link-text" >Gmail</a > </li> <li class="navigation-list-item"> <a href="#" class="navigation-link navigation-link-text" >Images</a > </li> <li class="navigation-list-item"> <input id="navigation-panel-input" type="checkbox" name="navigation-panel" class="navigation-panel-input hidden-checkbox" /> <label for="navigation-panel-input" class="navigation-panel-label" > <span class="navigation-panel-label-icon"></span> </label> <div class="navigation-services-list" aria-label="services" aria-hidden="true" > <div class="navigation-services-list-parentwrap"> <ul class="navigation-services-list-wrap"> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-plus" ></span> Google+ </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-search" ></span> Search </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-youtube" ></span> YouTube </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-maps" ></span> Maps </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-news" ></span> News </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-gmail" ></span> Gmail </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-translator" ></span> Translator </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-disk" ></span> Drive </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-calendar" ></span> Calendar </a> </li> <li class="navigation-services-list-item"> <a href="#" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-words" ></span> Adwords </a> </li> </ul> <div class="more-services-control-wrap" > <input type="checkbox" class="more-services-checkbox hidden-checkbox" id="more-services-checkbox" /> <label for="more-services-checkbox" class="more-services-label" tabindex="0" ><span role="button" type="button">More</span></label > <hr class="more-services-divider" /> <ul class="navigation-services-list-wrap navigation-services-list-wrap-hidden" aria-hidden="true" > <li class="navigation-services-list-item" > <a href="" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-business" ></span> Business </a> </li> <li class="navigation-services-list-item" > <a href="" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-docs" ></span> Docs </a> </li> <li class="navigation-services-list-item" > <a href="" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-news" ></span> News </a> </li> <li class="navigation-services-list-item" > <a href="" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-photos" ></span> Photos </a> </li> <li class="navigation-services-list-item" > <a href="" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-sheets" ></span> Sheets </a> </li> <li class="navigation-services-list-item" > <a href="" class="navigation-services-list-link" > <span class="navigation-service-icon navigation-service-icon-slides" ></span> Slides </a> </li> </ul> </div> </div> </div> </li> <li class="navigation-list-item"> <a href="#" tabindex="0"> <span class="notification-icon"></span> </a> </li> <li class="navigation-list-item"> <a href="#"> <span class="profile-thumb-wrap"> <img src="./img/my-profile.png" alt="profile-thumb" class="profile-thumb-wrap" /> </span> </a> </li> </ul> </nav> </header>
Hi! Incredible menu, but … why doesn’t that menu close when I click away? And when I place it on a website, is it underneath other divs? I’ve tried z-index, but I couldn’t put it on top anyway.Hugs
I want to know that too.