ybkftxz 发表于 2007-4-27 11:26:31

***页面特效***微软菜单

把下列代码加到网页的<body></body>标签之间 从google下载我的照片管理软件
要完成此效果把如下代码加入到<body>区域中

<style>
.flyoutmenu {
    background-color: #f1f1f1;
    border-color: #999999;
    border-width: 0 1px 1px 0;
    border-style: solid;
}
.flyoutmenu td.flyoutlink{
    border-color: #f1f1f1;
    border-width: 1px;
    border-style: solid;
    font-family: verdana,arial;
    font-size: 70%;
    padding: 1px 25px 3px 6px;
    cursor: hand;
}
.flyoutlink a {
    color: black;
    text-decoration: none;
}
.flyoutlink a:hover {
    color: black;
    text-decoration: none;
}
.flyoutlink a:visited {
    color: black;
    text-decoration: none;
}
.flyoutlink a:active {
    color: black;
    text-decoration: none;
}
   
</style>
<script>
function over(){
    if(obj=event.srcelement)
      if(obj.classname=="flyoutlink"){
            obj.style.backgroundcolor='#cccccc'
            obj.style.bordercolor = '#999999'
      }
}
function out(){
    if(obj=event.srcelement)
      if(obj.classname=="flyoutlink"){
            obj.style.backgroundcolor='#f1f1f1'
            obj.style.bordercolor = '#f1f1f1'
      }
}
function show(d){
    if(obj=document.all(d))    obj.style.display=""
}
function hide(d){
    if(obj=document.all(d))    obj.style.display="none"
}

document.onmouseover=over
document.onmouseout=out
</script>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr><td>
    <table class="flyoutmenu" width="180" cellpadding="2" cellspacing="0" border="0" >
      <tr><td>
      <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutlink">微软菜单</td></tr>
            <tr><td class="flyoutlink" onmouseover=show("div1")onmouseout=hide("div1")><a href="javascript:alert(1)">美国</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(2)">加拿大</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(3)">英国</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(4)">法国</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(5)">意大利</a></td></tr>
      </table>
    </table>
    <table class="flyoutmenu" width="180" cellpadding="2" cellspacing="0" border="0" >
      <tr><td>
      <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutlink" ><a href="javascript:alert(5)">澳大利亚</a></td></tr>
      </table>
      </td></tr>
    </table>
    <table class="flyoutmenu" width="180" cellpadding="2" cellspacing="0" border="0" >
      <tr><td>
      <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutlink" handle="1672" onmouseover=show("div7")onmouseout=hide("div7")><a href="javascript:alert(6)">中国</a></td></tr>
            <tr><td class="flyoutlink" ><a href="javascript:alert(7)">日本</a></td></tr>

      </table>
      </td></tr>
    </table>
    </td></tr>
</table>
<div id=div1 style="position:absolute;display:none;left:191;top:37" onmouseover=show("div1") onmouseout=hide("div1")>
    <table class="flyoutmenu" width="180" cellpadding="2" cellspacing="0" border="0" >
      <tr><td>
      <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutlink">美国菜单</td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(1)">纽约</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(2)">芝加哥</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(3)">三藩市</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(4)">华盛顿</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(5)">费城</a></td></tr>
      </table>
    </table>
</div>
<div id=div7 style="position:absolute;display:none;left:191;top:165" onmouseover=show("div7") onmouseout=hide("div7")>
    <table class="flyoutmenu" width="180" cellpadding="2" cellspacing="0" border="0" >
      <tr><td>
      <table width="175" cellpadding="0" cellspacing="0" border="0">
            <tr><td class="flyoutlink">中国菜单</td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(1)">北京</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(2)">上海</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(3)">深圳</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(4)">厦门</a></td></tr>
            <tr><td class="flyoutlink"><a href="javascript:alert(5)">大连</a></td></tr>
      </table>
    </table>
</div>
      










--------------------------------------

http://www.huoyue.com.cn 活跃网,活跃人群的论坛,访问活跃网,将给您带来意想不到的收获,还可以免费为您开论坛,让您免费拥有与朋友、网友交流的论坛。你是年轻人吗?你活跃你就上!
页: [1]
查看完整版本: ***页面特效***微软菜单