https://github.com/oskarrough/rough-navtoggle
Toggle your navigation — useful for smaller screens
https://github.com/oskarrough/rough-navtoggle
Last synced: 11 months ago
JSON representation
Toggle your navigation — useful for smaller screens
- Host: GitHub
- URL: https://github.com/oskarrough/rough-navtoggle
- Owner: oskarrough
- License: mit
- Created: 2013-02-21T14:08:41.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2014-07-23T10:43:17.000Z (almost 12 years ago)
- Last Synced: 2025-07-09T04:49:09.253Z (12 months ago)
- Language: CSS
- Size: 203 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Rough: NavToggle
Component for easy, togglable (is that a word?) navigation.
For smaller screens you might want to hide your navigation behind a "Menu" button. This will help you.
## Installation
* [Bower](http://bower.io/): `bower install --save rough-navtoggle`
* Download: [zip](https://github.com/oskarrough/rough-navtoggle/zipball/master)
* Git: `git clone https://github.com/oskarrough/rough-navtoggle.git`
## Get started
1. Reference jQuery and ``
2. Reference ``
3. You will need a container with the class: `NavToggle`
4. Call the plugin using using `$('.Nav--togglable').roughNavToggle();`
## How does it work?
The script will automatically insert a styled button (to toggle the navigation) just before the navigation it self.
When the screen is small enough (decided by a mediaquery in the CSS) the nav will hide and the button will appear.
## Tips
* Compile the scss using `sass --watch rough-navtoggle.scss:rough-navtoggle.css`
* Browser support from IE9 and up (you don't need a navigation toggle for browsers without mediaquery support anyway)