Uma dica interessante para colocarmos em nossos sistemas e sites é a de manter o topo do site fixo, mantendo sempre as principais opções do menu visíveis ao usuário do site ou sistema.
A forma mais fácil de fixar o menu é através do CSS3. Neste post vamos ver quais são as principais propriedades que devem ser configuradas para que o menu esteja sempre visível na página.
Primeiro vamos ver como ficará o nosso menu:
Podemos ver que o texto gera uma barra de rolagem. Ao descermos a barra de rolagem, o menu continuará fixo conforme podemos ver na imagem abaixo:
Neste exemplo (código fonte será disponibilizado mais abaixo) utilizamos apenas uma listagem <ul> e <li> para configurar o nosso menu, conforme detalhamos abaixo:
Agora basta colocarmos o código do menu deixará o menu fixo na parte superior.
A div class=lipsum contem todo o restante do site. Desta forma quando descermos a barra de rolagem, esta div
será colocada abaixo do menu, mantendo-o fixo na parte superior.
Podemos colocar apenas o menu ou um topo inteiro fixo, inclusive na parte inferior, de acordo com a necessidade
do nosso site.
O arquivo para baixar encontra-se neste link.
A forma mais fácil de fixar o menu é através do CSS3. Neste post vamos ver quais são as principais propriedades que devem ser configuradas para que o menu esteja sempre visível na página.
Primeiro vamos ver como ficará o nosso menu:
Podemos ver que o texto gera uma barra de rolagem. Ao descermos a barra de rolagem, o menu continuará fixo conforme podemos ver na imagem abaixo:
Neste exemplo (código fonte será disponibilizado mais abaixo) utilizamos apenas uma listagem <ul> e <li> para configurar o nosso menu, conforme detalhamos abaixo:
Agora basta colocarmos o código do menu deixará o menu fixo na parte superior.
A div class=lipsum contem todo o restante do site. Desta forma quando descermos a barra de rolagem, esta div
será colocada abaixo do menu, mantendo-o fixo na parte superior.
Podemos colocar apenas o menu ou um topo inteiro fixo, inclusive na parte inferior, de acordo com a necessidade
do nosso site.
O arquivo para baixar encontra-se neste link.
.png)
0 comments:
Postar um comentário