Como Fazer Um Menu Deslizante

Índice:

Como Fazer Um Menu Deslizante
Como Fazer Um Menu Deslizante

Vídeo: Como Fazer Um Menu Deslizante

Vídeo: Como Fazer Um Menu Deslizante
Vídeo: Criando Menu Deslizante com HTML, CSS e jQuery 2024, Maio
Anonim

Um dos aspectos mais importantes do desenvolvimento de website e software é a criação de menu. Um belo menu deslizante continua sendo uma referência para muitos proprietários de sites e programadores. Isso pode ser feito usando CSS e ferramentas da Web Expression.

Como fazer um menu deslizante
Como fazer um menu deslizante

Instruções

Passo 1

Abra o Expression Web e vá para Gerenciar estilo para começar a criar um menu deslizante e pressione a tecla Novo estilo. Nomeie o novo estilo Selector ul li. Certifique-se de que o arquivo gerado tenha a extensão drop-down.css. Para criar um menu deslizante, especifique a posição apropriada na tela. Determine a largura de cada um dos itens de menu e remova pontos desnecessários que possam estar na frente deles.

Passo 2

Execute a opção Layout e defina o atributo Display. Dê a ele um valor embutido apropriado para alinhar na tela. Defina o atributo Float como Left e pressione a tecla Apply. Defina todos os elementos da lista em uma linha. Para mantê-los em uma ordem organizada e não sobrepostos, defina o atributo Largura como Posição no formato 150 px. Certifique-se de que todos os itens da lista sejam do mesmo tamanho. Remova os pontos na frente de cada elemento acessando o atributo Lista e definindo o tipo de Estilo de Lista como Nenhum. Clique em "OK" para aceitar as alterações e entrar em vigor.

etapa 3

Ajuste o estilo e o tamanho da fonte para o ul li. Vá para Gerenciar Estilos e clique com o botão direito do mouse na ul li, escolhendo Modificar Estilo. Você verá o menu de diálogo já familiar. Vá para Font, selecione Font-family e defina este atributo como Helvetica, Arial, Sans-serif. Ajuste o tamanho da fonte e defina-o como 0, 9. Defina o atributo de transformação de texto para maiúsculas. No atributo Altura - Posição, especifique a altura exata dos itens de menu, definindo o valor como 30 px.

Passo 4

Salve o arquivo como menu.html quando todas as ações corretivas forem concluídas. Teste o menu que você acabou de criar em vários aplicativos e navegadores para ver se funciona. Como você pode ver, não é difícil criar esse menu.

Recomendado: