{"id":17579086,"url":"https://github.com/mlms13/navtacular","last_synced_at":"2025-10-25T19:39:56.519Z","repository":{"id":4123000,"uuid":"5234083","full_name":"mlms13/Navtacular","owner":"mlms13","description":"A horizontal navigation bar with menus that doesn't depend on Javascript for core functionality.","archived":false,"fork":false,"pushed_at":"2015-03-27T14:57:45.000Z","size":737,"stargazers_count":4,"open_issues_count":4,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-28T15:16:47.632Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"DallasMorningNews/django-rolodex","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mlms13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-07-30T15:32:30.000Z","updated_at":"2020-02-11T17:32:51.000Z","dependencies_parsed_at":"2022-09-03T12:30:39.060Z","dependency_job_id":null,"html_url":"https://github.com/mlms13/Navtacular","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/mlms13/Navtacular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FNavtacular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FNavtacular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FNavtacular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FNavtacular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlms13","download_url":"https://codeload.github.com/mlms13/Navtacular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlms13%2FNavtacular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266189677,"owners_count":23890065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-22T00:43:40.741Z","updated_at":"2025-10-25T19:39:51.482Z","avatar_url":"https://github.com/mlms13.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Navtacular 2.0\n==============\n\nNavtacular 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.\n\nFeatures\n------------------------\n\n- Fully responsive, mobile-first\n- Dropdown menus, including wide menus and \"mega\" menus\n- Javascript is an optional enhancement (except for old IE)\n- Easy theming, and several themes included by default\n- Basic support for all modern browsers, including IE7+\n- Just under 2KB CSS gzipped (plus ~120 lines of optional Javascript)\n\nUsing Navtacular\n-------------------------\n\nNavtacular 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:\n\n1. A build of [Modernizr.js](http://modernizr.com/download/) that tests for display-table, flexbox, and flexbox-legacy\n2. The `html5shiv`, if you plan on using a `nav` element and you want to support IE \u003c 9. `html5shiv` is included with Modernizr\n3. [Respond.js](https://github.com/scottjehl/Respond), if you don't want old IE to use the mobile layout\n4. jQuery, if you want to provide a better experience to mobile browsers that have Javascript enabled\n5. 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.\n\nStructure your HTML thusly:\n\n```html\n\u003cnav class=\"navtacular\"\u003e\n  \u003ch1 class=\"navtacular-label\"\u003eNavigation\u003c/h1\u003e\n  \u003cul class=\"navtacular-list\"\u003e\n    \u003cli class=\"navtacular-item\"\u003e\u003ca class=\"navtacular-link\" href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli class=\"navtacular-item\"\u003e\n      \u003ca class=\"navtacular-link\" href=\"#\"\u003eHome\u003c/a\u003e\n      \u003csection class=\"navtacular-menu\"\u003e\n        \u003csection class=\"navtacular-menu-group\"\u003e\n          \u003cul\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eMore Links\u003c/a\u003e\u003c/li\u003e\n            \u003cli\u003e\u003ca href=\"#\"\u003eMore Links\u003c/a\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/section\u003e\n      \u003c/section\u003e\n    \u003c/li\u003e\n    \u003cli class=\"navtacular-item\"\u003e\u003ca class=\"navtacular-link\" href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\nAdmittedly, 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).\n\nYou 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.\n\nBrowser Support\n-------------------------\n\n- Modern desktop browsers (Chrome, Firefox, Opera, IE10+, and Safari) are fully supported. With JS enabled, they will use Flexbox.\n- IE9 uses `display: table`. The JS-enabled responsive nav requires Respond.js\n- IE8 uses `display: table` and depends on JS\n- IE7 falls back to `float: left` and depends on JS\n- 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.\n\nOptions and Customization\n-------------------------\n\nNavtacular 2 includes four themes: dark, tan, blue and simple. You can include these themes by adding the class `navtacular-theme-\u003ccolor\u003e` to your root `.navtacular` element.\n\nMenu appearance can be controlled by adding an additional class to the `.navtacular-menu` item:\n\n| Class   | Description |\n|---------|-------------|\n| `.cols` | All `.navtacular-menu-group` children will be arranged in columns. |\n| `.mega` | Similar to `.cols`, but the menu will also stretch to the full width of the navbar. |\n\nIn 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.\n\n| Option | Value |\n|--------|-------|\n| `navParent` | jQuery object or selector |\n\n```\n$(document).ready( function() {\n  $('.navtacular').navtacular({\n    navParent: '.container'\n  });\n});\n```\n\nContributing\n-------------------------\n\nIf 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`\n\nAfter 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.\n\nOpen a pull request with your changes when you're ready.  No need to minify first; I only intentionally minify when making a new release.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlms13%2Fnavtacular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlms13%2Fnavtacular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlms13%2Fnavtacular/lists"}