Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mlms13/navtacular
A horizontal navigation bar with menus that doesn't depend on Javascript for core functionality.
https://github.com/mlms13/navtacular
Last synced: 25 days ago
JSON representation
A horizontal navigation bar with menus that doesn't depend on Javascript for core functionality.
- Host: GitHub
- URL: https://github.com/mlms13/navtacular
- Owner: mlms13
- Created: 2012-07-30T15:32:30.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-03-27T14:57:45.000Z (over 9 years ago)
- Last Synced: 2024-04-14T13:40:50.950Z (7 months ago)
- Language: CSS
- Size: 720 KB
- Stars: 4
- Watchers: 4
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Navtacular 2.0
==============
Navtacular is a robust, easy-to-use navigation system. Built with logically structured HTML and CSS, Navtacular can be easily customized for use in any website.
Features
------------------------
- Fully responsive, mobile-first
- Dropdown menus, including wide menus and "mega" menus
- Javascript is an optional enhancement (except for old IE)
- Easy theming, and several themes included by default
- Basic support for all modern browsers, including IE7+
- Just under 2KB CSS gzipped (plus ~120 lines of optional Javascript)
Using Navtacular
-------------------------
Navtacular should work well on its own in modern browsers, but to get the most out of it (and to fallback nicely for old browsers), there are some dependencies:
1. A build of [Modernizr.js](http://modernizr.com/download/) that tests for display-table, flexbox, and flexbox-legacy
2. The `html5shiv`, if you plan on using a `nav` element and you want to support IE < 9. `html5shiv` is included with Modernizr
3. [Respond.js](https://github.com/scottjehl/Respond), if you don't want old IE to use the mobile layout
4. jQuery, if you want to provide a better experience to mobile browsers that have Javascript enabled
5. An icon font (like [FontAwesome](http://fontawesome.io/)) that includes icons named `icon-reorder` and `icon-caret-down`. The demo includes a simple icon font if you are not already using one.
Structure your HTML thusly:
```html
Navigation
```
Admittedly, that's a lot of classes. The structure is inspired by [BEM](http://bem.info/), and while it makes the markup a little more verbose, it makes the CSS much, much simpler (and easier to override).
You could accomplish the same thing without all the classes (just look at Navtacular 1.0), but you end up with a lot of parent-child selecting in your CSS, which causes all sorts of specificity headaches.
Browser Support
-------------------------
- Modern desktop browsers (Chrome, Firefox, Opera, IE10+, and Safari) are fully supported. With JS enabled, they will use Flexbox.
- IE9 uses `display: table`. The JS-enabled responsive nav requires Respond.js
- IE8 uses `display: table` and depends on JS
- IE7 falls back to `float: left` and depends on JS
- iOS 6+ and Chrome for Android have both been tested with JS and work as expected (nav slides in from the right). With JS disabled, nav should be blocky but functional.
Options and Customization
-------------------------
Navtacular 2 includes four themes: dark, tan, blue and simple. You can include these themes by adding the class `navtacular-theme-` to your root `.navtacular` element.
Menu appearance can be controlled by adding an additional class to the `.navtacular-menu` item:
| Class | Description |
|---------|-------------|
| `.cols` | All `.navtacular-menu-group` children will be arranged in columns. |
| `.mega` | Similar to `.cols`, but the menu will also stretch to the full width of the navbar. |
In order to allow the menu to slide out when on small screens, the js plugin needs to know what holds the content. If you have the navbar nested more than one level past a content container, you will need to specify what element to move when on small screens. This is set when calling the js plugin.
| Option | Value |
|--------|-------|
| `navParent` | jQuery object or selector |
```
$(document).ready( function() {
$('.navtacular').navtacular({
navParent: '.container'
});
});
```
Contributing
-------------------------
If you want to help out with development, it will be much appreciated. Assuming you already have [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) installed, you'll want to install [Gulp](http://gulpjs.com/) globally: `npm install -g gulp`
After you have Gulp installed, run `npm install` inside the Navtacular directory to install all dependencies. Then, you can run `gulp` to build the project or `gulp server` to start up a simple server, open your default browser to the Navtacular demo page, and automatically reload the page when changes are saved.
Open a pull request with your changes when you're ready. No need to minify first; I only intentionally minify when making a new release.