https://github.com/levidurfee/mobile-nav
User friendly mobile navigation for displaying parent pages as a child.
https://github.com/levidurfee/mobile-nav
Last synced: 5 months ago
JSON representation
User friendly mobile navigation for displaying parent pages as a child.
- Host: GitHub
- URL: https://github.com/levidurfee/mobile-nav
- Owner: levidurfee
- License: apache-2.0
- Created: 2015-08-28T13:34:37.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-10T22:23:07.000Z (almost 11 years ago)
- Last Synced: 2025-02-27T00:50:18.550Z (over 1 year ago)
- Language: HTML
- Size: 168 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mobile-nav
User friendly mobile navigation for displaying parent pages as a child.
If you use a CMS that generates the navigation for you, and you need the parent page in the child ul, this will **definitely** help.
## demo
[click here for the demo](https://cdn.ween.io/j/demo.html).
## usage
The main ul has to have a class of `navigation`.
The top level li's need to have a class of `level-1`.
The above mentioned can be altered in the [nav.js](https://github.com/levidurfee/mobile-nav/blob/master/nav.js) file.
## example html
### script src
```html
```
### nav block
```html
```
## example js
```js
$(document).ready(function() {
$('.navigation > li > a').each( function(){
var $this = $(this);
$newLI = $('
$newLI.insertBefore( $this.next('ul').find('.first') );
});
$("ul li ul").hide();
$(".level-1").click(function(event) {
$("ul li ul").hide();
$(this).children("li ul").toggle();
});
$(".level-1 > a").click(function(event) {
event.preventDefault();
});
});
```
View the demo on [jsfiddle](http://jsfiddle.net/levidurfee/bmms2vvu/1/).