Convidado • 13.12.17 14:05
Navegação Deslizante Secundária- Código+Demo 13.12.17 14:05
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.
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.
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.
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.
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.
- Spoiler:
- Código:
<header>
<div class="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="cd-main-nav-wrapper">
<ul class="cd-main-nav">
<li><a href="#0">About</a></li>
<!-- other list items here -->
<li>
<a href="#0" class="cd-subnav-trigger"><span>Categories</span></a>
<ul>
<li class="go-back"><a href="#0">Menu</a></li>
<li><a href="#0">Category 1</a></li>
<!-- other list items here -->
</ul>
</li>
</ul>
</nav>
<a href="#0" class="cd-nav-trigger">Menu<span></span></a>
</header>
<main class="cd-main-content">
<!-- main content here -->
</main>
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:
- Código:
header.nav-is-visible {
transform: translateX(-260px);
}
.cd-main-content.nav-is-visible {
transform: translateX(-260px);
}
.cd-main-nav {
position: fixed;
top: 0;
right: 0;
width: 260px;
visibility: hidden;
}
.cd-main-nav.nav-is-visible {
visibility: visible;
}
.cd-main-nav li ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translateX(260px);
}
.cd-main-nav.moves-out > li > a {
/* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
transform: translateX(-100%);
opacity: 0;
}
.cd-main-nav.moves-out > li > ul {
/* reveal secondary nav */
transform: translateX(0);
}
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:
- Código:
@media only screen and (min-width: 1024px) {
.cd-main-nav {
height: 80px;
/* padding left = logo size + logo left position*/
padding: 0 5% 0 calc(5% + 124px);
text-align: right;
}
.cd-main-nav li ul {
height: 80px;
background-color: #7e4d7e;
/* padding left = logo size + logo left position*/
padding: 0 5% 0 calc(5% + 124px);
transform: translateY(-80px);
transition: transform 0.3s 0.2s;
}
.cd-main-nav li ul li {
opacity: 0;
transform: translateY(-20px);
transition: transform 0.3s 0s, opacity 0.3s 0s;
}
.cd-main-nav .placeholder {
/* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
display: block;
visibility: hidden;
opacity: 0;
pointer-event: none;
}
.cd-main-nav.moves-out > li > ul {
transition: transform 0.3s;
transform: translateY(0);
}
.cd-main-nav.moves-out > li ul li {
opacity: 1;
transform: translateY(0);
transition: transform 0.3s 0.2s, opacity 0.3s 0.2s;
}
}
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
