0

bom dia!

Sou iniciante em HTML e CSS. Criei uma página web onde eu tenho, basicamente, o menu de navegação e tenho as outras páginas em arquivos separados. Eu gostaria que ao clicar numa opção do menu a página fosse atualizada e o menu de navegação continuasse disponível, ou seja, em qualquer página que eu visitar o menu estará lá para que a navegação possa acontecer. Se eu tivesse usando frames, bastaria fazer com a página fosse carregada no frame "conteúdo", porém não uso frame e sim DIVs. Andei pesquisando sobre o assunto e percebi que preciso carregar as páginas na minha . Porém, como eu disse, sou iniciante em HTML e CSS e não tenho ideia de como fazer isso. Alguém poderia me ajudar com esse entrave?

Abaixo o código, somente da tag BODY pra vocês entenderem o contexto.

 <body>
        <div id="cssmenu">
        <ul>
           <li class='active has-sub'>

              <a href='#'>
                 <span>
                    Processo CMD
                 </span>
              </a>

              <ul>
                 <li class='has-sub'><a href='#'><span>Sourcing</span></a>
                    <ul>
                       <li>
                          <a href="">
                             <span>
                                Dúvidas de Processos
                             </span>
                          </a>
                       </li>
                       <li class='last'>
                          <a href='#'>
                             <span>
                                ???
                             </span>
                          </a>
                       </li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Aprovações</span></a>
                    <ul>
                       <li><a href='#'><span>Peças</span></a></li>
                       <li class='last'><a href='#'><span>Invest. Buy</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Excessões</span></a>
                    <ul>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Exclusividade
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      Aprovações
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Capacidade Produtiva
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                    </ul>
                 </li>
              </ul>

           </li>

           <li class='active has-sub'>
              <a href='#'>
                 <span>
                    Processo CMI
                 </span>
              </a>

              <ul>
                 <li class='has-sub'><a href='#'><span>Sourcing</span></a>
                    <ul>
                       <li>
                          <a href='#'>
                             <span>
                                Dúvidas de Processos
                             </span>
                          </a>
                       </li>
                       <li class='last'>
                          <a href='#'>
                             <span>
                                ???
                             </span>
                          </a>
                       </li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Aprovações</span></a>
                    <ul>
                       <li><a href='#'><span>Peças</span></a></li>
                       <li class='last'><a href='#'><span>Invest. Buy</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Excessões</span></a>
                    <ul>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Exclusividade
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      Aprovações
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Capacidade Produtiva
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                    </ul>
                 </li>
              </ul>

           </li>

           <li class='active has-sub'>
              <a href='#'>
                 <span>
                    Géberson
                 </span>
              </a>

              <ul>
                 <li class='has-sub'><a href='#'><span>Sourcing</span></a>
                    <ul>
                       <li>
                          <a href='#'>
                             <span>
                                Dúvidas de Processos
                             </span>
                          </a>
                       </li>
                       <li class='last'>
                          <a href='#'>
                             <span>
                                ???
                             </span>
                          </a>
                       </li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Aprovações</span></a>
                    <ul>
                       <li><a href='#'><span>Peças</span></a></li>
                       <li class='last'><a href='#'><span>Invest. Buy</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>Excessões</span></a>
                    <ul>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Exclusividade
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      Aprovações
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                       <li class='has-sub'>
                          <a href='#'>
                             <span>
                                Capacidade Produtiva
                             </span>
                          </a>
                          <ul>
                             <li>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                             <li class='last'>
                                <a href='#'>
                                   <span>
                                      ???
                                   </span>
                                </a>
                             </li>
                          </ul>
                       </li>
                    </ul>
                 </li>
              </ul>

           </li>
           <li class='last'>
              <a href='#'>
                 <span>
                    Géberson R
                 </span>
              </a>
           </li>
        </ul>
        </div>

        <div id="conteudo">

        </body>

3
  • Você quer usar o menu em diversos outros lugares? Crie ele em um arquivo separado e chame ele onde for necessário. Exemplo: require menu.html (nesse caso usando php). Se quiser usar Jquery pode usar a função load api.jquery.com/load. Commented 30/04/2015 às 14:32
  • Géberson: fechei a pergunta como duplicada pois acho que encontras resposta lá na outra pergunta. Se tiveres problemas específicos nalgum passo da implementação podes colocar uma nova pergunta mostrando o código que fizeste e explicando onde deu erro.
    – Sergio
    Commented 30/04/2015 às 14:57
  • Géberson estas respostas lhe atenderam?
    – Ricardo
    Commented 13/06/2015 às 13:20

2 Respostas 2

2

Para isso funcionar em arquivos .html, você precisará carregar o conteudo dinamicamente utilizando-se de ajax, que manipulará o conteudo da div.

http://www.w3schools.com/ajax/

Ou poderá utilizar uma linguagem como o PHP, trabalhando com o conteúdo dinamicamente, mas com recarregar de tela.

Ainda assim, mesmo dentro da div, há a possibilidade de utilizar o iFrame, que carrega "pedaços" da tela, de acordo com o seu id e src. http://www.w3schools.com/tags/tag_iframe.asp

1

Como eu faço: eu quebro o HTML em arquivos .php modulares (cada um com um menu, navbar e etc.), depois crio um .php principal e colo os requires dos componetes desta forma:

    require_once 'components/head/head-advertisements.php';
    require_once 'components/navbar/navbar-main.php';
    require_once 'components/body/body-buy-credits.php';
    require_once 'components/footer/footer-main.php';
    require_once 'components/modals/advanced-search-modal.php';
    require_once 'components/modals/logout-modal.php';
    require_once 'components/scripts/scripts.php';

dentro de cada pequeno arquivo .php eu coloco o conteudo HTML no seu caso o menu (não necessidade de nenhuma edição (quando a pagina é estática) logo é só copiar e colar a parte desejada do HTML para o arquivo .php (para executar você precisará de um servidor http, eu constumo usar o XAMPP)).

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .