下拉式功能表的簡單製作

來源:互聯網
上載者:User
菜單|下拉

對於如今熱衷於網頁設計的愛好者們來說,單調的網頁效果已經遠遠不能滿足他們新奇的心理了。本文就來介紹一種簡單的下拉式功能表的製作。只要你懂得一點點HTML的知識,就可以。即使什麼也不懂,照葫蘆畫瓢也行,呵呵。

第一步,定義下拉式功能表JS代碼

<SCRIPT language=JavaScript>
<!-- 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v==show)?visible:(v==hide)?hidden:v; }
    obj.visibility=v; }
}
//-->
</SCRIPT>

第二步,在適當的位置插入目錄菜單

<TABLE borderColor=#ffffff height=25 width=150 align=left bgColor=#cccccc border=1 >
 <TBODY> <TR>
    <TD 
     
    borderColorLight=#000000 width=100 bgColor=#ccccff height=15>
      <DIV align=center><A 
       
      href="2#">網上書店</A></DIV></TD> 
 <TD 
     
    borderColorLight=#000000 width=100 bgColor=#ccccff height=15>
      <DIV align=center><A 
       
      href="1#">書盤目錄</A></DIV></TD>
</TR>
</TBODY>
</TABLE>

第三步,插入隱藏層的定義.

<DIV id=Layer1 style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 12px; WIDTH: 88px; HEIGHT: 163px"  

<TABLE borderColor=#ffffff bgColor=#ccccff borderColorLight=#000000 border=1  >
  <TBODY>
  <TR>
    <TD height=15>
      <DIV align=center><A href="A#">最新圖書</A></DIV></TD></TR>
  <TR>
    <TD height=15>
      <DIV align=center><A href="S#">熱點圖書</A></DIV></TD></TR>
  <TR>
    <TD height=15>
      <DIV align=center><A href="D#">隆重推出</A></DIV></TD></TR>
</TBODY></TABLE>
</DIV> 
<DIV id=Layer2 style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; TOP: 42px; LEFT: 85px; WIDTH: 120px; HEIGHT: 127px"  

<TABLE borderColor=#ffffff bgColor=#ccccFF borderColorLight=#000000 border=1  >
  <TBODY>
  <TR>
    <TD height=15>
      <DIV align=center><A 
      href="F#">總目錄</A></DIV></TD></TR>
  <TR>
    <TD height=15>
      <DIV align=center><A 
      href="G#">圖書目錄</A></DIV></TD></TR>
</TBODY></TABLE>
</DIV>

到這裡,你就可以看到一個完整的下拉式功能表的網頁特效了。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。