|
阅读：3825回复：4
一个比较强悍的菜单样式，如何修改成符合标准
这是在蓝色理想论坛上看到的一个菜单样式，我想修改其成符合xhtml1.0标准并且能在ie6.0＆firefox下安全运行，但是无奈js水平不够，做了部分修改还是不行，请高手指导。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="globalNav">
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>M1</div>
<div>my name is mozart0</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>G1</div>
<div>good morning</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>G2</div>
<div>good evening</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>M1</div>
<div>my name is mozart0</div>
</div>
</div>
<div class="fbtn">
<div class="fbtn_mask"></div>
<div class="fbtn_txt">
<div>M2</div>
<div>mm mm i love u</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var current=null;
var nav=document.getElementById("globalNav")
var fbtn,m,t
for(var i=0;i<nav.childNodes.length;i++){
fbtn=nav.childNodes[i]
m=fbtn.childNodes[0]
t=fbtn.childNodes[1]
m.style.top=-30+'px';
t.style.top=-30+'px';
fbtn.style.display="inline";
fbtn.index=i;
fbtn.onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn.onmouseout=function(){
if(window.event&&event.toElement==this.parentElement&¤t==this){
domove(this.index);
current=null;
}
}
}
function domove(num){
var o=globalNav.childNodes[num]
var t=globalNav.childNodes[num].childNodes[1];
var m=globalNav.childNodes[num].childNodes[0];
if(t.style.top.replace('px','')<-60){
t.style.display="none";
var temp=t.childNodes[1].innerHTML;
t.childNodes[1].innerHTML=t.childNodes[0].innerHTML;
t.childNodes[0].innerHTML=temp;
t.style.top=-30+'px';
t.style.display="block";
if(m.style.top.replace('px','')>30)
m.style.top=-30+'px';
else
m.style.top='0px';
}
else{
m.style.top=(parseInt(m.style.top.replace('px',''))+3)+'px';
t.style.top=(parseInt(t.style.top.replace('px',''))-3)+'px';
setTimeout('domove('+num+')',15);
}
}
-->
</script>
</body>
</html>样式表 body{
background-color:#B8B8A0;
}
.fbtn{
display:inline;
overflow:hidden;
border:3px solid white;
padding:1px;
margin:0 3px 0 0;
margin-bottom:3px;
height:30px;
width:115px
}
.fbtn_txt{
position:relative;
top:-30px;
}
.fbtn_txt div{
height:30px;
padding-top:13px;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
color:#d2691e;
text-align:center;
cursor:pointer;
}
.fbtn_mask{
background-color:#ffffff;
position:relative;
height:100%;
width:100%;
top:-30px;
} |
|
|
|
1楼#
发布于：2005-07-11 16:24
高手来指点一下阿。
|
|
|
|
2楼#
发布于：2005-07-11 16:24
<script type="text/javascript">
<!--
var current=null;
var navcounter=0;
var fbtn,m,t;
var nav=document.getElementById("globalNav");
var divnav=nav.getElementsByTagName("div");
var newfbtn=new Array();
for(var i=0;i<divnav.length;i++)
{
if(divnav[i].className=="fbtn")
{
newfbtn[navcounter]=divnav[i];
navcounter++;
}
}
for(var i=0;i<navcounter;i++)
{
fbtn=newfbtn[i];
m=fbtn.getElementsByTagName("div")[0];
t=fbtn.getElementsByTagName("div")[1];;
m.style.top=-30+'px';
t.style.top=-30+'px';
fbtn.style.display="inline";
fbtn.index=i;
fbtn.onmouseover=function(){
if(!current){
current=this;
domove(this.index);
}
else if(current!=this){
domove(current.index);
domove(this.index);
current=this;
}
}
fbtn.onmouseout=function(){
if(window.event&&event.toElement==this.parentElement&¤t==this){
domove(this.index);
current=null;
}
}
m=t=null;
}
function domove(num){
var fbtndiv=newfbtn[num].getElementsByTagName("div");
var t=fbtndiv[1];
var m=fbtndiv[0];
if(t.style.top.replace('px','')<-60){
t.style.display="none";
var tt=t.getElementsByTagName("div");
var temp=tt[1].innerHTML;
tt[1].innerHTML=tt[0].innerHTML;
tt[0].innerHTML=temp;
t.style.top=-30+'px';
t.style.display="block";
if(m.style.top.replace('px','')>30)
m.style.top=-30+'px';
else
m.style.top='0px';
}
else{
m.style.top=(parseInt(m.style.top.replace('px',''))+3)+'px';
t.style.top=(parseInt(t.style.top.replace('px',''))-3)+'px';
setTimeout('domove('+num+')',10);
}
}
-->
</script> |
|
|
3楼#
发布于：2005-07-11 16:24
对了，CSS也要改一下
body{
background-color:#B8B8A0;
}
.fbtn{
position:relative;
float:left;
display:block;
overflow:hidden;
border:3px solid white;
margin:0 3 0 0;
height:30px;
width:110px
}
.fbtn_txt{
position:relative;
top:-30px;
}
.fbtn_txt div{
height:30px;
padding-top:10px !important;
padding-top:7px;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
color:#d2691e;
text-align:center;
cursor:pointer;
}
.fbtn_mask{
background-color:#ffffff;
position:relative;
height:30px;
width:115px;
top:-30px;
} |
|
|
4楼#
发布于：2005-07-11 16:24
强阿，强，主要问题都解决了，谢谢！
|
|
|
