Um dos aspectos mais importantes no desenvolvimento de software e sites é a criação de menus. A Microsoft e sua criação mais famosa, o sistema operacional Windows, devem ser tomadas como um excelente exemplo. Apesar de este produto ser usado pela esmagadora maioria dos usuários de PC no mundo, as críticas não só não diminuem, como também crescem constantemente. Basicamente, trata-se do inconveniente da localização dos itens do menu. A seguir está uma descrição de como criar menus em CSS e Expression Web.
Instruções
Passo 1
Para começar a criar um menu horizontal, vá para Gerenciar estilo e clique no botão Novo estilo. Nomeie o novo estilo como Seletor ul li. Importante! Certifique-se de que o arquivo gerado tenha a extensão drop-down.css. Para fazer um menu horizontal, indique ao elemento criado que ele será exatamente horizontal. Em seguida, determine a largura de cada item do menu e remova todos os pontos desnecessários colocados na frente de todos os itens da lista.
Passo 2
Vá para a opção Layout, defina o atributo Display como Inline para fazer o alinhamento horizontal. Em seguida, defina o valor Left para o atributo Float e clique no botão Apply. Defina todos os itens da lista em uma linha. Para que eles sejam colocados ordenadamente e não rastejem uns sobre os outros, no atributo Largura, defina o valor da Posição para 150 px. Verifique se todos os elementos da lista têm o mesmo tamanho. Em seguida, remova os pontos na frente de todos os elementos - para isso, vá para o atributo Lista e defina o parâmetro Nenhum no item do tipo Estilo de lista. Clique em OK para que todas as alterações sejam aceitas e aplicadas.
etapa 3
Ajuste o tamanho e o estilo da fonte para o ul li. Para fazer isso, vá para Gerenciar Estilos e clique com o botão direito do mouse na ul li e selecione Modificar Estilo. A caixa de diálogo familiar aparecerá. Vá para Font, selecione o atributo Font-family e defina-o como Sans-serif, Arial, Helvetica. Em seguida, ajuste o tamanho da fonte definindo-o como 0, 9. Depois disso, defina o atributo Text-transform como Uppercase. Ajuste a altura dos itens de menu no atributo Altura - Posição, definindo o valor como 30 px.
Passo 4
Após concluir todas as ações corretivas, salve o arquivo como menu.html. Em seguida, teste o menu criado em diferentes navegadores para se certificar de que funciona corretamente. Como você pode ver, o design do menu horizontal é bastante simples.
