一個CSS個性菜單

2024-09-05 12:19:20

字體：大中小

來源：轉載

供稿：網友

CSS+JS個性菜單，還會抖動哦，藍色風格，代碼有點復雜，不是很實用，只為研究一個JS技術吧。

<html><head><title>個性的菜單</title><style type="text/css"></style><script language="JavaScript"></script></head><body><p><div   class="iwvjtn8m0"   id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1">  <div   class="iwvjtn8m0"   id="Layer2" style="position:absolute; left:666px; top:59px; width:67px; height:52px; z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible" class="t">     <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">      <tr>         <td align="center" valign="top"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer2',611,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',666,59,5,30,0,0)">on 1          ASP.NET          DELPHI          VC++          </td>      </tr>    </table>  </div>  <div   class="iwvjtn8m0"   id="Layer3" style="position:absolute; left:666px; top:81px; width:66px; height:84px; z-index:3; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; visibility: visible" class="t">     <table width="100%" border="0" cellspacing="0" cellpadding="0">      <tr>         <td>          <div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer3',611,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',666,81,5,30,0,0)">on 2            ASP            php            Java            </div>        </td>      </tr>    </table>  </div>  <div   class="iwvjtn8m0"   id="Layer4" style="position:absolute; width:68px; height:80px; z-index:4; left: 666px; top: 102px; background-color: #0064FF; layer-background-color: #0064FF; border: 1px none #000000; visibility: visible" class="t">     <table width="100%" border="0" cellspacing="0" cellpadding="0">      <tr>         <td>          <div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer4',611,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',666,102,5,30,0,0)">on 3            AJAX            JS            JSP            </div>        </td>      </tr>    </table>  </div>  <div   class="iwvjtn8m0"   id="Layer5" style="position:absolute; width:65px; height:127px; z-index:5; left: 265px; top: 56px">     <table width="100%" border="0" cellspacing="0" cellpadding="0" height="72">      <tr>         <td height="24" onMouseOver="P7AniMagic('Layer2',611,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',666,59,5,30,0,0)">    </td>      </tr>      <tr>        <td height="24" onMouseOver="P7AniMagic('Layer3',611,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',666,81,5,30,0,0)">    </td>      </tr>      <tr>        <td height="24" onMouseOver="P7AniMagic('Layer4',611,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',666,102,5,30,0,0)">    </td>      </tr>    </table>  </div></div></body></html>

上一篇：CSS選項卡、滑動門代碼

下一篇：左側豎向選項卡TAB