Slack.com Style Responsive Navigation With Pure CSS – Slackie.css

Preview:

Description:

Slackie.css is a pure CSS implementation of a responsive, mobile-friendly site navigation inspired from Slack.com.

How to use it:

Include the Slackie.css in the head section of the html document.

<link href="dist/slackie.css" rel="stylesheet">

Include the Font Awesome 4 for menu toggle icons (Optional).

<link rel="stylesheet" href="font-awesome.min.css">

Create a desktop navigation like this:

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

Create a mobile navigation like this:

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

That’s it.