Menú popover inspirado en Google en CSS puro

Vista prévia

Descripción

Un moderno CSS sólo menú de navegación ventana emergente como se ve en Google.com.

Funcionamiento

Cargue la hoja de estilos principal en la sección head del documento.

<link rel="stylesheet" href="css/main.min.css" />

Cree la navegación de cabecera siguiendo la estructura de marcado de la siguiente manera:

<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>