¿Cómo insertar un "menu.html" dentro de todas tus páginas HTML usando un sencillo script de Java?
Guarda el siguiente script de Java (menu.js) en tu servidor (en mi caso "https://shaker.umh.es/menu.html")
fetch('https://shaker.umh.es/menu.html')
.then(response => response.text())
.then(data => {
document.getElementById('menu-container').innerHTML = data;
});y escribe en todas tus páginas HTML el código que ves en la imagen justo debajo, dentro de la etiqueta 'head':
El archivo "menu.js" usa la función fetch para obtener el contenido de "menu.html" y agregarlo a un elemento HTML de tu elección. Por ejemplo, si deseas agregar el contenido del "menu.html" al elemento con el ID "menu-container", sólo tienes que incluir dentro de la etiqueta 'body', como primera línea de código, el código que ves justo en la imagen superior.
A continuación puedes ver el código completo del fichero "menu.html":
<html>
<head>
<title>Menu Desplegable</title>
<style type="text/css">
#header {
margin-left: auto;
margin-right: auto;
width:750px;
font-family:"Poppins-Regular", Arial, Helvetica, sans-serif;
}
ul, ol {
list-style:none;
}
.nav > li {
float:left;
}
.nav li a {
background-color:#3F71D8;
color:#fff;
text-decoration:none;
padding:6px 8px;
display:block;
}
.nav li a:hover {
background-color:#fff;
color:#3F71D8;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
margin-right: 0;
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
</style>
</head>
<body>
<div id="header">
<ul class="nav">
<li><a href="https://shaker.umh.es/">Home</a></li>
<li><a href="">Teaching</a>
<ul>
<li><a href="https://shaker.umh.es/docencia/No-ense%C3%B1amos,-enga%C3%B1amos.asp">Carta para alumnos</a></li>
<li><a href="https://shaker.umh.es/docencia/bioquimica_de_alimentos/default.asp">Bioquímica de alimentos</a></li>
<li><a href="https://shaker.umh.es/docencia/bioquimica/">Bioquímica</a></li>
<li><a href="https://shaker.umh.es/computing/">Computing</a></li>
<li><a href="https://shaker.umh.es/docencia/modelado_molecular/">Modelado molecular</a></li>
<li><a href="https://shaker.umh.es/docencia/moleculas_bioactivas/default.asp">Moléculas bioactivas</a></li>
<li><a href="https://shaker.umh.es/docencia/TIBs/">TIBs</a></li>
<li><a href="https://shaker.umh.es/jsmol/">Biomoléculas On-Line</a></li>
<li><a href="https://shaker.umh.es/intranet/cocina/">Cocina</a></li>
<li><a href="https://www.youtube.com/watch?v=63wdGDirdXQ">Moodle, copia seguridad</a></li>
</ul>
</li>
<li><a href="">Research</a>
<ul>
<li><a href="https://shaker.umh.es/Investigacion/html5/current-projects.asp" target="_parent">Current projects</a></li>
<li><a href="https://shaker.umh.es/docencia/bioquimica/mm-pbsa.asp" target="_parent">MM|PBSA</a></li>
<li><a href="https://shaker.umh.es/jsmol/PTPs.asp" target="_parent">PTPs</a></li>
<li><a href="https://shaker.umh.es/investigacion/tools.asp" target="_parent">Research tools</a></li>
<li><a href="https://shaker.umh.es/tesis/" target="_parent">Tesis Doctoral</a></li>
<li><a href="https://shaker.umh.es/intranet/" target="_parent">INTRANET</a></li>
</ul>
</li>
<li><a href="">Publications</a>
<ul>
<li><a href="https://shaker.umh.es/publications/publications.papers.asp" target="_parent">Scientific articles</a></li>
<li><a href="https://shaker.umh.es/publications/patens.asp" target="_parent">PATENTS</a></li>
<li><a href="https://shaker.umh.es/3Dmol/" target="_parent">PDBs</a></li>
<li><a href="https://shaker.umh.es/cv/" target="_parent"><em>Curriculum vitae</em></a></li>
</ul>
</li>
<li><a href="">Databases</a>
<ul>
<li><a href="http://adan-embl.ibmc.umh.es/" target="_parent">ADAN database</a></li>
<li><a href="http://docking.umh.es/" target="_parent">docking.umh.es</a></li>
<li><a href="http://dockingfiles.umh.es/MolPort-database/default.asp" target="_parent">MolPort database</a></li>
<li><a href="http://dockingfiles.umh.es/drugbank/DrugBanklist.asp" target="_parent">DrugBank database</a></li>
<li><a href="http://dockingfiles.umh.es/UNII-FDA/UNII2DFDA_1list.asp" target="_parent">UNII-FDA database</a></li>
<li><a href="http://dockingfiles.umh.es/mnp/Marine_natural_productslist.asp" target="_parent">Marine Natural Products</a></li>
<li><a href="http://dockingfiles.umh.es/bindingdb-kinases/" target="_parent">BindingDB Kinase modulators</a></li>
<li><a href="http://dockingfiles.umh.es/lippia_citrodora/Lippialist.asp" target="_parent">Lippia citrodora compounds</a></li>
<li><a href="http://dockingfiles.umh.es/anticancer-drugs/Anticancer_drugslist.asp" target="_parent">Antineoplastic drugs</a></li>
<li><a href="http://docking.umh.es/chemlib/supernatural" target="_parent">SuperNatural II</a></li>
<li><a href="http://docking.umh.es/chemlib/polyphenol" target="_parent">Phenol Explorer</a></li>
<li><a href="http://docking.umh.es/chemlib/hmdatabase" target="_parent">Human Metabolome database</a></li>
</ul>
</li>
<li><a href="">Links</a>
<ul>
<li><a href="https://www.ncbi.nlm.nih.gov/pubmed" target="_parent">PubMed</a></li>
<li><a href="https://www.ebi.ac.uk/Tools/msa/clustalo/" target="_parent">Clustal Omega</a></li>
<li><a href="https://pubchem.ncbi.nlm.nih.gov/compound/3626715#section=Chemical-Vendors" target="_parent">PubChem</a></li>
<li><a href="https://pubchem.ncbi.nlm.nih.gov/search/search.cgi#" target="_parent">PubChem compounds</a></li>
<!--<li><a href="http://www.rcsb.org/pdb/search/smartSubquery.do?smartSearchSubtype=StructureIdQuery&structureIdList=1FAP,1NSG,2FAP,3FAP,4DRH,4DRI,4DRJ,4FAP,4JSN,4JSP,4JSX,4JT5,4JT6,5GPG" target="_parent">PDB-RCBS</a></li>-->
<li><a href="https://www.rcsb.org/structure/5CSL" target="_parent">PDB-RCBS</a></li>
<li><a href="https://www.uniprot.org/uniprotkb/Q00955/entry" target="_parent">UNIPROT</a></li>
<li><a href="">more links</a>
<ul>
<li><a href="https://www.bindingdb.org/bind/chemsearch/marvin/MolStructure.jsp?monomerid=12" target="_parent">BindingDB</a></li>
<li><a href="http://zinc.docking.org/substances/ZINC000095866592/" target="_parent">ZINC database</a></li>
<li><a href="http://www.selleckchem.com/" target="_parent">Kinase inhibitors</a></li>
<li><a href="https://www.molport.com/shop/find-chemicals-by-smiles" target="_parent">MolPort</a></li>
<li><a href="http://lmmd.ecust.edu.cn/admetsar1/predict/" target="_parent">admetSAR</a></li>
<li><a href="https://www.drugbank.ca/drugs/DB00072" target="_parent">Drugsbank</a></li>
<li><a href="https://fdasis.nlm.nih.gov/srs/jsp/srs/uniiListDownload.jsp" target="_parent">UNII FDA list</a></li>
<li><a href="https://www.accessdata.fda.gov/scripts/cder/daf/index.cfm" target="_parent">FDA Approved Drug</a></li>
<li><a href="http://www.enzolifesciences.com/product-listing/?product_subtype=Inhibitor&text=Kinase&gclid=EAIaIQobChMImMeOxMfF1gIVQxYbCh2QWQRLEAAYASAAEgIkuvD_BwE" target="_parent">Kinase inhibitors</a></li>
<li><a href="https://druginfo.nlm.nih.gov/drugportal/drug/categories" target="_parent">Drugs information NIH</a></li>
<li><a href="http://bioinf-applied.charite.de/supernatural_new/index.php?site=search5&np_id=SN00001852" target="_parent">SuperNatural II database</a></li>
<li><a href="http://www.ebi.ac.uk/Tools/msa/clustalo/" target="_parent">Clustal Omega align</a></li>
<li><a href="https://www.ncbi.nlm.nih.gov/nuccore/KF383116.1" target="_parent">GenBank</a></li>
<li><a href="http://phenol-explorer.eu/compounds/592" target="_parent">Phenol Explorer database</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Cloud</a>
<ul>
<li><a href="http://discovirtual.umh.es" target="_parent">UMH cloud</a></li>
<li><a href="https://www.box.com" target="_parent">BOX</a></li>
<li><a href="https://www.dropbox.com/" target="_parent">DropBOX</a></li>
<li><a href="https://www.icloud.com/" target="_parent">iCloud</a></li>
<li><a href="https://outlook.office365.com/owa/miumh.umh.es/" target="_parent">OneDrive</a></li>
<li><a href="https://accounts.google.com/ServiceLogin?service=wise&passive=true&continue=http%3A%2F%2Fdrive.google.com%2F%3Futm_source%3Des%26utm_medium%3Dbutton%26utm_campaign%3Dweb%26utm_content%3Dgotodrive%26usp%3Dgtd%26ltmpl%3Ddrive&urp=https%3A%2F%2Fwww.google.es%2F" target="_parent">Google Drive</a></li>
<li><a href="https://mega.co.nz/" target="_parent">MEGA</a></li>
</ul>
<li><a href="https://shaker.umh.es/buscar/">Tools search</a></li>
</ul>
</div>
</body>
</html>