CSS鼠標(biāo)感應(yīng)的滑動(dòng)門(mén)菜單

2024-09-05 12:19:40

字體：大中小

供稿：網(wǎng)友

流行鼠標(biāo)滑動(dòng)菜單，實(shí)際上這是一個(gè)大家常說(shuō)的滑動(dòng)門(mén)特效，鼠標(biāo)經(jīng)過(guò)后相應(yīng)版塊隨之變化。

<html><head><title>鼠標(biāo)滑動(dòng)菜單</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type="text/css"></style></head><body><script language=javascript>function secBoard(n){for(i=0;i<menu.childNodes.length;i++)menu.childNodes[i].className="sec1";menu.childNodes[n].className="sec2";for(i=0;i<main.childNodes.length;i++)main.childNodes[i].style.display="none";main.childNodes[n].style.display="block";}</script><div   class="iwvjtn8m0"   id="header">  <ul id="menu">    <li onMouseOver="secBoard(0)" class="sec2">Indexs</li>    <li onMouseOver="secBoard(1)" class="sec1">ASP</li>    <li onMouseOver="secBoard(2)" class="sec1">PHP</li>    <li onMouseOver="secBoard(3)" class="sec1">EXTJS</li>    <li onMouseOver="secBoard(4)" class="sec1">JSP</li>  </ul>  <ul id="main">    <li id="iwvjtn8m0"    class="block">網(wǎng)站索引</li>    <li id="iwvjtn8m0"    class="unblock">ASP的內(nèi)容</li>    <li id="iwvjtn8m0"    class="unblock">PHP的內(nèi)容</li>    <li id="iwvjtn8m0"    class="unblock">EXTJS的內(nèi)容</li>    <li id="iwvjtn8m0"    class="unblock">JSP的內(nèi)容</li>  </ul></div></body></html>

上一篇：JS+Css伸縮菜單，紅色

下一篇：仿淘寶支付寶網(wǎng)站的漂亮導(dǎo)航菜單