https://github.com/alalfakawma/easyHex

Easy Chain Hex Menu Builder
https://github.com/alalfakawma/easyHex

css hexagon javascript

Last synced: 5 days ago
JSON representation

Easy Chain Hex Menu Builder

• Host: GitHub
• URL: https://github.com/alalfakawma/easyHex
• Owner: alalfakawma
• Archived: true
• Created: 2017-03-13T12:48:16.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-16T10:10:25.000Z (over 7 years ago)
• Last Synced: 2024-08-01T12:30:16.927Z (3 months ago)
• Topics: css, hexagon, javascript
• Language: JavaScript
• Size: 15.6 KB
• Stars: 8
• Watchers: 0
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - alalfakawma/easyHex - Easy Chain Hex Menu Builder (javascript)

README

        
# easyHex

Live Demo - http://codepen.io/alalfakawma/pen/YZrQqW

Easy Chain Hex Menu Builder

Import it to your html file

You can use the function createHex to create the Hexagonal Menu.

First create a div with a class of hexCont, and inside another div that you want the hexagons to be on

    


		.....

    


As long as you wrap your element with hexCont, it should work.

- *ALL hexagons are stored in hexes[]*, which you can refer to after you add them in by hexes[index].

- You can also use childNodes[] array to access the ones inside the sub-menus, which makes it easier. Like hexes[1].childNodes[2].

- When referring to childNodes, always start from 2, since 0 is the SVG hex, and 1 is the Text class div.

    *createHex(element, parentSize, childSize, childCol, parentCol, all, clickColor, first, second, third, fourth, fifth, sixth)*

* element = the element id/class, etc where you want the menu to be.

* parentSize = the size of the main Hexagon.

* childSize = size of it's children(max-6).

* childCol = color of children.

* parentCol = color of parent hex.

* all = (true/false) - true will show all hexagons.

* clickColor = the color of the hexagon when clicked.

* 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.

Target the hexagon from the createHex. Eg - 

	var getHex = document.getElementsById('hexagon');

	createHex(getHex, 50, 50, '#874d4d', '#874d4d', null, '#a7c692', true, null, true, null, true, null);

Or the short version to get all 6 sub-menus

	createHex(getHex, 50, 50, '#874d4d', '#874d4d', true);

In order to add text or any HTML element inside the Hexagons, you can use the *text()* function.

- Create text's only after defining all hexagon sub-menus.

	*text(element, text, color, size, weight, padding, cc)*

* element = the element id/class, etc where you want the menu to be in.

* text = the text, in string form. You can use links, img, etc.

* color = set text color.

* size = text size (eg. '25px') (default 16px).

* weight = text weight (eg. '700').

* padding = padding of the div text element (default 20px)

* cc = custom classname for the text object, this will add on to the text class

Eg - 

	text(hexes[2], 'About Us', '#fff', '20px', '700');

# also parentSize and childSize should be same for now, need some math for the workaround which I can't think of yet.