Menu Principal em arquivo externo

Atualizar o menu principal de nossos sites pode ser uma tarefa muito trabalhosa, principalmente se o site for composto por um número de página muito grande, imagine um site com 30 página e todas elas com o menu principal presente, agora imagine que você precise, adicionar, remover ou alterar um link do menu principal, já conseguiu ver o tamanho do trabalho? Teremos que realizar a mesma alteração em todas as páginas! E se você errar um dos links, olha o tamanho do problema que teremos!

Por este e por outros motivos como a praticidade por exemplo é que usamos os menus em arquivos separados, desta maneira, basta modificar somente no arquivo no menu que todas as páginas irão carregar o menu atualizado sempre.

É extremamente simples trabalhar com menu externo, basta usarmos a tag <object> para inserir a página HTML que contém o menu, veja um exemplo simples a seguir.

Vamos construir uma página com nome “menu.html” sem aspas, e inserir alguns links de forma simples.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
     <meta charset="utf-8">
</head>
<body>

     <div id="menu">
          <a href="http://www.youtube.com.br" target="_parent">youtube</a>
          <a href="http://www.youtube.com.br/canalfessorbruno" target="_parent">CFB</a>
          <a href="http://cfbcursos.com.br" target="_parent">Site CFB</a>
     </div>

</body>
</html>

Ótimo, este será o menu que iremos “anexar” em todas as nossas páginas.

Vamos construir uma página “index.html” que irá receber este menu.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
     <meta charset="utf-8">
     <title>Menu em arquivo externo</title>
</head>
<body>

     <nav>
          <object width="100%" height="65px" data="menu.html"></object>
     </nav>

</body>
</html>

Confira o resultado a seguir.

menuExterno-1

Pronto, agora sempre que precisarmos do menu principal basta inserir o comando a seguir, note que o parâmetro “data” da tag “object” aponta para o arquivo “menu.html”.

<object width="100%" height="55px" data="menu.html"></object>

Este comando irá carregar o menu no local que a tag <object> foi inserida.

Vamos aplicar mais estilo ao nosso menu.

No arquivo “menu.html” altere o código conforme a seguir.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="estilos.css">
</head>
<body>

     <div id="menu">
          <ul>
              <li><a href="http://www.youtube.com.br" target="_parent">youtube</a></li>
              <li><a href="http://www.youtube.com.br/canalfessorbruno" target="_parent">CFB</a></li>
              <li><a href="http://cfbcursos.com.br" target="_parent">Site CFB</a></li>
          </ul>
     </div>

</body>
</html>

menuExterno-2

Note que já adicionamos o link para a folha de estilos CSS.

<link rel="stylesheet" href="estilos.css">

Já inserimos o link para a folha de estilos, então vamos cria-la, crie um novo arquivo chamado “estilos.css” e adicione os comandos para a formatação do menu a seguir.

#menu{
     width:453px;
}

#menu li:hover {
     background:#800;
}

#menu ul {
     list-style:none;
     background:#888;
     padding:0px;
     margin:0px;
}

#menu li {
     height:47px;
     display:table-cell;
     text-align:center;
     vertical-align:middle;
     width:150px;
     border-right:1px solid #FFF;
}

#menu ul li a{
     text-decoration:none;
     font-size:20px;
     color:#FFF;
}

Pronto, isso fará nosso menu se apresentar com uma cara melhor.

menuExterno-3

Tudo pronto, agora em todas as páginas do site que forem usar o menu principal basta adicionar o código a seguir.

<nav>
     <object width="100%" height="65px" data="menu.html"></object>
</nav>

OBS Final: Esta técnica pode ser usada para outros fins, por exemplo, se quiser carregar uma página com notícias em uma caixa lateral, ou qualquer outro item em qualquer lugar da página.

Rating: 5.0/5. From 6 votes.
Por favor agurade...

Comentários

  • walber

    Ola fessor bruno queria sabe qual melhor fazer uma faculdade tipo sistema de informação ou curso específico tipo html

    Sem votos ainda.
    Por favor agurade...
    • Bruno Campos

      Faculdade é sempre bom, mas isso não significa que você vai aprender HTML na faculdade

      Rating: 5.0/5. From 1 vote.
      Por favor agurade...