Além disso, se você estiver interessado, você pode olhar para maneira anterior usando o CSS descrito no artigo -
Agora, direto ao ponto. Como no último artigo, antes de mais nada, vamos escrever Html nosso código de menu. O código é o mesmo daquele artigo, para que não haja confusão e seja mais compreensível. Um menu com dois itens e ambos possuem submenus.
Se você tiver uma linha assim ou semelhante que conectou a biblioteca anteriormente, não deve fazer isso novamente.
Na segunda linha do script, especifique o ID do nosso menu. Se você estiver usando Por aqui ao seu próprio menu e, em seguida, altere naturalmente o nome para o seu próprio. DENTRO este caso isso é - #slow_nav.
Você também pode ajustar o tempo da animação. Nesse script, a abertura e o fechamento custam 400 milissegundos, o que é 0,4 segundos. Se desejar, você pode alterá-lo para um valor maior ou menor.
A última etapa é adicionar estilos. Eles são muito semelhantes aos estilos do artigo anterior, mas estão ausentes Propriedades CSS animação.
#slow_nav> ul (largura: 500px; margem: 25px auto 0;) #slow_nav> ul> li (estilo de lista: nenhum; display: bloco embutido; posição: relativa; preenchimento: 0;) #slow_nav a (texto- decoração: nenhum;) #slow_nav> ul> li> a (tamanho da fonte: 18px; preenchimento: 5px; cor de fundo: # 333; cor: #fff;) #slow_nav li ul (posição: absoluto; estilo de lista: nenhum; alinhamento do texto: centro; topo: 15px; tamanho da fonte: 15px; esquerda: 0; margem: 0; preenchimento: 0; exibição: nenhum;) #slow_nav li ul li (cor de fundo: # 333; borda- inferior: 1px sólido # 888;) #slow_nav li ul li: último-filho (borda inferior: nenhum;) #slow_nav li ul li a (preenchimento: 5px 12px; cor: #fff; display: block;) #slow_nav li ul li: hover (background-color: # 444;) #slow_nav li ul li: first-child (margin-top: 25px; position: relative;) #slow_nav li ul li: first-child: before (content: "" ; posição: absoluta; largura: 1px; altura: 1px; borda: 5px totalmente transparente; cor da borda inferior: # 333; esquerda: 10px; superior: -10px;)
Também adicionado ao de estilos nova linha com o qual o script funciona corretamente. Para elemento - #slow_nav li ul conjunto de propriedades Mostrar nenhum;... Se você não o adicionar, o menu suspenso ficará inicialmente visível e desaparecerá somente depois que você mover o cursor sobre ele. Todos os outros estilos são iguais aos do artigo anterior.
Como o método anterior, este pode ser aplicado não apenas a menus escritos por você, mas também aos mesmos menus dinâmicos que são criados por sistemas de gerenciamento de sites, por exemplo WordPress... Para fazer isso, você precisa ajustar um pouco os estilos e pronto. Ou seja, você não precisa usar o primeiro código HTML, apenas estilos. Nos estilos, você precisa substituir o nome do id #slow_nav pelo que você terá, e é possível corrigir algo mais detalhadamente. Não vou me alongar em detalhes. Cada caso requer uma abordagem pessoal, desculpe 🙂
Só isso, obrigado pela atenção. 🙂
Neste artigo, desenvolveremos um simples menu suspenso usando jQuery. Primeiro, dê uma olhada no arquivo de demonstração. Esperamos que você conheça pelo menos um pouco dos fundamentos de jQuery e CSS. Os principais aspectos da criação deste menu suspenso são a aplicação dos parâmetros CSS: position, top, left, z-index.
Usando essas opções, podemos ter certeza de que nosso menu aparecerá exatamente abaixo do link que foi pairado sobre e cobrirá exatamente todos os outros elementos. Também faremos o menu aparecer ao passar o mouse e desaparecer quando o cursor for movido para o lado. Para implementar esses eventos, usaremos as funções mouseenter e mouseleave do jQuery. E isso é tudo de que precisamos para criar um menu suspenso!
Arquivo de demonstração do resultado final e link para download
Código HTML
Verifique o HTML para o menu suspenso:
Como você pode ver, aqui usaremos listas não ordenadas para implementar itens de menu. Cada link de menu é atribuído a uma classe suspensa, e a própria lista suspensa é englobada por uma classe de sublink. Os nomes das classes serão usados pelo jQuery para determinar qual menu exibir.
Código CSS
Confira o código CSS:
/ * CSS para menu suspenso Iniciar * /
ul
{
estilo de lista: nenhum;
preenchimento: 0px;
margem: 0px
}
ul li
{
display: embutido;
flutuar: esquerda;
}
ul li a
{
cor: #ffffff;
plano de fundo: # 990E00;
margem direita: 5px;
intensidade da fonte: Negrito;
tamanho da fonte: 12px;
família-fonte: verdana;
decoração de texto: nenhum;
display: bloco;
largura: 100px;
altura: 25px;
altura da linha: 25px;
alinhamento de texto: centro;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
borda: 1px sólido # 560E00;
}
ul li a: pairar
{
cor: #cccccc;
plano de fundo: # 560E00;
intensidade da fonte: Negrito;
decoração de texto: nenhum;
display: bloco;
largura: 100px;
alinhamento de texto: centro;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
borda: 1px sólido # 000000;
}
ul li.sublinks a
{
cor: # 000000;
plano de fundo: # f6f6f6;
borda inferior: 1px sólido #cccccc;
peso da fonte: normal;
decoração de texto: nenhum;
display: bloco;
largura: 100px;
alinhamento de texto: centro;
margem superior: 2px;
}
ul li.sublinks a: hover
{
cor: # 000000;
plano de fundo: # FFEFC6;
peso da fonte: normal;
decoração de texto: nenhum;
display: bloco;
largura: 100px;
alinhamento de texto: centro;
}
ul li.sublinks
{
Mostrar nenhum;
}
/ * CSS para menu suspenso End * /
A maior parte do CSS é usado para formatar os menus (você pode fornecer aparência menu por conta própria), mas também há alguns pontos importantes aqui:
1 - Remova as guias com estilo de lista: nenhum;
2 - Sabemos que as listas são elementos de bloco e sempre são exibidas verticalmente. Para posicioná-los horizontalmente, fornecemos a eles um parâmetro de elemento embutido e os alinhamos à esquerda com o seguinte código:
Display: embutido;
flutuar: esquerda;
3
- Os links são elementos embutidos por padrão. Estamos convertendo-os em elementos de bloco usando display: block (agora podemos dar a eles um valor de largura).
4 - Escondemos todo o menu por meio de:
Ul li.sublinks
{
Mostrar nenhum;
}
jQuery
Imagine os velhos tempos, quando os menus suspensos eram implementados com um código javascript e um monte de código desnecessário era necessário. Mas hoje tudo o que precisamos é jQuery:
$ (function () (
Submenu.css ((
posição: "absoluta",
zIndex: 1000
});
Submenu.stop (). SlideDown (300);
$ (este) .slideUp (300);
});
});
});
Uma coisa muito interessante e simples. Deixe-nos explicar como funciona. Para começar, e como de costume, envolvemos nosso código em um controlador jQuery:
$ (function () (
...
});
Nosso código é ativado quando o cursor do mouse está passando (função mouseenter) sobre um elemento que está atribuído a uma classe de menu suspenso ($ (". Dropdown")). No nosso caso, este é um link do menu:
$ (function () (
$ (". dropdown"). mouseenter (function () (
........
});
});
Vamos nos certificar de ocultar () todos os menus abertos anteriormente antes que o mouse pule para o próximo link:
$ (". sublinks"). stop (false, true) .hide ();
Preste atenção à função de parada, que nos ajuda a exibir apenas um menu suspenso por vez, quando o cursor do mouse se move sobre diferentes links no menu. Se não usarmos esta função, cada menu suspenso permanecerá aberto até o momento em que movermos completamente o cursor do mouse para longe do menu. Isso criará alguma sobreposição, portanto, devemos evitar isso. Em seguida, pegamos o menu suspenso expandido e o atribuímos a uma variável:
Submenu Var = $ (this) .parent (). Next ();
Isso é o que estará no código HTML:
Quando o cursor do mouse está pairando sobre o link com a classe suspensa, voltamos usando parent () e paramos em "li" e, em seguida, usando next (), nos encontramos no menu suspenso desejado, e "li" já estar com os sublinks (sublinks). Assim, o jQuery torna mais fácil descobrir qual menu suspenso exibir quando o mouse está sobre um link específico.
Submenu.css ((
posição: "absoluta",
top: $ (this) .offset (). top + $ (this) .height () + "px",
left: $ (this) .offset (). left + "px",
zIndex: 1000
});
O código é muito importante, pois garante que o menu suspenso seja exibido exatamente no link especificado. Se a posição for definida como absoluta, podemos posicionar o elemento em qualquer lugar de nossa página. Em seguida, definimos a posição superior do link sobre o qual o cursor está passando com $ (this) .offset (). Top (isso se refere ao item de menu atual sobre o qual o cursor está passando) e adicionamos um valor de altura a ele para que o menu seja exibido exatamente abaixo do link. Faça algo semelhante com o parâmetro esquerdo. Em seguida, usamos o z-index para garantir que nosso menu seja exibido acima do restante dos elementos.
Submenu.stop (). SlideDown (300);
Claro, você pode usar outras opções de animação como fadeIn, animação com seus próprios estilos e assim por diante.
Agora precisamos nos desviar do conceito de exibição do menu suspenso e ocultá-lo. Precisamos do seguinte trecho de código:
Submenu.mouseleave (function () (
$ (este) .slideUp (300);
});
Para ocultar o menu suspenso, usamos slideUp, que é o oposto de slideDown. Lembre-se de que o submenu é uma variável que criamos para definir um menu suspenso específico.
Assim, temos uma lista suspensa de irmãos atraente menu jQuery.
Para escrever a navegação na forma de um menu suspenso vertical no jQuery com uma lista suspensa de subcategorias, você precisa entender o próprio princípio desse mecanismo. Mas primeiro, vamos dar uma olhada na estrutura de navegação:
Navegação
Como você deve ter adivinhado, nosso menu suspenso é construído em torno de listas com marcadores. Ao passar o mouse sobre uma tag
- teste 1
- teste 2
- teste 3
- teste 4
Mas como, você pergunta? Sim, na verdade tudo é muito simples. Primeiro, vamos dar uma olhada em nossa folha de estilo da lista de navegação, que se parece com isto:
Corpo (plano de fundo: rgb (244, 244, 244); família da fonte: Verdana; peso da fonte: 100;) / * --- Navegação --- * / #menu (largura: 200px; margem: 0; preenchimento: 2px;) #menu li (list-style-type: none;) .menu (position: relative; background: chocolate; background: -moz-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3) ; plano de fundo: -webkit-linear-gradiente (topo, rgb (198, 255, 242), # 2AC4B3); plano de fundo: -o-linear-gradiente (topo, rgb (198, 255, 242), # 2AC4B3); borda : 1px sólido # 2AC4B3;) .menu: hover (plano de fundo: # 00c; plano de fundo: -moz-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB); background: -webkit-linear-gradient ( topo, rgb (230, 230, 230), # 0CBFAB); fundo: -o-gradiente linear (topo, rgb (230, 230, 230), # 0CBFAB);). extensão do menu (largura: 11px; altura: 11px; exibição: bloco; posição: absoluto; topo: 8px; direita: 10px; cursor: ponteiro;) .menu ul (largura: 150px; margem: 0; preenchimento: 1px; posição: absoluto; topo: -1px; esquerda: 198px;) .menu ul li (plano de fundo: chocolate; plano de fundo: gradiente -moz-linear (topo, rgb (198, 255, 242), # 2AC4B3); fundo: -webkit-linear-gradiente (topo, rgb (198, 255, 242), # 2AC4B3); fundo: gradiente -o-linear (topo, rgb (198, 255, 242), # 2AC4B3); borda: 1px sólido #fff; ) .menu ul li: hover (background: # 00c; background: -moz-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB); background: -webkit-linear-gradient (top, rgb ( 230, 230, 230), # 0CBFAB); plano de fundo: -o-gradiente linear (topo, rgb (230, 230, 230), # 0CBFAB);) .menu a (preenchimento: 5px; exibição: bloco; texto- decoração: nenhuma; cor: branco;) .menu a: pairar (cor: branco;) / * --- FIM --- * /
Você pode ver na folha de estilo que a lista suspensa não está oculta inicialmente, mas corrigiremos esse ponto com:
$ (document) .ready (function () ($ (". menu ul"). hide (); $ (". menu span"). css ("background", "url (" down.png ")") ; $ ("# menu li"). hover (function () ($ (this) .children ("ul"). show (); / * Equivalente a $ ("ul", this) .show (); * / $ (this) .find ("span"). css ("background", "url (" right.png ")"); / * Equivalente a $ ("span", this) .css ("background", "url (" right.png ")"); * /), function () ($ (this) .children ("ul"). hide (); / * Equivalente a $ ("ul", this) .hide (); * / $ (this) .find ("span"). css ("background", "url (" down.png ")"); / * $ ("span", this) .css ("background "," url ("down.png") "); * /))))
Agora vamos dar uma olhada mais de perto no código do menu suspenso do jQuery, porque talvez não seja muito claro para alguém. No início, a seguinte construção é explicada:
$ (document) .ready (function () ())
Ele contém comandos que devem ser executados após o carregamento completo da página. Isso é feito para que todos os tipos de erros não apareçam, se for impossível encontrar algum objeto devido ao fato de que ainda não foi carregado trivialmente.
$ (". menu ul"). hide ();
O que essa entrada significa? A construção "$ ()" permite que você selecione itens. Portanto, no início, precisamos ocultar nossa lista suspensa. Pegamos a construção "$ ()" e escrevemos o objeto de interesse nela. No nosso caso, este objeto será lista com marcadores com a classe "menu". Em seguida, escrevemos o método "hide ()", que nos permite ocultar o objeto de nosso interesse.
$ (". menu span"). css ("background", "url (" down.png ")");
O que ela faz? Ela está procurando uma etiqueta elemento pai que é atribuída a classe "menu" e, usando o método "css (" background "," url ("down.png") ")", a propriedade do estilo "background" recebe o valor "url (" down .png ")". "down.png" é um ícone que indica que a lista pode ser expandida.
Aí vem a construção, que vai ampliar nossa lista, fica assim:
$ ("# menu li"). hover (function () ($ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", " url ("right.png") ");), function () ($ (this) .children (" ul "). hide (); $ (this) .find (" span "). css (" background " , "url (" down.png ")");)
Estamos procurando por uma tag cujo elemento pai seja atribuído a id = "menu". Em seguida, vem o método "hover" e duas funções entre parênteses. A primeira função será executada quando o cursor do mouse estiver passando, e a segunda será executada se o cursor do mouse deixar o elemento de interesse.
A primeira função diz:
$ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", "url (" right.png ")");
A construção "$ (this)" significa que estamos interessados no elemento em que estamos este momento pairou (isto de inglês isto). E passamos o mouse sobre a tag
Depois disso, estamos procurando descendentes da tag, a saber: a tag e mudar seu fundo para outro ícone.
Depois disso, é escrita uma função que faz tudo como era originalmente, depois que o cursor do mouse sai do item da lista:
Function () ($ (this) .children ("ul"). Hide (); $ (this) .find ("span"). Css ("background", "url (" down.png ")"); )
Para que o código jQuery escrito funcione e nosso menu suspenso funcione corretamente, você precisa baixar a biblioteca do site jquery.com e conectá-la escrevendo-a após a tag de abertura
fragmento.É isso! Concluindo, quero observar que se o seu site for bastante pesado, talvez o script seja iniciado tarde demais (o site levará muito tempo para carregar) e os usuários verão como ele se abre completamente primeiro e só então se esconde , o que, você vê, é muito feio. Portanto, é necessário mover todos os comandos jQuery para esta construção: "$ (document) .ready (function () ())". Isso parecerá assim:
$ (document) .ready (function () ()) $ (". menu ul"). hide (); $ (". menu span"). css ("background", "url (" down.png ")"); $ ("# menu li"). hover (function () ($ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", " url ("right.png") ");), function () ($ (this) .children (" ul "). hide (); $ (this) .find (" span "). css (" background " , "url (" down.png ")");))
Conectando nosso script precisa ser transferido da tag
até o final, antes da tag de fechamento, ou você pode incluir o script logo após a lista com marcadores.(Downloads: 314)
Com a ajuda do jQuery clássico, muitos artigos foram escritos sobre esse assunto. Tentei complicar um pouco a tarefa adicionando a capacidade de manter as seções do menu abertas (ou fechadas, dependendo da escolha do usuário) durante a navegação no site.
Para resolver este problema, decidi usar o plugin jQuery Cookie. A vantagem desse plugin é que a operação é realizada no lado do cliente, o que, por sua vez, reduz a carga no servidor. Menos - se o usuário tiver o JS desativado, o plug-in não funcionará. Mas esta opção Eu não considero, desde então, todo o significado do menu suspenso desaparece por completo. Então, vamos começar.
Primeiro, precisamos conectar o próprio framework jQuery e o plugin jQuery Cookie:
Código: HTML
Em seguida, está a marcação. Será uma lista simples, nada sobrenatural. A única coisa a notar é que na tag
deve haver um título, quando você clica em qual menu será removido:
Código: HTML
E assim por diante, ad infinitum. Agora vem a parte divertida. Vou adicionar alguns comentários no código para torná-lo mais ou menos claro, chopach
Código: JS
$ (documento) .ready (função () (
if ($. cookie ("num_open_ul")) (// verificado se há uma entrada nos cookies
if ($. cookie ("num_open_ul")! = 0) (// e esta entrada não é igual a 0
var number_eq = parseInt ($. cookie ("num_open_ul") - 1);
$ (". navigation_body"). eq (number_eq) .show (). prevAll ("# navigation h2.navigation_head: first"). addClass ("active_navigation");
}
};
$ ("# navigation h2.navigation_head"). click (function () (// esta função será acionada quando clicada
if (! $ (this) .next (). is (": visible")) (
$ ("div.navigation_body"). siblings ("div.navigation_body"). slideUp (500); // se outros estiverem abertos, feche tudo exceto o atual
}
$ (this) .next ("div.navigation_body"). slideToggle (500) .siblings ("div.navigation_body"). slideUp (500);
$ (this) .toggleClass ("active_navigation"). siblings ("# navigation h2.navigation_head"). removeClass ("active_navigation"); // adicionou uma classe ao público para mudar o estilo
setTimeout (fncookie, 600); // gravar os próprios cookies com um atraso, para que o script tenha tempo para concluir o trabalho antes da gravação (500ms - velocidade, atraso - 600ms)
});
function fncookie () (// a própria função de escrita
var number_open_ul = 0;
var i = 0;
$ ("div.navigation_body"). each (function () (
i ++;
if ($ (this) .is (": visible")) (
numero_aberto_ul = i;
}
$ .cookie ("num_open_ul", numero_open_ul, (expira: 3, caminho: "/")); // mantém 3 dias para todo o site.
});
}
});
Ou seja, agora, se o usuário abrir o menu, sair do site e acessá-lo novamente após alguns dias, o menu ainda permanecerá aberto para ele.
E, finalmente, temos um pequeno toque restante: na verdade, estilos css... Faça ao seu gosto, no exemplo que peguei projeto acabado de um dos projetos
Código: CSS
#navigation (
margem: 80px automático;
largura: 250px;
}
#navigation h2, #navigation h2.navigation_head (
tamanho da fonte: 18px;
peso da fonte: mais negrito;
cor de fundo: # ffb6c1;
imagem de fundo: -webkit-gradiente (linear, 50% 0,50% 100%, interrupção da cor (0%, # ffe9e9), interrupção da cor (100%, # ffb6c1));
imagem de fundo: -webkit-linear-gradient (# ffe9e9, # ffb6c1);
imagem de fundo: -moz-linear-gradient (# ffe9e9, # ffb6c1);
imagem de fundo: -o-linear-gradient (# ffe9e9, # ffb6c1);
imagem de fundo: gradiente linear (# ffe9e9, # ffb6c1);
preenchimento: 5px 3px 6px 3px;
margem: automático;
posição: relativa;
}
#navigation h2.navigation_head: after (
posição: absoluta;
direita: 5px;
cor: # 550000;
conteúdo: "cssb";
}
#navigation h2: hover, #navigation h2.navigation_head: hover (
cursor: ponteiro;
}
.active_navigation (
imagem de fundo: -webkit-gradiente (linear, 50% 0,50% 100%, cor-stop (0%, # ffb6c1), cor-stop (100%, # ffe9e9))! importante;
imagem de fundo: -webkit-linear-gradient (# ffb6c1, # ffe9e9)! importante;
imagem de fundo: -moz-linear-gradient (# ffb6c1, # ffe9e9)! importante;
imagem de fundo: -o-linear-gradient (# ffb6c1, # ffe9e9)! importante;
imagem de fundo: gradiente linear (# ffb6c1, # ffe9e9)! importante;
}
.active_navigation: após (
posição: absoluta;
direita: 5px;
conteúdo: "cssd"! importante;
}
.navigation_body (
Mostrar nenhum;
}
#navigation ul (
margem: 0;
preenchimento: 0;
tipo de estilo de lista: nenhum;
}
* html #navigation ul li (
altura: 1%;
}
#navigation div.navigation_body ul li (
margem esquerda: 10px;
}
#navigation a (
família de fontes: "Times New Roman";
display: bloco;
cor: # 918871;
preenchimento: 3px;
cor de fundo: # ffe3e0;
border-bottom: 1px solid #fff;
decoração de texto: nenhum;
}
#navigation a: hover (
cor: # 585858;
cor de fundo: # ffb6cc;
}
Se alguém notou, aqui tentei usar o conteúdo: +/- propriedade quando fechada / menu aberto, mas você pode adicionar uma imagem ou qualquer outro design. Você pode ver um exemplo do que temos aqui.
Como sempre, estou pronto para ouvir as perguntas e tentar respondê-las. Tudo de bom, tudo de melhor.
Neste tutorial, mostraremos como criar um menu suspenso lateral para facilitar a navegação no site. Este menu é uma tendência popular no design moderno da web. Muitos sites usam esse tipo de menu. Com sua ajuda, você pode se livrar do caos nas páginas do projeto, torná-lo mais legível, focando a atenção do usuário no conteúdo principal.
É uma ótima maneira de alcançar o minimalismo sem distrações. Hoje, nós mesmos criaremos esse menu.
Para criar um menu de navegação, vamos primeiro dar uma olhada nas configurações:
Primeiro você precisa carregar o Normalize.css e configurar os estilos de navegador padrão para garantir que o menu tenha a mesma aparência em todos os navegadores. Usaremos FontAwesome para exibir uma seta na frente dos itens de menu com subitens. Para alternar classes no menu, carregue o jQuery e mova todo o código jQuery personalizado para script.js. O último link é a tabela principal do projeto web.
Ícone de hambúrguer
O ícone de hambúrguer é um atributo comum de navegação no site. Muitas vezes, é criado usando uma fonte de ícone como FontAwesome, mas neste tutorial vamos adicionar algumas animações para criar do zero. Nosso ícone de hambúrguer é uma tag span contendo três divs de classe, exibidos como barras horizontais.
Os estilos são assim:
Botão de alternância (posição: fixa; largura: 44 px; altura: 40 px; preenchimento: 4 px; transição: .25s; índice z: 15;) botão .toggle: hover (cursor: ponteiro;) botão .toggle .menu -bar (posição: absoluta; raio da borda: 2px; largura: 80%; transição: .5s;) botão .toggle .menu-bar-top (borda: 4px sólido # 555; borda inferior: nenhum; topo: 0;) .toggle-button .menu-bar-middle (altura: 4px; background-color: # 555; margin-top: 7px; margin-bottom: 7px; top: 4px;) .toggle-button .menu-bar -bottom (border: 4px solid # 555; border-top: nenhum; top: 22px;) .button-open .menu-bar-top (transform: rotate (45deg) translate (8px, 8px); transição: .5s; ) .button-open .menu-bar-middle (transform: translate (230px); transição: .1s Easy-in; opacity: 0;) .button-open .menu-bar-bottom (transformar: girar (-45deg) traduzir (8px, -7px); transição: .5s;)
O ícone tem uma posição fixa e não muda ao rolar a página. Também tem um índice z de 15, o que significa que sempre estará acima de outros elementos. Consiste em três barras, cada uma compartilhando outros estilos. Portanto, moveremos cada barra para a classe .menu-bar. Mova o resto dos estilos para classes separadas... A mágica acontece quando adicionamos outra classe à tag span que é pública. Nós adicionamos com usando jQuery Da seguinte maneira:
$ (document) .ready (function () (var $ toggleButton = $ (". toggle-button"); $ toggleButton.on ("click", function () ($ (this) .toggleClass ("button-open" );));));
Para aqueles que não estão familiarizados com jQuery, inicializamos uma variável com $ toggleButton que contém nosso ícone. Nós o armazenamos em uma variável desnecessariamente usando JavaScript... Em seguida, criamos um ouvinte de eventos que leva em consideração os cliques no ícone. Cada vez que o usuário clica no ícone de hambúrguer, o ouvinte de evento dispara a função toggleClass (), que alterna a classe .button-open.
Com a classe .button-open adicionada, podemos usá-la para alterar a forma como os elementos são exibidos. Usamos as funções translate () e rotate () do CSS3 para fazer as listras superior e inferior girarem 45 graus e a listra do meio se deslocar para a direita e desaparecer. Esta é a animação que você pode personalizar:
Menu de navegação suspenso
Agora que você tem o ícone de hambúrguer, vamos torná-lo útil e criar um menu suspenso ao clicar nele. Esta é a aparência da marcação do menu:
Não entraremos em detalhes sobre cada estilo para este menu agora, em vez disso, vamos nos concentrar em alguns pontos importantes... Em primeiro lugar, é uma classe div e uma .menu-wrap. Dê uma olhada em seus estilos:
Menu-wrap (background-color: # 6968AB; position: fixed; top: 0; height: 100%; width: 280px; margin-left: -280px; font-size: 1em; font-weight: 700; overflow: auto ; transição: 0,25s; índice z: 10;)
A posição é fixa, portanto, ao rolar a página, o menu sempre fica na mesma posição. Uma altura de 100% permite que o menu ocupe todo o espaço vertical da página. Observe que a margem esquerda é definida como um número negativo igual à largura do menu. Isso significa que o menu desaparecerá da janela de visualização. Para torná-lo visível novamente, criamos outra classe toggler com jQuery. Nosso Arquivo JavaScript será parecido com isto:
$ (document) .ready (function () (var $ toggleButton = $ (". toggle-button"), $ menuWrap = $ (". menu-wrap"); $ toggleButton.on ("click", function () ($ (this) .toggleClass ("button-open"); $ menuWrap.toggleClass ("menu-show");));));
Adicione outra variável $ menuWrap que contém o invólucro do menu. Use o mesmo manipulador de eventos que criamos anteriormente. Só que desta vez mudamos duas classes: uma para o botão e outra para o shell do menu. A margem esquerda da classe .menu-show é 0, isso adicionará um efeito de sombra projetada.
Mostrar menu (margem esquerda: 0; sombra da caixa: 4px 2px 15px 1px # B9ADAD;)
Submenus e links
Você pode notar que um dos itens da lista tem uma classe .menu-item-has-children que contém um submenu. Além disso, logo abaixo do link está uma tag span com a classe .sidebar-menu-arrow.
span tem :: após o pseudo-elemento e contém uma seta FontAwesome. Por padrão, o submenu está oculto e só ficará visível quando você clicar na seta. É assim que podemos fazer isso com jQuery:
$ (document) .ready (function () (var $ sidebarArrow = $ (". sidebar-menu-arrow"); $ sidebarArrow.click (function () ($ (this) .next (). slideToggle (300); ));));
Quando clicamos na seta, chamamos uma função, que por sua vez tem como alvo o próximo elemento imediatamente após o intervalo (em nosso caso, é um submenu) e o torna visível. A função que estamos usando é slideToggle. Faz com que o elemento apareça e desapareça. A função em nosso exemplo tem um parâmetro - a duração da animação.
Os itens de menu no exemplo têm um efeito de foco. Ele é criado usando :: após o pseudo-elemento. O código é parecido com este:
Barra lateral do menu li> a :: after (content: ""; display: block; height: 0.15em; position: absoluto; top: 100%; width: 102%; left: 50%; transform: translate (-50% ); imagem de fundo: gradiente linear (para a direita, transparente 50,3%, # FFFA3B 50,3%); transição: posição de fundo .2s .1s atenuação; tamanho de fundo: 200% automático;) .menu-barra lateral li > a: hover :: after (background-position: -100% 0;)
O pseudo-elemento :: after contém um elemento de nível de bloco na parte inferior de cada link com largura e altura totais de 0,15em. Tudo parece um sublinhado. A peculiaridade é que não estamos apenas aplicando a cor de fundo à linha, estamos usando a função gradiente linear () na imagem de fundo. Embora esta função seja para criar gradientes de cor, podemos alterar a cor especificando as porcentagens que desejamos.
Barra lateral do menu li> a :: after (imagem de fundo: gradiente linear (para a direita, 50,3% transparente, # FFFA3B 50,3%);)
Metade da linha é transparente e a outra metade é amarela. Ao fazer o tamanho do fundo de 200%, duplicamos a largura da nossa caixa. Agora, a parte transparente ocupa toda a largura do link, e a parte amarela se move para a esquerda e se torna invisível. Mudamos a posição do plano de fundo ao pairar em -100%. A parte amarela agora está visível e a parte transparente está oculta.
Você pode usar qualquer outra cor em vez da parte transparente. Você também pode experimentar gradientes.
Cada um dos elementos que consideramos funciona como um todo. Você pode criar esse menu usando qualquer design de site da coleção TemplateMonster. Como você pode ver, fazer isso é mais fácil do que você pode imaginar. Boa sorte na criação de sites profissionais e fáceis de usar!
