JSON Menu Component v2.0.0

BUY NOW!

Archive Content

1. dist - Contains menu component with all its files ready for use. Open /dist/menu.html in your browser to see it.

2. about.html, themes.html, bootstrap.html, demo.html & doc.html - Open those files in your browser to get familiar with the component.

3. assets - Contains files used by HTML files.

Requirements

To use the menu on your website, you just need jQuery and that's all.

Additionaly, you may include Bootstrap to integrate JSON Menu into its structure.

Or you may include Font Awesome icons to use it in menu items.

Quickstart Guide

1. Extract the downloaded archive IncodedJSONMenu-vX.X.X

2. Navigate to dist directory

3. Copy dist directory content onto your website or application

4. Open menu.html in the browser.

Installation

- Extract the downloaded archive IncodedJSONMenu-vX.X.X

- Navigate to dist directory

- Copy dist directory content onto your website or application

CSS files

Include CSS file from /dist/css into the </head> of your HTML page:

<link rel="stylesheet" href="css/incoded-menu.min.css">

Menu Holder

Create a holder for the menu in the <body> of your HTML page:

<div id="menu"></div>

JavaScript files

Include JavaScript files from /src/js before the closing </body> tag of your HTML page:

<script src="js/jquery.min.js"></script>
<script src="js/incoded-menu.min.js"></script>

Menu Instance

Create menu instance:

<script type="text/javascript">
$(function(){
    new IncodedMenu('#menu');
});
</script>

By default, IncodedMenu calls api/menu.json through AJAX and creates a menu with dummy items. So, you can open that file and add your menu items. If you want to change the file path or you have backend script that generates JSON menu, then use data: { url: 'api/fetchMenu.php' } option.

Another way to create a menu is more simpler. You can create JSON with menu items in JavaScript and add it to the instance by using this option data: { json: menu } like this:

<script type="text/javascript">
$(function()
{
    // Menu JSON
    var menu = [
        { "id": 1, "order": 0,  "name": "Home", "url": "/" },
        { "id": 2, "order": 1,  "name": "About", "url": "/about.html" },
        { "id": 3, "order": 2,  "name": "Themes", "url": "/themes.html" },
        { "id": 4, "order": 3,  "name": "Contact", "url": "/contact.html" }
    ];

    // Menu instance
    new IncodedMenu('#menu',
    {
        data: { json: menu }
    });
});
</script>

Template

To help you set up successfully and easily a menu on your website, here is the HTML file template with all requirements included. All you need to do is to copy the code below and adapt for your website. Exact the same code you'll find in the downloaded archive - /template.html.

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Incoded JSON Menu</title>

    <link rel="shortcut icon" href="/favicon.png">

    <!-- CSS files -->
    <link rel="stylesheet" href="css/incoded-menu.min.css">
</head>
<body>

    <!-- Menu holder -->
    <div id="menu"></div>

    <!-- JavaScript files -->
    <script src="js/jquery.min.js"></script>
    <script src="js/incoded-menu.min.js"></script>

    <script type="text/javascript">
    $(function()
    {
        // Menu JSON
        var menu = [
            // Parent items
            { "id": 1, "order": 0, "name": "Home", "url": "/index.html" },
            { "id": 2, "order": 1, "name": "About", "url": "/about.html" },
            { "id": 3, "order": 2, "name": "Themes" },
            { "id": 4, "order": 3, "name": "Contact", "url": "/contact.html" },
            // Child items
            { "id": 5, "order": 0, "name": "Jeans", "parent_id": 3, "url": "/themes/jeans.html" },
            { "id": 6, "order": 1, "name": "Pink", "parent_id": 3, "url": "/themes/pink.html" }
        ];

        // Menu instance
        new IncodedMenu('#menu',
        {
            data: { json: menu }
        });
    });
    </script>

</body>
</html>

JSON

From the previos code sample and if you open api/menu.json, you will see how the JSON should look like. It contains parent and, if necessary, child items. Each item should have id (unique), order, name and url. And, in addition, child items have parent_id which represents ID of a parent item.

Parent item:
{ "id": 2, "order": 3, "name": "Archive", "url": "/archive.html" }

Child items:
{ "id": 3, "order": 0, "name": "January", "url": "/archive/january.html", "parent_id": 2 },
{ "id": 4, "order": 1, "name": "February", "url": "/archive/february.html", "parent_id": 2 },
{ "id": 5, "order": 2, "name": "March", "url": "/archive/november.html", "parent_id": 2 }

Options

JSON Menu contains options you can easily change through menu instance:

new IncodedMenu('#menu', {
    data: { option: value },
    menu: { option: value },
    items: { option: value }
});

Options are separated into three groups: data, menu and items options

Data Options

Option Default Description
url api/menu.json URL is used to call backend API through AJAX to get menu items JSON.
json null JSON that contains menu items. When populated, it will be used instead of fetching items over AJAX and URL option.

Menu Options

Option Default Description
theme null Theme created by Incoded (default | dark | jeans | pink).
class null Class that goes to main <ul> tag.
vertical false Makes menu and items vertical.
justified true Makes menu and items justified.

Items Options

Option Default Description
active null ID of root item that will be initialy selected.