Incoded JSON Menu Component


Descrição

O JSON MENU incorporado não é apenas um elemento da página da Web HTML / CSS. A principal idéia é armazenar itens de menu no banco de dados. Em seguida, usando API, AJAX e
O componente Javascript, o menu será gerado no frontend. Com implementação simples, temas sensíveis e bonitos, ícones incríveis de fontes e
opções que ele contém, o JSON MENU é um componente útil para todos os tipos de sites e aplicativos. Poderia ser integrado a um site simples
tão fácil quanto a uma solução completa como WordPress ou aplicativo Android.

Demo simples

O componente de JSON MENU convertido converte JSON como este:

no menu como este:

Aqui está o fluxograma que descreve detalhadamente como o componente funciona:

Características

        

  • Bootstrap suportado
  •     

  • Fonte Ícones incríveis suportados
  •     

  • 8 temas diferentes
  •     

  • 8 fontes diferentes
  •     

  • Responsive
  •     

  • Múltiplas instâncias de menu em uma única página
  •     

  • Submenus
  •     

  • AJAX solicita o backend para obter a estrutura do menu em JSON
  •     

  • Menu verical e horisontonal
  •     

  • Itens de menu justificados e não justificados

Requisitos

        

  • jQuery

Além disso, você pode incluir o Bootstrap para integrar o menu JSON em sua estrutura.

Ou você pode incluir ícones Font Awesome, por exemplo, para usá-lo em itens de menu.

Configuração rápida

CSS

Inclua estes arquivos css no da sua página:


JavaScript

Inclua estes arquivos javascript na parte inferior do < body > da sua página:



Titular do menu

Adicione um espaço reservado para o seu menu com ID exclusiva:


Menu JSON

Abra "api / menu.json" e modifique-o de acordo com suas necessidades e menu que deseja mostrar:

[
    { "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

Adicione o seguinte código na parte inferior do < body > da sua página:


Documentação completa

Temas

Para ver todos os temas, clique aqui

Changelog

v2.0.0 15 de novembro de 2015

  • Adicionado novos temas
  • Fontes adicionadas como opções
  • Faça o componente mais leve removendo dependências
  • Estrutura atualizada do produto

v1.1.1 28 de março de 2015

  • Removido jQuery UI de dependências
  • Otimização de código do javascript principal

v1.1.0 17 de janeiro de 2015

  • Adicionado suporte para menu vertical

v1.0.0 15 de janeiro de 2015


Comprar Agora !

Comentar