Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
node_modules
Expand Down
6 changes: 5 additions & 1 deletion .jshintrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"bitwise" : true,
"camelcase" : true,
"curly" : true,
"curly" : false,
"eqeqeq" : true,
"forin" : false,
"immed" : true,
Expand All @@ -26,10 +26,14 @@
"addEvent" : true,
"removeEvent" : true,
"addClass" : true,
"hasClass" : true,
"removeClass" : true,
"setAttributes" : true,
"getChildren" : true,
"elemsByClassName" : true,
"forEach" : true,
"next" : true,
"closest" : true,
"options" : true,
"opts" : true,
"nav" : true
Expand Down
18 changes: 13 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,17 @@

### Responsive navigation plugin without library dependencies and with fast touch screen support.

[Responsive Nav](http://responsive-nav.com) is a tiny JavaScript plugin which weighs only ~1kb minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from `height: 0` to `height: auto`, which isn’t normally possible with CSS3 transitions.
[Responsive Nav](http://responsive-nav.com) is a tiny JavaScript plugin which weighs only 1.5kb minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from `height: 0` to `height: auto`, which isn’t normally possible with CSS3 transitions.


#### Features:

* Simple, semantic markup.
* Weighs only ~1kb minified and Gzip’ed.
* Weighs only 1.5kb minified and Gzip’ed.
* Doesn’t require any external library.
* Uses CSS3 transitions and touch events.
* Supports RequireJS and multiple instances.
* Supports nested sub-navigations up to 3 levels deep.
* Removes the 300ms delay between a physical tap and the click event.
* Makes it possible to use CSS3 transitions with height: auto.
* Built with accessibility in mind, meaning that everything works on screen readers and with JavaScript disabled, too.
Expand Down Expand Up @@ -95,19 +96,24 @@ See the [example code here](https://github.com/viljamis/responsive-nav.js/blob/m
`nav.resize();`


# Changing the breakpoint

Breakpoint is defined in the [responsive-nav.css](https://github.com/viljamis/responsive-nav.js/blob/master/responsive-nav.css) file. Responsive Nav checks on window resize and on orientation change if the navigation toggle has `display: none;` and based on that switches between mobile and desktop states.


# Supporting old IEs

Even though Responsive Nav works even on IE6, you should remember that IE8 and under do not support media queries and thus can’t change between "small screen" and "large screen" styles. If needed, you can add Media Query support for those browsers using [respond.js](https://github.com/scottjehl/Respond). There’s an example [here](https://github.com/viljamis/responsive-nav.js/tree/master/demos/ie-support-using-respondjs).

When old IE support is needed you should stick to using only ID selectors with Responsive Nav. That’s because the plugin uses `getElementById` method by default which is widely supported in all browsers. When using classes or element selectors `querySelector` will be used instead which isn’t supported in old IEs.

`closeOnNavClick` option is the only thing that doesn’t work in IE8 & under, but the functionality is built using progressive enhancement, so nothing will break if you want to enable it for other browsers.
When old IE support is needed you should stick to using ID selector with Responsive Nav. That’s because the plugin uses `getElementById` method by default which is widely supported in all browsers. When using classes or element selectors `querySelector` will be used instead which isn’t supported in old IEs.


# Things to keep in mind

Calculated Max-height doesn't account for top/bottom padding on `.nav-collapse` (this is on purpose). If you need to add padding inside the nav, you can apply it to any other element, for example the `<ul>` inside `.nav-collapse`.

Currently, you can't use "closeOnNavClick" option and sub-navigations at the same time (this is on purpose too, as it wouldn't make much sense anyway).



# Tested on the following platforms
Expand Down Expand Up @@ -219,6 +225,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
# Changelog


`1.0.40` (2014-03-XX) - Major update. Adds support for nested sub-navigations!!! Currently supports navigations up to 3 levels. Sub-navigation toggles use the same method as the main navigation toggle to get rid of the 300ms tap delay, so they feel FAST. "closeOnNavClick" now works on old IEs too, so no more features that only work in modern browsers. Fixes a bug which caused the navigation to sometimes not toggle. Sub-navigations are fully keyboard accessible too (using tab key and enter).

`1.0.32` (2014-03-05) - Ditching the `[].forEach.call(NodeList)` hack to make the code more sensible and future-proof.

`1.0.31` (2014-03-02) - Fixes Chrome Mobile rendering issue.
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "responsive-nav",
"version": "1.0.32",
"version": "1.0.40",
"main": [
"responsive-nav.css",
"responsive-nav.js"
Expand Down
2 changes: 1 addition & 1 deletion client/dist/bower/bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "responsive-nav",
"version": "1.0.32",
"version": "1.0.40",
"main": [
"responsive-nav.css",
"responsive-nav.js"
Expand Down
Loading