{"id":13553325,"url":"https://github.com/alalfakawma/easyHex","last_synced_at":"2025-04-03T05:30:30.019Z","repository":{"id":187723943,"uuid":"84825682","full_name":"alalfakawma/easyHex","owner":"alalfakawma","description":"Easy Chain Hex Menu Builder","archived":true,"fork":false,"pushed_at":"2017-03-16T10:10:25.000Z","size":16,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-29T02:43:55.930Z","etag":null,"topics":["css","hexagon","javascript"],"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/alalfakawma.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,"governance":null}},"created_at":"2017-03-13T12:48:16.000Z","updated_at":"2023-01-28T14:11:57.000Z","dependencies_parsed_at":"2023-08-11T23:13:47.450Z","dependency_job_id":null,"html_url":"https://github.com/alalfakawma/easyHex","commit_stats":null,"previous_names":["alalfakawma/easyhex"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alalfakawma%2FeasyHex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alalfakawma%2FeasyHex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alalfakawma%2FeasyHex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alalfakawma%2FeasyHex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alalfakawma","download_url":"https://codeload.github.com/alalfakawma/easyHex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"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":["css","hexagon","javascript"],"created_at":"2024-08-01T12:02:22.135Z","updated_at":"2025-04-03T05:30:29.764Z","avatar_url":"https://github.com/alalfakawma.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","css"],"sub_categories":[],"readme":"# easyHex\n\nLive Demo - http://codepen.io/alalfakawma/pen/YZrQqW\n\nEasy Chain Hex Menu Builder\n\nImport it to your html file\n\nYou can use the function createHex to create the Hexagonal Menu.\n\nFirst create a div with a class of hexCont, and inside another div that you want the hexagons to be on\n\n    \u003cdiv class=\"hexCont\"\u003e\n\t\t.....\n    \u003c/div\u003e\n\nAs long as you wrap your element with hexCont, it should work.\n\n- *ALL hexagons are stored in hexes[]*, which you can refer to after you add them in by hexes[index].\n- You can also use childNodes[] array to access the ones inside the sub-menus, which makes it easier. Like hexes[1].childNodes[2].\n- When referring to childNodes, always start from 2, since 0 is the SVG hex, and 1 is the Text class div.\n\n    *createHex(element, parentSize, childSize, childCol, parentCol, all, clickColor, first, second, third, fourth, fifth, sixth)*\n\n* element = the element id/class, etc where you want the menu to be.\n* parentSize = the size of the main Hexagon.\n* childSize = size of it's children(max-6).\n* childCol = color of children.\n* parentCol = color of parent hex.\n* all = (true/false) - true will show all hexagons.\n* clickColor = the color of the hexagon when clicked.\n* first, second, third, fourth, fifth, sixth = (true/false) - set all to false if you intend on using this. This will specify specific positions of the hexagon child.\n\nTarget the hexagon from the createHex. Eg - \n\n\tvar getHex = document.getElementsById('hexagon');\n\tcreateHex(getHex, 50, 50, '#874d4d', '#874d4d', null, '#a7c692', true, null, true, null, true, null);\n\nOr the short version to get all 6 sub-menus\n\n\tcreateHex(getHex, 50, 50, '#874d4d', '#874d4d', true);\n\nIn order to add text or any HTML element inside the Hexagons, you can use the *text()* function.\n\n- Create text's only after defining all hexagon sub-menus.\n\n\t*text(element, text, color, size, weight, padding, cc)*\n\n* element = the element id/class, etc where you want the menu to be in.\n* text = the text, in string form. You can use links, img, etc.\n* color = set text color.\n* size = text size (eg. '25px') (default 16px).\n* weight = text weight (eg. '700').\n* padding = padding of the div text element (default 20px)\n* cc = custom classname for the text object, this will add on to the text class\n\nEg - \n\n\ttext(hexes[2], 'About Us', '#fff', '20px', '700');\n\n\n# also parentSize and childSize should be same for now, need some math for the workaround which I can't think of yet.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falalfakawma%2FeasyHex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falalfakawma%2FeasyHex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falalfakawma%2FeasyHex/lists"}