Como reaproveitar menus HTML em outras paginas

Front-end
#1

Bom dia pessoal,

Sou novato no front-end e gostaria de saber como posso escrever uma vez o menu e reaproveitar nas outras paginas?
Já li alguns posts mas não consegui implementar no meu codigo.

Exemplo;
Tenho um menu da pagina principal e quero reaproveitar em todas as outras paginas desse mesmo site.

Desde já agradeço.

Att,

JH

#2

Fala amigo, blz?

Cara, até onde sei isso não é possível com JavaScript, mas sim PHP por exemplo.
Seria o seguinte, o menu ficaria num arquivo separado e para as páginas que o menu deveria aparecer, bastava importar esse arquivo (menu), entendeu?

#3

@jhs em html5 você consegue reaproveitar código de outras páginas:

index.html

<!DOCTYPE html>
 <html> 
    <body>
        <object type="text/html" data="menu.html"/> 
        <p> Meu parafrafo

menu.html

<!DOCTYPE html>
 <html > 
    <body>
        meu menu

Como aprendizado é interessante saber das possibilidades, mas em poucos momentos você vai querer usar html, css e javascript puros em uma aplicação (eu particularmente não quero nunca). Existem diversos frameworks que te dão esta possibilidade agregada com outras tantas que não vale a pena fazer o trabalho manualmente.
Seja em Java, .Net, PHP, Ruby ou qualque outra linguagem/plataforma existem soluções bem mais interessantes que html puro.

1 curtida
#4

@jhs vc pode usar o php para isso através do <?php include "menu.php" ?> ou <?php require "menu.php" ?>, caso não queira usar o php, pode tentar o Angular JS que tem suporte a include de HTML, vc ia criar um elemento e declarar uma diretiva com o arquivo a ser importado: <div ng-include="menu.html"></div>
Ai é contigo!

Segue links:

PHP: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_include
Angular JS: http://www.w3schools.com/php/php_includes.asp

1 curtida