- Sobre
- Instalação
- Exemplo
Css
- Grid
- Imagens
- Tabelas
- Estilos
Componentes
- Cabeçalhos
- Botões
- Forms
- Cards
- Rodapé
Javascript
- Menu lateral
- Modais
- Slider
Modelo básico
O Menu de navegação é composto basicamente por 2 elementos: Logo à esquerda e botões à direita.
<nav>
<a class='logo' href="">Japu.css</a>
<ul>
<li><a href="">Btn 1</a></li>
<li><a href="">Btn 2</a></li>
</ul>
</nav>
Modelo container
Neste modelo, o conteúdo do cabeçalho está contido em um container.
<nav>
<div class="container">
<a class='logo' href="">Japu.css</a>
<ul>
<li><a href="">Btn 1</a></li>
<li><a href="">Btn 2</a></li>
</ul>
</div>
</nav>
Modelo com imagem
Para inserir uma imagem no cabeçalho, basta acrescentar o objeto img dentro do objeto com classe logo.
<nav>
<div class="container">
<a class='logo' href="">
<img src='images/japu.png'>
</a>
<ul>
<li><a href="">Btn 1</a></li>
<li><a href="">Btn 2</a></li>
</ul>
</div>
</nav>
Modelo fixo
Neste modelo, o header fica preso ao topo da página. Basta acrescentar a classe fixed. Lembrando que o conteúdo terá um novo ponto 0 como referência. Neste caso, você precisará acrescentar a classe wrap ao seu elemento pai do seu conteúdo. Esta classe afasta o conteúdo do topo e se encaixa perfeitamente no header fixo.
<nav class='fixed'>
<a class='logo' href="">Japu.css</a>
<ul>
<li><a href="">Btn 1</a></li>
<li><a href="">Btn 2</a></li>
</ul>
</nav>
<div class="wrap"></div>
Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus.