Navegação Horizontal

Neste capítulo, aprenderemos como adicionar navegação horizontal ou menu items para o site.

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

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

Step 2- É uma lista simples com marcadores para o 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….

Step 5 - Insira o texto que deseja como dica de tela e clique em OK.

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

Step 7 - Da mesma forma, adicione 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"> 
<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"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

Step 8 - Para definir o estilo da navegação superior, vá para o Manage Styles painel.

Step 9 - Clique com o botão direito em “#top-nav”e selecione Modificar estilo. Selecione a categoria 'Borda' e altere a largura para fina.

Step 10 - Selecione a categoria Caixa e desmarque o preenchimento 'Mesmo para todos' e insira 10 nos campos superior e inferior.

Step 11 - Vá para o Position categoria.

Step 12 - Remova o 50 do heightcampo e clique em OK. No painel Aplicar estilos, clique em Novo estilo ...

Step 13 - Entre #top-nav ulno campo Seletor e selecione a folha de estilo Existente na lista suspensa "Definir em". Na categoria Bloco, selecione o centro no campo de teste de alinhamento e vá para a categoria Lista.

Step 14 - Selecione none de list-style-type campo e clique em OK.

Step 15 - Novamente, do Apply Styles painel, clique em Novo estilo ... Enter #top-nav ul lino campo Seletor. Em seguida, selecione a folha de estilo existente no menu suspenso "Definir em" e vá para a categoria Layout.

Step 16 - Selecione inline de display campo e clique em OK.

Step 17 - Vá para o painel Aplicar estilos, clique em Novo estilo ... Enter #top-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 18 - Vá para o Background categoria.

Step 19 - Selecione green como a cor de fundo e vá para o Box category.

Step 20 - Defina o padding values e clique em OK.

Step 21- Agora, vamos ao painel Aplicar estilos novamente e clique em Novo estilo. Entrar#topnav ul li a:hover no campo Seletor e selecione a folha de estilo existente no menu suspenso "Definir em" e selecione black Enquanto o font color.

Step 22 - Agora vá para o Background category.

Step 23 - Selecione a cor de fundo para sua opção de menu quando o mouse estiver passando sobre o item de menu e vá para a categoria Borda.

Step 24- Selecione o estilo, a largura e a cor da borda e clique em OK. Para verificar sua aparência, vá ao menu Arquivo e selecione Visualizar no 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 ↱