Slack.com estilo de navegación adaptable con Pure CSS-Slackie. CSS
| Autor: | klombomb |
|---|---|
| Views Total: | 2,991 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 22, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Slackie. CSS es una implementación de CSS pura de una navegación de sitio adaptable y móvil, inspirada en < a href = "https:/slack.com/" target = "_ blank" rel = "noopener" > Slack. com .
Funcionamiento
Incluya el Slackie. CSS en la sección head del documento HTML.
<link href="dist/slackie.css" rel="stylesheet">
Incluye el Font awesome 4 para los iconos de alternancia de menú (opcional).
<link rel="stylesheet" href="font-awesome.min.css">
Cree una navegación de escritorio como esta:
<nav role="navigation" class="desktop-slackie"> <a href="#" class="logo"> Brand </a> <a href="#" class="slackie-action-btn"> Action Button </a> <a href="#mobile-nav" class="mobile-nav-trigger icon"> <i class="fa fa-plus"></i> </a> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
Cree una navegación móvil como esta:
<nav role="navigation" id="mobile-nav" class="mobile-slackie"> <a href="##" class="logo">Brand</a> <a href="#close" class="close-slackie-mobile"> <i class="fa fa-close"></i> </a> <ul> <li><a href="##">Home</a></li> <li><a href="##">About</a></li> <li><a href="##">Contact</a></li> </ul> <a href="##" class="slackie-action-btn"> Action Button </a> </nav>
Eso es todo.
