Google Inspired Popover Menu In Pure CSS

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>