Logo

Menu MM com shortcode e no-code v.3.1

Este menu é criado com um plugin muito simples e permite que seja customizado com painel de definições.

Para implementar este menu, tem de ser instalado o plugin mm-menu-shortcode e depois de activado pode ser implementado em qualquer lado através do shortcode:

No shortcode, você pode alterar os seguintes parâmetros:

  • menu: O nome do menu que deseja exibir (exemplo: “Nome-do-menu”), se o nome do menu for “Menu Principal” deverá ficar no shortcode: menu=”Menu-Principal”.
  • class: Uma classe CSS opcional para aplicar ao menu. Caso não necessite pode retirar do shortcode o texto: class=”classe-extra”
MM MENU SHORTCODE

Menu customizado com CSS

Este menu é criado com um plugin muito simples e permite que seja completamente customizado com CSS.

Para implementar este menu, tem de ser instalado o plugin mm-menu-shortcode-simples e depois de activado pode ser implementado em qualquer lado através do shortcode:

No shortcode, você pode alterar os seguintes parâmetros:

  • menu: O nome do menu que deseja exibir (exemplo: “Nome-do-menu”), se o nome do menu for “Menu Principal” deverá ficar no shortcode: menu=”Menu-Principal”.
  • class: Uma classe CSS opcional para aplicar ao menu.
  • orientation: Define a orientação do menu: “horizontal” ou “vertical” (padrão: horizontal).

No painel de controlo em Settings>MM Menu deve ser adicionados os URL para o icon que sinaliza que existe um submenu.

Deve ser usado CSS para o customizar. Este CSS pode ser colocado num widget de HTML na própria página apenas para testar, quando ok deverá ser colocado no Custom CSS (Appearance).
Exemplo do CSS que foi utilizado no menu desta página, para o menu horizontal e vertical:

<style>
/* Estilo geral dos menus */
.mm-menu,
.mm-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mm-menu li {
    position: relative;
}

/* Estilos para o menu na Horizontal */
.mm-menu-horizontal {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px; /* Espaço entre os items */
}

.mm-menu-horizontal > li {
    background-color: #dedede; /* Cor de fundo dos items */
    padding: 5px 10px; /* Item padding */
    font-size: 14px; /* Tamanho do texto */
    transition: all 0.3s ease;
}

.mm-menu-horizontal > li a {
    position: relative;
    top: 1px; /* position do texto */
    color: #333333; /* color do texto */
    transition: all 0.3s ease;
}

.mm-menu-horizontal > li a:hover,
.mm-menu-horizontal > li.current-menu-item a {
    color: #000; /* Cor do texto em hover e activo */
}

.mm-menu-horizontal > li:hover,
.mm-menu-horizontal > li.current-menu-item {
    background-color: #ffd700; /* Cor de fundo em hover e activo */
}

/* Estilos para o menu Vertical */
.mm-menu-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mm-menu-vertical > li {
    width: 80%; /* Width of vertical menu items */
    background-color: #bebebe; /* Background color of items */
    text-align: center; /* Text alignment */
    padding: 6px 3px;
    font-size: 16px; /* Text size */
    transition: all 0.3s ease;
}

.mm-menu-vertical > li:hover,
.mm-menu-vertical > li.current-menu-item {
    background-color: #ffffff; /* Cor de fundo em hover e activo */
}

.mm-menu-vertical > li a {
    color: #666; /* Caor do texto */
}

.mm-menu-vertical > li a:hover,
.mm-menu-vertical > li.current-menu-item a {
    color: #000000;  /* Cor do texto em hover e activo */
}

/* Submenu toggle */
.mm-menu li .mm-submenu-toggle {
    display: inline-flex;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.mm-submenu-toggle.open img {
    transform: rotate(180deg);
}

/* Estilos para o Submenu do menu Horizontal */
.mm-menu-horizontal .mm-submenu {
    position: absolute;
    min-width: 200px; /* largura do Submenu */
    margin-top: 10px; /* Distancia do topo */
    right: 0; /* Alinhamento do submenu à direita do item de menu pai */
    left: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 100;
}

/* Triangulo no topo do submenu, retirar este bloco se desnecessário */
.mm-menu-horizontal .mm-submenu::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 0; /* Change to 'left: 0' for left-aligned arrow */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #999; /* esta cor deve ser igual à cor de fundo do submenu */
}


