Anonymous Convidado  • 13.12.17 14:05

Navegação Deslizante Secundária- Código+Demo Empty Navegação Deslizante Secundária- Código+Demo 13.12.17 14:05

Navegação Deslizante Secundária- Código+Demo Secondary-sliding-navigation-featured
Um menu secundário arrojado que desliza sobre a navegação principal.

O recurso de hoje é um snippet simples e acessível: uma navegação secundária que desliza para baixo, substituindo os principais links de navegação.
Esta abordagem pode ser uma alternativa para um menu suspenso padrão, em particular, se quiser enfatizar mais a sub-navegação. Além disso, você pode facilmente personalizar o snippet e usar o slide no painel para uma caixa de pesquisa, ou um formulário de login - apenas para lhe dar algumas idéias.


Criando a estrutura
O HTML está estruturado em 2 elementos principais: um  <header>embrulho da navegação principal e um  <main>conteúdo contendo a página. 
A navegação principal é composta por 2 listas não ordenadas aninhadas, envolvidas semanticamente em um <nav>elemento.

Spoiler:

Adicionando estilo
Em dispositivos pequenos, a navegação principal está no lado direito, escondida por padrão; Quando o usuário clicar no ícone do menu, o <main>e os <header>elementos se traduzem para a esquerda (a nav-is-visibleclasse é aplicada) para revelar a navegação. 
Quando o usuário clica .cd-subnav-trigger, a navegação principal é pressionada para a esquerda e substituída pela navegação secundária.

Spoiler:

Em dispositivos desktop (largura de exibição mais de 1024px), a navegação secundária é colocada em cima do cabeçalho (fora da viewport) e desliza na cobertura da navegação principal. Nós atribuímos um índice z superior ao .cd-logoe .cd-subnav-triggerpara que eles permaneçam visíveis após a sub-navegação ter deslizado. 
Além disso, atribuímos a sub-navegação o mesmo preenchimento que o  .cd-main-nav  e inseriu um  .placeholder elemento como o último item da lista ocupando o mesmo espaço do  .cd-subnav-trigger:
Desta forma, garantimos que os itens da lista de sub-navegação não cobrem o logotipo e o  .cd-subnav-trigger.

Spoiler:


Manipulação de eventos
Usamos jQuery para adicionar / remover classes de acordo com eventos específicos. 
A única coisa importante a observar é que, na estrutura HTML inicial , a navegação está dentro do <header>. No celular, queríamos que a navegação estivesse do lado, oculta por padrão, e era mais fácil para nós tê-la fora do cabeçalho. Então, usamos jQuery para mover a navegação fora do cabeçalho em dispositivos pequenos.


DEMO


 DOWNLOAD 



Créditos
CodyHouse


Traduzido por Google Tradutor
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.