开启我们的生命+代码
menu-loader.js
menu-loader.js.OK.完美.但是需刷新25.11.5bak
这个版本快但是有时需要刷新
下面为配套的menu.html
<!-- menu.html -->
<table width="1200px"><tr><td>
<div class="nav">
<ul style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<div style="display: flex; flex-grow: 1;"> <!-- 添加flex-grow使菜单项占据更多空间 -->
<li style="width: 110px;"><a href="/Artocarpus/index.html">Home</a> </li> <!-- 增加宽度 -->
<li style="width: 125px;" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Genome</a> <!-- 增加宽度 -->
<ul>
<li><a href="/Artocarpus/ArAl.htm"><i>Artocarpus altilis</i></a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="/Artocarpus/ArHe.htm"><i>Artocarpus heterophyllus</i></a>
<ul>
<li><a href="/Artocarpus/ArHe.htm">ICRAFF_11314</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="/Artocarpus/ArHeCHN2.htm"><i>Artocarpus heterophyllus</i></a>
<ul>
<li><a href="/Artocarpus/ArHeCHN2.htm">S10</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="/Artocarpus/ArHeBD.htm"><i>Artocarpus heterophyllus</i></a>
<ul>
<li><a href="/Artocarpus/ArHeBD.htm">BARI_K3</a></li>
</ul>
</li>
<li><a href="/Artocarpus/ArHi.htm"><i>Artocarpus hirsutus</i></a></li>
<li><a href="/Artocarpus/ArNa.htm"><i>Artocarpus nanchuanensis</i></a></li>
<li><a href="/Artocarpus/ArCa.htm"><i>Artocarpus camansi</i></a></li>
</ul>
</li>
<li style="width: 115px;" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Search</a> <!-- 增加宽度 -->
<ul>
<li><a href="/Artocarpus/search.htm">Basic Search</a></li>
<li><a href="/Artocarpus/mrnaSearch.htm">mRNA Search</a></li>
<li><a href="/Artocarpus/batchsearch.htm">Batch Search</a></li>
<li><a href="/Artocarpus/searchAnnotation.htm">Annotation Search</a></li>
<li><a href="/Artocarpus/IDtransfer.htm">ID Converter Search</a></li>
</ul>
</li>
<li style="width: 115px;" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Tools</a> <!-- 增加宽度 -->
<ul>
<li><a href="/Artocarpus/RNA-seq.htm">Expression</a></li>
<li><a href="/Artocarpus/sequenceserver_blast.htm">BLAST+</a></li>
<li><a href="/Artocarpus/jbrowse.htm">JBrowse</a></li>
<li><a href="/Artocarpus/synview.htm">Synteny Viewer</a></li>
<li><a href="/Artocarpus/GO_enrichment.htm">GO Enrichment</a></li>
<li><a href="/Artocarpus/KEGG_enrichment.htm">KEGG Enrichment</a></li>
<li><a href="/Artocarpus/ArtocarpusCYC.htm">ArtocarpusCYC</a></li>
<li><a href="/Artocarpus/MISAweb.htm">MISAweb</a></li>
<li><a href="/Artocarpus/annotationExhibition.htm">Annotation Exhibit</a></li>
<li><a href="/Artocarpus/primer3.htm">Primer3</a></li>
</ul>
</li>
<li style="width: 115px;" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Family</a> <!-- 增加宽度 -->
<ul>
<li><a href="/Artocarpus/ADH_Family.htm">ADH Family</a></li>
<li><a href="/Artocarpus/BAHD_Family.htm">BAHD Family</a></li>
<li><a href="/Artocarpus/TPS_Family.htm">TPS Family</a></li>
</ul>
</li>
<li style="width: 130px;" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Document</a> <!-- 增加宽度 -->
<ul>
<li><a href="/Artocarpus/statistics.htm">Statistics</a></li>
<li><a href="/Artocarpus/link.htm">Resources</a></li>
<li><a href="/Artocarpus/Terms.htm">Terms</a></li>
</ul>
</li>
<li style="width: 115px;" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">Community</a> <!-- 增加宽度 -->
<ul>
<li><a href="/Artocarpus/manual.htm">Manual</a></li>
<!-- <li><a href="/Artocarpus/feedback.htm">Feedback</a></li> -->
<li><a href="/Artocarpus/download.htm">Download</a></li>
</ul>
</li>
</div>
<!-- 搜索框容器 - 右对齐 -->
<!-- 修改搜索框和按钮的容器样式 -->
<div id="menu-search-container" style="display: flex; align-items: center; height: 40px; padding: 0 10px; background: #78935d; margin-left: 10px; border-radius: 4px;">
<!-- menu.html -->
<form id="menu-search-form" method="get" style="display: flex; align-items: stretch; height: 25px;">
<!-- 搜索框 -->
<input class="selectstyle2" type="text" name="q" size="18" maxlength="200" value=""
placeholder="Site Search..."
style="height: 100%; padding: 0 8px; width: 160px; border-radius: 4px 0 0 4px;
border-right: none; box-sizing: border-box; line-height: normal;">
<!-- 搜索按钮 -->
<button type="button" class="button3" onclick="handleMenuSearch()"
style="height: 100%; width: 30px; padding: 0; border-radius: 0 4px 4px 0;
border-left: none; display: flex; align-items: center; justify-content: center;
box-sizing: border-box; background-color: #78935d;">
<span style="font-size: 16px;">🔍</span>
</button>
</form>
</div>
</ul>
</div>
</td></tr></table>