 |
|
||||
Você está aqui: CSS ::: Dicas & Truques ::: Barras de Navegação, Menus e Dropdowns |
Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade displayQuantidade de visualizações: 685 vezes |
|
Nesta dica mostrarei como podemos criar uma barra de menus horizontal usando CSS. Para isso cada item de menu será um elemento <li>, contidos dentro de um elemento <ul>. O truque é definir o valor inline-block para a propriedade display de cada elemento <li>. Veja a página HTML e CSS completa para o exemplo:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
#menu{
background-color: #eeeeee;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
font-size: 20px;
padding: 20px;
text-decoration: none;
}
#menu li a{
text-decoration: none;
}
</style>
</head>
<body>
<h1>Exemplo de Barra de Menu Horizontal</h1>
<p>Veja como podemos usar o valor inline-block para
a propriedade display do CSS para criar uma barra
de menu na horizontal</p>
<ul id="menu">
<li><a href="index.php">Início</a></li>
<li><a href="servicos.php">Serviços</a></li>
<li><a href="produtos.php">Produtos</a></li>
<li><a href="contatos.php">Contatos</a></li>
</ul>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
|
JavaScript - Como testar se todos os elementos de um array satisfazem uma condição em JavaScript usando a função every() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
