Navegação Vertical

Neste capítulo, aprenderemos como adicionar navegação vertical ou itens de menu ao site. Vamos passo a passo.

Step 1 - Para criar itens de menu ou navegação vertical, vamos adicionar o seguinte código em <div id = “left-nav”> no arquivo index.html que contém a lista de itens de menu.

<div id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- É uma lista com marcadores simples para seu menu superior. Para criar um hiperlink, vá para odesign view ou code view.

Step 3 - Selecione o item que deseja usar como hiperlink e pressione Ctrl + K.

Step 4- Clique no botão ScreenTip…. Insira o texto que deseja como oscreentip e clique em OK.

Step 5 - no Text to display campo, digite Home e selecione o arquivo index.html e clique em OK.

Nesse estágio, nossa página index.html tem a seguinte aparência -

Step 6 - Adicione mais hiperlinks para outros itens de menu, conforme mostrado no código a seguir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul> 
         </div> 
   
         <div id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <li><a href = "index.html" title = "Site Home Page">Home</a></li>
               <li><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul> 
         </div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body>  
</html>

Step 7- Para definir o estilo da navegação superior, vá para o painel Gerenciar Estilos. Clique com o botão direito em#left-nav e selecione Modificar estilo ...

Step 8 - Insira o valor 0,9 no campo de tamanho da fonte e selecione em na lista suspensa ao lado do tamanho da fonte e vá para a categoria Caixa.

Step 9- Verifique o preenchimento 'Mesmo para todos' e digite 5 no campo superior e clique em OK. No painel Aplicar estilos, clique em Novo estilo ...

Step 10 - Entre #left-nav ulno campo Seletor. Selecione a folha de estilo existente na lista suspensa "Definir em" e, na categoria Lista, não selecione nenhum no campo do tipo de estilo de lista e clique em OK.

Step 11 - Mais uma vez, do Apply Styles painel, clique New Style. Desmarque o preenchimento 'Mesmo para todos'. Digite 0,2 no campo inferior e clique em OK.

Step 12 - Entre #left-nav ul li no campo Seletor e selecione a folha de estilo Existente na lista suspensa "Definir em" e vá para a categoria Caixa.

Step 13 - Vá para o painel Aplicar estilos e clique em Novo estilo.

Step 14 - Entre #left-nav ul li a no campo Seletor e selecione a folha de estilo Existente na lista suspensa "Definir em" e selecione branco como a cor da fonte.

Step 15- Vá para a categoria Plano de fundo. Selecione a cor como cor de fundo

Step 16 - Vá para o Box categoria e definir os valores de preenchimento.

Step 17 - Vá para o Layoutcategoria. Selecioneblock de display menu suspenso e clique em OK.

Step 18- Agora vamos ao painel Aplicar estilos novamente e clique em Novo estilo. Entrar#left-nav ul li a:hoverno campo Seletor e selecione a folha de estilo Existente na lista suspensa "Definir em". Selecione preto como a cor da fonte.

Step 19- Agora vá para a categoria Background. Selecione a cor de fundo para sua opção de menu quando o mouse estiver passando sobre o item de menu e clique em OK.

Step 20 - Para verificar sua aparência, vá ao menu Arquivo e selecione Visualizar no seu navegador.

Quando você passa o mouse sobre qualquer item do menu, ele muda o plano de fundo e a cor da fonte.

↰ Previous page Next page ↱