Skip to content

Latest commit

 

History

History
60 lines (46 loc) · 1.65 KB

README.md

File metadata and controls

60 lines (46 loc) · 1.65 KB
Raw

SpacedOut

A small CSS/JS library to recreate the slide menu found in the atmospherejs site -- proper credits to the studio who built atmoshperejs.com.

SpacedOut doesn't depend on jQuery. The CSS file doesn't include normalize or reset. Parts of the js code are inspired from Hakim's Avgrund

Download

Basic Template and Usage

It's pretty straightforward :)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/spaced-out.css" type="text/css" />
  <script src="js/spaced-out.js"></script>
</head>
<body>
  <div class="so-page-wrapper">
    <aside class="so-page-menu">
      <div class="so-menu-content">
        <a>Home</a>
        <a>About</a>
        <a>Contact</a>
      </div>
    </aside>
    <div class="so-content-overlay">
    </div>
    <div class="so-content">
      <a href="#" class="so-menu-toggle">
        Open Menu
      </a>
    </div>
  </div>

  <script type="text/javascript">
    SpacedOutMenu.install();
  </script>
</body>
</html>

This installs event handlers to the button with the .so-menu-toggle class. The button is binded with event handlers that open and close the menu.

SpacedOutMenu.install()

This uninstalls those event handlers

SpacedOutMenu.uninstall()

License

Apache License v2