Jul 11, 2019
42 Views

Incoded JSON Menu Component

Written by

LIVE PREVIEWBUY NOW $10

Description

The engraved JSON MENU is not just the element of the HTML / CSS web page. The main idea is to store menu items in the database. So, using API, AJAX and
Javascript component, the menu will be generated on the frontend. With a simple implementation, reactive and cute themes, fantastic icon fonts and
the options it contains, JSON MENU is a useful component for all types of websites and applications. It could be integrated into a simple website
as easy as a complete solution like WordPress or an Android application.

Simple demo

The encoded JSON MENU component will convert JSON like this:

Component of the JSON menu in code - 1

in the menu like this:

Component of the JSON menu in code - 2

Here is the flow chart that describes in detail how the component works:

Component of the JSON menu in code - 3

Features

  • Bootstrap supported
  • Fonts Fantastic icons supported
  • 8 different themes
  • 8 different fonts
  • of reply
  • Multiple menu instances on a single page
  • submenu
  • AJAX request to the back end to get the menu structure in JSON
  • Vertical and horisontal menu
  • Menu items justified and not justified

Requirements

  • jQuery

Also, you can include Bootstrap to integrate the JSON menu into its structure.

Or you can include Font Awesome icons, for example, to use it in menu items.

Quick setup

CSS

Include these CSS files in the of your page:


JavaScript

Include these javascript files at the bottom of the < body > of your page:

%MINIFYHTMLa056e756755a5ad6876f97f95513da4b6%%MINIFYHTMLa056e756755a5ad6876f97f95513da4b7%

Menu owner

Add a placeholder for your menu with unique ID:


JSON Menu

Open "api / menu.json" and modify it according to your needs and the menu you want to show:



(
{"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"},
{"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

Add the following code to the bottom of the < body > of your page:

%MINIFYHTMLa056e756755a5ad6876f97f95513da4b8%

Complete documentation

Themes

Component of the JSON menu in code - 4

To see all the themes, click Here

changelog

v2.0.0 15 November 2015

  • Added new themes
  • Added characters as options
  • Make the component lighter by removing the dependencies
  • Updated product structure

v1.1.1 March 28th 2015

  • Removed jQuery user interface from dependencies
  • Optimization of the main javascript code

v1.1.0 17 January 2015

  • Added support for vertical menu

v1.0.0 15 January 2015

Source

Article Tags:
·
Article Categories:
Javascript
ThemeForest best selling themes

Jaeho Park completed a Master in Fine Arts at the Hongik University in 1999, followed by a Master in Photographic Studies at the University of Westminster in 2012. After working for many years as a university professor, designer and curator in South Korea.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.