{"id":20671136,"url":"https://github.com/allnulled/angular-simple-nav-menu","last_synced_at":"2025-07-01T09:07:51.764Z","repository":{"id":57179144,"uuid":"137764496","full_name":"allnulled/angular-simple-nav-menu","owner":"allnulled","description":"Simple navigation menu implementation for AngularJS.","archived":false,"fork":false,"pushed_at":"2018-07-07T20:37:55.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-12T06:39:00.115Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/allnulled.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":"2018-06-18T14:43:41.000Z","updated_at":"2018-07-07T20:37:56.000Z","dependencies_parsed_at":"2022-09-09T19:01:28.465Z","dependency_job_id":null,"html_url":"https://github.com/allnulled/angular-simple-nav-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/allnulled/angular-simple-nav-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fangular-simple-nav-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fangular-simple-nav-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fangular-simple-nav-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fangular-simple-nav-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allnulled","download_url":"https://codeload.github.com/allnulled/angular-simple-nav-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fangular-simple-nav-menu/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262933317,"owners_count":23386784,"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-11-16T20:25:24.314Z","updated_at":"2025-07-01T09:07:51.744Z","avatar_url":"https://github.com/allnulled.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-simple-nav-menu\n\nDirectives for AngularJS (version 1.x) to ease the creation of the typical navigation menu.\n\nIt is composed by 3 directives:\n\n1.  `\u003cnav-menu\u003e`: layer that will appear and disappear.\n2.  `\u003cnav-item\u003e`: layer that, when clicked, will make the `\u003cnav-menu\u003e` appear and disappear. Use it when the element must be inside the `\u003cnav-menu\u003e` layer.\n3.  `\u003cnav-button\u003e`: layer that, when clicked, will make the `\u003cnav-menu\u003e` appear and disappear. Use it when the element must be outside the `\u003cnav-menu\u003e` layer.\n\n## 1. Installation\n\n#### 1. Import the module from NPM:\n\n~$ `npm install --save angular-simple-nav-menu`\n\n#### 2. Import the module from your AngularJS application\n\n##### 2.1. In your HTML:\n\n...and after having imported the AngularJS (v.1.x):\n\n```html\n\u003cscript src=\"node_modules/angular-simple-nav-menu/src/module.simple-nav-menu.js\"\u003e\u003c/script\u003e\n\u003clink   href=\"node_modules/angular-simple-nav-menu/src/module.simple-nav-menu.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n```\n\n##### 2.2. In your JavaScript, when you initialize the application:\n\n```js\nangular.module(\"MyApp\", [\"SimpleNavMenu\"]);\n```\n\n## 2. Usage\n\nThis is a self-explanatory example, using the directives as elements:\n\n```html\n\t\u003cnav-button class=\"nav-button\"\u003eShows/Hides the navigation menu when it is clicked.\u003c/nav-button\u003e\n\t\u003cnav-menu class=\"nav-menu\"\u003e\n\t\t\u003ch1\u003eTitle of the navigation menu\u003c/h1\u003e\n\t\t\u003cnav-item\u003eItem 1 of the navigation menu. Shows/Hides the navigation menu when it is clicked.\u003c/nav-item\u003e\n\t\t\u003cnav-item\u003eItem 2 of the navigation menu. Shows/Hides the navigation menu when it is clicked.\u003c/nav-item\u003e\n\t\t\u003cnav-item\u003eItem 3 of the navigation menu. Shows/Hides the navigation menu when it is clicked.\u003c/nav-item\u003e\n\t\t\u003cnav-item\u003eItem 4 of the navigation menu. Shows/Hides the navigation menu when it is clicked.\u003c/nav-item\u003e\n\t\u003c/nav-menu\u003e\n```\n\nYou only need to know that:\n\n* The directives can be used as attributes too.\n\n* The width of the **`.nav-menu`** is set to **`250px`** in the css file. Override it from other stylesheet, or directly from the source file if you need to adapt it to other dimensions.\n\n* The only 2 CSS rules applied are: **`.nav-menu--inner--api`** and **`.nav-menu--inner--api.activated`**. The CSS file is less than 10 lines, so you can modify it, but it should not be necessary, except for the `width` of the **`\u003cnav-menu\u003e`**.\n\n## 3. Test\n\nCurrently, there are no test for this project.\n\nHowever, you can open a very simple example if you go to: `test/simple-example.html`\n\nIt is important that your browser lets you load files from external CDN and from other (upper) paths for it to work. If so, you will be able to run the example okay.\n\n## 4. Conclusion\n\nUse this library as you like, this is a very simple module that can ease a bit the typical navigation menu for an AngularJS application.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fangular-simple-nav-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallnulled%2Fangular-simple-nav-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fangular-simple-nav-menu/lists"}