Comentário: Este artigo apresenta principalmente o método de usar o JQuery para implementar o menu de navegação responsivo HTML5. Amigos que precisam podem se referir a ele.
Implementado através do JQuery+HTML5, quando a janela do navegador é reduzida ou acessada pelo telefone celular, o menu de navegação se torna um menu suspenso de botão. Imagem de reprodução:
Código HTML:
<ul>
<li> <a href = "#"> botão </a> </li>
<li> <a href = "#"> botão </a> </li>
</ul>
</Arn>
Código jQuery:
Através do código jQuery a seguir, <div id = menu-icon> será adicionado a <Nav id = Nav_wrap>. Ao clicar em #menu-icon, o menu será exibido:
<script type = "text/javascript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.minmin.js "> </script" "> </script </a >>
<script type = "text/javascript">
$ (document) .ready (função ($) {
/ * Icon do menu Prendere */
$ ('#NAV-WRAP'). Apresença ('<div> menu </div>');
/ * alternar nav */
$ ("#menu-icon"). on ("clique", function () {
$ ("#NAV"). SlideToggle ();
$ (this) .toggleClass ("ativo");
});
});
</script>
Visualizando elementos através do navegador pode ver o código exibido no HTML da seguinte forma:
<MAV>
<div> menu </div>
<ul>
<li> <a href = "#"> botão </a> </li>
<li> <a href = "#"> botão </a> </li>
</ul>
</Arn>
Código CSS:
No código CSS, primeiro defina o atributo do #Menu-icon a ser exibido: Nenhum;, depois use a consulta de mídia para julgar a consulta da mídia e alterar o #Menu-icon para exibir: Block;. A seguir, é apresentado o código do estilo CSS para determinar o estilo quando a largura do navegador é inferior a 600px:
O efeito final é a primeira renderização no artigo.