🚀 Tecnologias

Esse pacote foi desenvolvido com as seguintes tecnologias:

• JavaScript (ES6+) - Lógica e funcionalidades
• CSS3 - Estilos avançados e animações suaves
• HTML5 - Estrutura semântica
• Vanilla JS - Sem dependências externas

💻 Projeto

fexz-menu-mobile é um componente JavaScript puro e responsivo para criar menus mobile modernos e acessíveis.

O objetivo é fornecer uma solução simples, leve e fácil de integrar para menus hamburger em qualquer projeto web.

Características principais:

• ✨ Sem dependências externas
• 📱 Totalmente responsivo
• ⚡ Animações suaves e performáticas
• ♿ Acessível com suporte a ESC
• 🎨 Estilos customizáveis
• 🔧 Fácil de configurar
• 📦 Tamanho compacto

📋 Funcionalidades

• Abre/fecha o menu com animação suave
• Overlay semi-transparente
• Fecha ao clicar em um link
• Fecha ao clicar no overlay
• Fecha ao pressionar a tecla ESC
• Callbacks personalizáveis (onOpen, onClose)
• Duração de animação configurável

📦 Instalação

Via NPM:

npm install fexz-menu-mobile

Via Yarn:

yarn add fexz-menu-mobile

🎯 Como usar

Estrutura HTML

<button id="menu-toggle">☰ Menu</button>

<nav id="mobile-menu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#sobre">Sobre</a></li>
    <li><a href="#servicos">Serviços</a></li>
    <li><a href="#contato">Contato</a></li>
  </ul>
</nav>

Usar no JavaScript

const MobileMenu = require('fexz-menu-mobile');

const menu = new MobileMenu({
  menuId: 'mobile-menu',
  toggleId: 'menu-toggle',
  animationDuration: 300
});

📚 Documentação

Opções de Configuração

| Opção | Tipo | Padrão | Descrição | |-------|------|--------|-----------| | menuId | String | 'mobile-menu' | ID do elemento do menu | | toggleId | String | 'menu-toggle' | ID do botão que abre/fecha | | animationDuration | Number | 300 | Duração da animação em ms | | onOpen | Function | () => {} | Callback ao abrir o menu | | onClose | Function | () => {} | Callback ao fechar o menu |

Métodos Disponíveis

// Abrir o menu
menu.openMenu();

// Fechar o menu
menu.closeMenu();

// Alternar estado (abrir/fechar)
menu.toggleMenu();

// Destruir o menu
menu.destroy();

Propriedades

// Verificar se o menu está aberto
console.log(menu.isOpen); // true ou false

💡 Exemplos

Exemplo Básico

const menu = new MobileMenu();

Com Callbacks

const menu = new MobileMenu({
  onOpen: () => {
    console.log('Menu aberto!');
    document.body.style.overflow = 'hidden';
  },
  onClose: () => {
    console.log('Menu fechado!');
    document.body.style.overflow = 'auto';
  }
});

Com Animação Personalizada

const menu = new MobileMenu({
  animationDuration: 500, // 500ms
  menuId: 'custom-menu',
  toggleId: 'custom-toggle'
});

Controlar Manualmente

// Botão para abrir
document.getElementById('open-btn').addEventListener('click', () => {
  menu.openMenu();
});

// Botão para fechar
document.getElementById('close-btn').addEventListener('click', () => {
  menu.closeMenu();
});

🎨 Personalizando Estilos

Os estilos padrão podem ser sobrescrevidos com CSS:

#mobile-menu {
  background-color: #222 !important;
  width: 100% !important;
}

#mobile-menu a {
  color: #fff !important;
  font-size: 18px !important;
}

📱 Compatibilidade

Funciona em todos os navegadores modernos:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🤝 Contribuindo

Encontrou um bug ou tem uma sugestão? Abra uma issue no GitHub!

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Feito com ❤️ por fexz — Obrigado por usar fexz-menu-mobile!