/* Estilos para o Submenu do menu Vertical */
.mm-menu-vertical .mm-submenu {
    position: relative;
    top: auto;
    left: auto;
    box-shadow: none;
    display: none; /* Hidden by default, shown with .mm-submenu--visible */
    flex-direction: column;
    background-color: #3d3d3d; /* cor de fundo de todo o submenu */
    margin-left: 0; /* alterar se necessário espaço para fora */
    padding-left: 0; /* alterar se necessário espaço para dentro */
    max-width: 100%;
}

/* General submenu item styles */
.mm-menu .mm-submenu > li a {
    display: flex;
    color: #eee; /* cor do texto */
    background-color: #999; /* cor de fundo de cada Li */
    padding: 5px 17px; /* Padding */
    border-bottom: solid 1px #eee; /* linha separadora */
    transition: all 0.3s ease;
}

.mm-menu .mm-submenu > li a:hover,
.mm-menu .mm-submenu > li.current-menu-item a {
    /* cores submenu horizontal em hover e se página actual */
    color: #000000;
    background-color: #fff100;
}

/* Vertical submenu item styles */
.mm-menu-vertical .mm-submenu > li {
    background-color: #666;
    padding: 0; /* alterar caso necessário espaço */
    display: block;
    font-size: 14px; /* tamanho da tipografia do submenu na vertical */
}

.mm-menu-vertical .mm-submenu > li.current-menu-item {
    background-color: #000; /* cor de fundo da Li com pagina actual */
}

.mm-menu-vertical .mm-submenu > li a {
    color: #c7c7c7; /* cor de texto */
}

.mm-menu-vertical .mm-submenu > li a:hover,
.mm-menu-vertical .mm-submenu > li.current-menu-item a {
    /* cores submenu vertical em hover e se página actual */
    color: #000000; 
    background-color: #ffda00;
}

/* Submenu visibility */
.mm-menu .mm-submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.mm-menu-horizontal .mm-submenu.mm-submenu--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mm-menu-vertical .mm-submenu.mm-submenu--visible {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* Gap between menu and submenu for horizontal menu */
.mm-menu-horizontal > li::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 30px; /* Gap height */
    background: transparent;
    pointer-events: auto;
}

</style>

Super menu

Para fazer o super menu, com a funcionalidade: ao clicar no icone burguer mostra o super-menu, depois de aberto o super-menu ao clicar no icone para fechar o super-menu desaparece:

1 – Criar um container com o header para mobile. dentro colocar um icone com o Burguer menu dar-lhe a class “open-menu”

2 – Criar o super menu num container e atribuir a esse container a class “super-menu”.

3 – Dentro do container com o menu colocar um icone para fechar e dar-lhe a class “close-menu”.

4 – Criar no final um container à parte com HTML e dentro colocar o seguinte código:
(atenção que este código é apenas para testes, na versão final o código deve ser retirado da página e o CSS deve ser colocado no Custom CSS e o Javascript no plugin Snippets e no final do html, para carregarem no lugar certo)

<style>
    .super-menu {
        opacity: 0; /* super-menu inicial não é visivel */
        position: absolute;
        transform: translateY(-100%); /* esconde o super-menu para cima */
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
        z-index: 0;
        pointer-events: none; /* não deixa que o super menu seja clicavel */
    }
    .super-menu.mostrar {
        opacity: 1; /* o super-menu é visivel */
        transform: translateY(0); /* coloca o super-menu no sitio pretendido */
        position: fixed;
        top: 0;
        z-index: 999;
        overflow-y: auto;
        max-height: 100vh; /* para que o container do menu não ultrapasse a viewport */
        -webkit-overflow-scrolling: touch; /* para scroll suave no iOS */
        pointer-events: auto;
    }
</style>

<script>
    function toggleSuperMenu() {
        document.querySelector(".super-menu").classList.toggle("mostrar");
    }

    document.addEventListener('DOMContentLoaded', () => {
        const superMenu = document.querySelector('.superMenu');

        document.body.addEventListener('click', (e) => {
            if (e.target.closest('.open-menu') || e.target.closest('.close-menu')) {
                toggleSuperMenu();
            }
        });

        window.addEventListener('resize', () => {
            if (window.innerWidth >= 768 && superMenu.classList.contains('mostrar')) {
                superMenu.classList.remove('mostrar');
            }
        });
    });
</script>