elementos e o link relacionado serão especificados na tag. Html
Navegação vertical Como resultado, a estrutura do menu de navegação ficará assim:
O CSS pode ser usado para transformar menus HTML simples em barras de navegação visualmente atraentes. Então, vamos aplicar propriedades CSS aos elementos HTML adicionados.
Estilo todos os elementos
* Todos os elementos do arquivo html são fornecidos com as propriedades de margem e preenchimento com o valor definido como 0px.
Estilo vertical-nav div
.vertical-nav O ".vertical-nav ”É usado para acessar a classe DIV vertical-Nav. A seguir estão as propriedades aplicadas a ele:
““cor de fundo ”Especifica a cor do fundo do elemento. ““largura ”A propriedade ajusta a largura do elemento. ““altura ”A propriedade ajusta a altura do elemento. ““preenchimento-esquerda ”Propriedade define espaço à esquerda do conteúdo do elemento. ““Top-top ”Propriedade define espaço no topo do conteúdo do elemento. ““família de fontes ”A propriedade aplica o estilo de fonte ao texto do elemento. A lista é fornecida para garantir que, se o navegador não suporta o primeiro estilo, a outra será aplicada à fonte. Estilo H1 Elemento da Div Vertical-Nav
.Nav vertical H1 As seguintes propriedades são aplicadas ao cabeçalho H1 elemento:
““Margin-Bottom ”Propriedade define o espaço na parte inferior do cabeçalho. ““cor ”Propriedade define a cor da fonte especificada. Até agora, as propriedades aplicadas exibirão o menu de navegação, como mostrado na imagem abaixo:
Agora, vamos remover as balas da lista.
Estilo "UL" elemento da vertical-nav div
.vertical-nav ul O "estilo de lista ”Propriedade com o valor definido como“nenhum ”Removerá as balas da lista.
Estilo "A" elemento do elemento Li
.vertical-nav ul li a O ".vertical-nav ul li a ”Define o caminho da tag. As seguintes propriedades são aplicadas a ele:
““decoração de texto "Com o valor"nenhum ”Remove a decoração sublinhada da lista. ““mostrar ”Propriedade com o valor definido como“bloquear ”Definirá cada item de lista em uma linha. ““largura ”A propriedade é utilizada para o cenário da largura do elemento. ““fundo ”A propriedade é utilizada para adicionar efeitos ao fundo do elemento. ““cor ”Propriedade especifica a cor da fonte. ““Sombra da caixa ”Propriedade especifica as compensações x e y, embaçar e espalhar raio e cor da sombra. ““Radio de fronteira ”Propriedade faz as bordas do elemento redondo. ““margem ”Propriedade define o espaço ao redor do elemento. ““preenchimento ”Propriedade especifica o espaço em torno do conteúdo do elemento. Como resultado, a barra de navegação parecerá da seguinte maneira:
Vamos aplicar alguns efeitos de transição aos menus de navegação criados acima.
Dica de bônus: aplique a transição para o menu de navegação vertical
Agora, aplicaremos a transição para o “a " Elemento:
transição: tudo 0.3s facilitar; Aqui está a descrição do bloco de código acima:
A propriedade de transição é especificada como “todos ”O que significa que a transição aplicada a todas as propriedades. A duração da transição é especificada como “0.3s ”. A função de transição de tempo é especificada como “facilidade ”, O que resulta em um aumento na velocidade para o meio da transição e depois diminui a velocidade no final. Elemento de estilo “A” no passeio
.vertical-nav ul li a: pairar As propriedades acima aplicadas ao elemento "A" do NAV vertical são descritas abaixo:
““cor de fundo ”Propriedade especifica a cor do fundo do elemento. ““cor ”Propriedade especifica a cor da fonte do elemento. ““transformar ”A propriedade é aplicada com o valor como escala (1.1, 1.5). Esta função escala () define uma transformação de plano 2D. Salve o código acima mencionado e abra-o no navegador. A barra de menus de navegação ficará assim:
Aprendemos com sucesso a criar um menu de navegação vertical com CSS.
Conclusão
A barra de navegação desempenha um papel vital em tornar qualquer site amigável. Consiste em uma lista de links para diferentes seções do aplicativo. Em html, o
e Os elementos são utilizados para fazer a lista de links, especificamente na barra de navegação. Para torná -los interativos, diferentes propriedades de estilo são aplicadas a eles usando CSS. Este estudo explicou o procedimento para criar e animar um menu de navegação vertical com CSS.
