Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsthatguy/simple-nav
package for creating a really simple responsive navigation
https://github.com/itsthatguy/simple-nav
Last synced: about 6 hours ago
JSON representation
package for creating a really simple responsive navigation
- Host: GitHub
- URL: https://github.com/itsthatguy/simple-nav
- Owner: itsthatguy
- Created: 2014-10-22T15:52:24.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-04-05T14:52:07.000Z (over 8 years ago)
- Last Synced: 2024-11-01T10:35:37.655Z (15 days ago)
- Language: CoffeeScript
- Size: 18.6 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# simple-nav
### Installation
```
npm install simple-nav --save
```
### Javascript
#### with NPM
```javascript
SimpleNav = require('simple-nav')
myNavigation = new SimpleNav({
// defaults
scrolledClass: 'scrolled'
expandedClass: 'open'
scrollTolerance: 120
gotoSpeed: 10
gotoAnchorTimer: 500
handleScrollTimer: 300
toggleMenuTimer: 300
});
```
### Scss
```scss
$small: "only screen and (min-width: 40.063em)";
nav.primary-navigation {
> h1 {
@include inline-block;
}
> .menu {
@include inline-icon('menu');
display: block;
position: absolute;
right: 10px;
top: 10px;
span { display: none; }
}
> ul.nav-links {
display: none;
float: right;
li {
@include inline-block;
margin-right: rem-calc(10px);
margin-top: rem-calc(12px);
}
}
.button {
@include inline-block;
margin-bottom: 0;
margin-top: rem-calc(-2px);
padding: rem-calc(4px 6px);
}
@media #{$small} {
> .menu { display: none; }
> ul.nav-links {
display: block;
}
}
// When the body tag has the open class applied
body.open & {
> ul.nav-links { display: block; }
}
}
```
## Markup
```html
Title
Menu
```