https://github.com/dylanfoster/caramelbar.js
caramelBar.js is a lightweight sticky navbar jQuery plugin
https://github.com/dylanfoster/caramelbar.js
Last synced: about 2 months ago
JSON representation
caramelBar.js is a lightweight sticky navbar jQuery plugin
- Host: GitHub
- URL: https://github.com/dylanfoster/caramelbar.js
- Owner: dylanfoster
- License: mit
- Created: 2014-03-20T00:22:45.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-04-05T20:19:26.000Z (about 12 years ago)
- Last Synced: 2025-01-24T22:12:31.654Z (over 1 year ago)
- Language: JavaScript
- Size: 176 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#caramelBar.js
caramelBar.js is a lightweight sticky navbar jQuery plugin
##1. Setup
Include the latest jQuery Library as well as caramelBar.js just before your closing body tag
```html
```
##2. HTML Markup
```html
```
##3. CSS
Style your menu as you like.
```css
section#header_wrapper {
height: 90px;
width: 100%;
background: rgba(255,255,255,0.2);
}
ul.menu_wrapper {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
margin-top: 25px;
}
.menu_links {
position: relative;
font-family: 'Poller One';
font-size: 24px;
text-align: center;
display: inline-block;
width: calc(100%/4);
float: left;
}
```
##4. Usage
Call caramelBar on your header (`#header_wrapper`).
```javascript
$('#header_wrapper').caramelBar();
```
or with options:
```javascript
$('#header_wrapper').caramelBar({
"top":0, //set the top margin of the navigation bar
"left":0, //set the left margin of the navigation bar
"right":0, //set the right margin of the navigation bar
"width":"200px", //set the width of the navigation bar (must set height and width together)
"height":"400px", //set the height of the navigation bar(must set height and width together)
"spacing": 0 //used with height/width, sets the spacing between li elements
});
```
##5. Demo
http://www.dylan-foster.com/caramelBar
##Credits
[jQuery](http://api.jquery.com/)
##Contact
Copyright (C) 2014 Dylan foster
[Fostered Development](http://www.dylan-foster.com)
[Github](https://github.com/dylan947/)
[@dylfos](http://twitter.com/dylfos)
[+Fostered Development](https://plus.google.com/b/103850011544407258916/103850011544407258916/about)