Create a menu for small screen devices using elements within the page. Example, from your website's main navigation.
<script defer src="https://cdn.jsdelivr.net/gh/madebygrant/kin-menu@1.0.1/dist/js/kin-menu.min.js">The CSS is optional but ideally at least include the base css file to build off from.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/madebygrant/kin-menu@1.0.1/dist/css/kin-menu.all.css">If you want just want to use the base css stylesheet without the included styles:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/madebygrant/kin-menu@1.0.1/dist/css/kin-menu.base.css">const kinOptions = {
// Your options go here.
}
const kin = new KinMenu(kinOptions);
kin.init();Within your website's CSS stylesheet, include a rule similar to the example below, for when the kin-is--loaded class has been added to the <body> tag.
body.kin-is--loaded {
.top-menu{
display: none;
}
}| Option | Type | Description | Defaults |
|---|---|---|---|
| windowWidth | integer | The maximum width of the window size to activate the plugin | 960 |
| pageContent | string, node | The element where the main content of the website is located within. | First <main> tag in the page. |
| toggleButton | object | Where you can modify the toggle button | { spans: 3, text: '', hasWrapper: false, wrapperContent: false } |
| groups | array | The items you want to add into the Kin Menu |
- groups: Set groups for your cloned elements to be added within Kin Menu.
- element: Determine which element type to wrap the clones in.
- class: Apply class to your group wrap element. For multiple classes, do so with an array.
- clones: Select the items within the page to be added into the group.
The example below, it adds the <li> items from a <nav> (nav.top-menu) in the page into a group (ul.side-menu) in the Kin Menu.
const kinOptions = {
groups: [
{
element: 'ul',
class: 'side-menu',
clones: [
'nav.top-menu > ul > li'
]
},
]
};
const kin = new KinMenu(kinOptions);
kin.init();The example below, shows how to add multiple groups and items into the Kin Menu.
const kinOptions = {
windowWidth: 1024,
groups: [
{
element: 'header',
class: 'side-header',
clones: [
'figure.site-logo',
'h1.site-heading'
]
},
{
element: 'ul',
class: 'side-menu',
clones: [
'nav.top-menu > ul > li'
]
},
{
element: 'div',
class: 'side-social-media',
clones: [
'div.social-media a'
]
},
]
};
const kin = new KinMenu(kinOptions);
kin.init();| Option | Type | Description | Defaults |
|---|---|---|---|
| spans | integer | Number of <span> elements to generate in the button for styling purposes | 3 |
| text | string | Text to include inside of the button | '' |
| hasWrapper | boolean | Create a <div> wrapper around the button. | false |
| wrapperContent | array | Select items within the page to be added into in the wrapper |
The example below, adds a <figure> (figure.site-logo) element from the page into the toggle button's wrapper, next to the button.
const kinOptions = {
groups: [
{
element: 'ul',
class: 'side-menu',
clones: [
'nav.top-menu > ul > li'
],
},
],
toggleButton: {
hasWrapper: true,
wrapperContent: [
'figure.site-logo'
]
}
};
const kin = new KinMenu(kinOptions);
kin.init();Currently has four loosely styled styles but totally optional. It requires the kin-menu.all.css stylesheet to be loaded.
To apply a style, either:
- Add a
data-kinattribute to the <body> tag with the corresponding option value. - Apply the
setStyle()method to the initialised Kin Menu object and give it the corresponding option value.
Example:kin.setStyle('side-angled);
| Style | Option Value | Description |
|---|---|---|
| Side | side | A basic side menu that slides in from the left. |
| Angled Side | side-angled | A angled side menu that slides in from the left |
| Circle Expand | circle-expand | The toggle button's background expands to full screen and the menu appears afterwards. |
| Transition | transition | An animated, full width that menu slides down from the top. |
Note: The .scss files are located in the 'src' directory in the repository
Initialise the menu
kin.init();
Create and render the menu
kin.create();
Destroy the menu
kin.destroy();
Apply a style to the menu
kin.setStyle();
This project is available under the MIT license.