{"id":18311051,"url":"https://github.com/dmitriyakkerman/mobile-nav-js","last_synced_at":"2025-04-09T12:11:03.939Z","repository":{"id":42647979,"uuid":"259577668","full_name":"dmitriyakkerman/mobile-nav-js","owner":"dmitriyakkerman","description":"Mobile navigation module for your website, which gives you possibility to get rid of routine","archived":false,"fork":false,"pushed_at":"2023-01-07T07:36:16.000Z","size":1208,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-30T02:37:37.549Z","etag":null,"topics":["javascript","menu","mobile-menu","mobile-nav","mobile-navigation","multilevel-menu","nav","navigation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmitriyakkerman.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":"2020-04-28T08:31:31.000Z","updated_at":"2021-10-28T12:45:09.000Z","dependencies_parsed_at":"2023-02-06T15:01:42.042Z","dependency_job_id":null,"html_url":"https://github.com/dmitriyakkerman/mobile-nav-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fmobile-nav-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fmobile-nav-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fmobile-nav-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmitriyakkerman%2Fmobile-nav-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmitriyakkerman","download_url":"https://codeload.github.com/dmitriyakkerman/mobile-nav-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247965453,"owners_count":21025380,"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":["javascript","menu","mobile-menu","mobile-nav","mobile-navigation","multilevel-menu","nav","navigation"],"created_at":"2024-11-05T16:16:19.044Z","updated_at":"2025-04-09T12:11:03.918Z","avatar_url":"https://github.com/dmitriyakkerman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/dmitriyakkerman/mobile-nav-js.svg?branch=master)](https://travis-ci.org/github/dmitriyakkerman/mobile-nav-js)\n\nMobile navigation module for your website, which gives you possibility to get rid of routine\n\n**Example**\n\nhttps://codepen.io/mickyholbrook/pen/OJRXrvd\n\n**Installation**\n\n**npm**\n\n    npm i mobile-nav-js\n    \nLoad the required JS to your entry JS file:\n```js    \nlet MobileNav = require('mobile-nav-js');   \nor    \nimport MobileNav from 'mobile-nav-js';\n```    \nLoad the required stylesheet to your entry CSS file:\n```css\n@import \"node_modules/mobile-nav-js/index\";\n```    \n**Cloning git repository**\n\n    1. Go to your project directory\n    2. git clone https://github.com/dmitriyakkerman/mobile-nav-js.git .\n  \n  Put the required stylesheet link in HEAD tag:\n```html  \n\u003clink rel=\"stylesheet\" href=\"./dist/css/mobile-nav.min.css\"\u003e\n```     \n    \n  Put the script at the bottom of your markup: \n```html\n\u003cscript src=\"./dist/js/mobile-nav.min.js\"\u003e\u003c/script\u003e      \n``` \n**Usage**\n     \n1. Create typical menu-toggler/burger-menu(sometimes you need more than one toggler so you can use several ones if needed).\n2. Create mobile navigation component with nesting and toggle elements. \n```html      \n\u003cdiv class=\"mobile-toggler toggler1\"\u003e☰\u003c/div\u003e\n\n\u003cul class=\"mobile-nav\" role=\"navigation\"\u003e\n    \u003cli\u003e\n        \u003ca href=\"\"\u003e1\u003c/a\u003e\n        \u003cbutton class=\"link-toggler\"\u003e+\u003c/button\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ca href=\"\"\u003e1.1\u003c/a\u003e\n                \u003cbutton class=\"link-toggler\"\u003e+\u003c/button\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\n                        \u003ca href=\"\"\u003e1.1.1\u003c/a\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"\"\u003e2\u003c/a\u003e\n        \u003cbutton class=\"link-toggler\"\u003e+\u003c/button\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ca href=\"\"\u003e2.1\u003c/a\u003e\n                \u003cbutton class=\"link-toggler\"\u003e+\u003c/button\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\n                        \u003ca href=\"\"\u003e2.1.1\u003c/a\u003e\n                        \u003cbutton class=\"link-toggler\"\u003e+\u003c/button\u003e\n                        \u003cul\u003e\n                            \u003cli\u003e\n                                \u003ca href=\"\"\u003e2.1.1.1\u003c/a\u003e\n                            \u003c/li\u003e\n                        \u003c/ul\u003e\n                    \u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```         \n**Initialization**\n\n1. Specify root selector in \"nav\" option. \n2. Specify \"navTogglers\" option: one or multiple nav toggle selectors inside \"el\" option and media breakpoint of when your nav toggle elements are going to be visible inside \"responsive\" option.\n3. Specify link toggle selector in \"linkTogglers\" option.\n4. Specify \"bodyClose\" option if navigation should be closed after \"click\" event fired out navigation root element(\"false\" by default).\n5. Specify \"preventParentClick\" option for preventing \"click\" event on links, which contain children(\"false\" by default).\n\n```js \ndocument.addEventListener('DOMContentLoaded', function() {\n    new MobileNav({\n        nav: '.mobile-nav',\n        navTogglers: {\n          el: '.mobile-toggler', //or '.toggler1, .toggler2' if you have different togglers\n          responsive: 991\n        },\n        linkTogglers: '.link-toggler',\n        bodyClose: true,\n        preventParentClick: true\n    })\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriyakkerman%2Fmobile-nav-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmitriyakkerman%2Fmobile-nav-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmitriyakkerman%2Fmobile-nav-js/lists"}