This demo recreates the navigation of Teehan+Lax. I reverse engineered their menu and wrote my own code to achieve similar functionality. Read more about it in this blog post.
The navigation bar is being hidden once you start scrolling. As soon as you scroll up a few pixels it is shown. After that, when you scroll down again it gets hidden. When you have reached the bottom of this page the main menu reappears.
Improvements over original:
- Navigate only with keyboard (Tab + Enter / Space).
- Keyboard shortcuts (Esc / M).
- Firefox animation fix.
- Close navigation by clicking anywhere outside link area.
- iOS 7 like blurring of background.
Check out the repo on GitHub.
This is dummy content to fill the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam lectus, vestibulum in dui sit amet, consectetur accumsan nulla. Proin volutpat malesuada nisl a aliquam. Quisque sit amet sollicitudin ipsum, in interdum felis. Donec pretium diam sit amet ipsum suscipit viverra. Suspendisse eget nisi molestie, ullamcorper dui eget, suscipit arcu. Duis sem sem, scelerisque dictum elit in, dictum tristique justo. Praesent convallis magna eget magna sodales, eu vestibulum massa tincidunt. Pellentesque ut lectus sit amet odio semper dapibus. Nullam ornare vehicula faucibus. Aenean ut felis at dui faucibus semper non sed diam. In molestie vulputate leo, id placerat lacus rhoncus id. Duis non nisi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis venenatis nulla fringilla augue vehicula blandit. Suspendisse potenti.