CSS覆蓋菜單在Firefox

的style.css

.row { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    height: 22px; 
    width: 100%; 
    background: black; 
    color: white; 
    padding: 0px; 
} 

.content { 
    margin-top: 22px; 
    padding: 10px; 
} 

div.navigation span.left { 
    float: left; 
    text-align: left; 
    font-weight: bold; 
    width: 49%; 
    } 

div.navigation span.right { 
    float: right; 
    text-align: right; 
    font-weight: bold; 
    width: 49%; 
    } 

.menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    background: black; 
    color: white; 
    padding: 10px; 
opacity:0.9; 
display: ; 
}

navigation.htm

<html> 
<head> 
<meta content="text/html; charset=ISO-8859-1" 
http-equiv="content-type"> 
<title>Home</title> 
<link rel="StyleSheet" href="style.css" type="text/css"> 
<script type="text/javascript"> 
function dispHandle(obj) 
{ 
if (obj.style.display == "none") 
obj.style.display = ""; 
else 
obj.style.display = "none"; 
} 

</script> 
</head> 
<body onload="dispHandle(uni);"> 
<div class="navigation"> 
<div id="container" style="width: 100%;"> 
<div class="row"> <span class="left"><a onmouseover="dispHandle(uni)">Activities</a><img 
style="width: 18px; height: 18px;" alt="" src="images/void.png"></span> 
<span style="font-weight: bold;" class="right"><img 
style="width: 18px; height: 18px;" alt="" src="images/volume.png"><img 
style="width: 18px; height: 18px;" alt="" src="images/bluetooth.png"><img 
style="width: 18px; height: 18px;" alt="" src="images/wireless.png"><img 
style="width: 26px; height: 18px; font-style: italic;" alt="" 
src="images/battery.png"><iframe 
src="http://free.timeanddate.com/clock/i2vrnsgh/fcfff/tct/pct/ftb" 
allowtransparency="true" frameborder="0" height="18" width="86"></iframe><img 
style="width: 18px; height: 18px;" alt="" src="images/user.png">Demi 
Lovato&nbsp;</span> 
</div> 
</div> 
</div> 
<div id="uni"> 
<div style="text-align: center;" class="menu"> <br> 
<img onclick="dispHandle(uni)" 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
    src="http://demilovato.sourceforge.net/images/close.png"><br> 
<br> 
<div align="center"> 
<table style="text-align: left; width: 410px; height: 268px;" border="1" 
cellpadding="2" cellspacing="2"> 
<tbody> 
<tr> 
<td style="vertical-align: top; text-align: center;"><a 
href="index.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Home.png"></a><br> 
Home<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Downloads.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Downloads.png"></a><br> 
Downloads<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Screenshots.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Screenshots.png"></a><br> 
Screenshots<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Links.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Links.png"></a><br> 
Links<br> 
</td> 
</tr> 
<tr> 
<td style="vertical-align: top; text-align: center;"><a 
href="FAQ.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/FAQ.png"></a><br> 
FAQ<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="Contact.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/Contact.png"></a><br> 
Contact<br> 
</td> 
<td style="vertical-align: top; text-align: center;"><a 
href="About.htm"><img 
style="border: 0px solid ; width: 48px; height: 48px;" alt="" 
src="images/About.png"></a><br> 
About<br> 
</td> 
<td style="vertical-align: top;"><br> 
</td> 
</tr> 
</tbody> 
</table> 
<br> 
</div> 
</div> 
</div> 
</body> 
</html>

它的假設是能夠鼠標活動，它顯示了一個全屏的css菜單，然後通過點擊XI關閉，通過show hide javascipt函數來做到這一點。（Safari，Chrome，Rekonq）另外，如何在默認情況下隱藏它，而不是在onload上？

來源

2011-12-12 zeitue

例這裏的解決方案：http://jsfiddle.net/msZVY/3/

如Firefox的控制檯說，Firefox不知道什麼是「單向」的說法。函數dispHandle(uni)表示「使用具有對象uni的參數執行dsipHandle函數」。 uni沒有定義。

我不確定爲什麼Safari/Chrome能夠「更聰明」，並且看到uni是元素的id。（也許別人能賜教），但Firefox的你應該使用此明確聲明：

function dispHandle(id) 
{ 
    obj = document.getElementById(id); //define obj using the id 
    if (obj.style.display == "none") 
    obj.style.display = "block"; 
    else 
    obj.style.display = "none"; 
}

在您的內聯JavaScript，你應該把單引號。 onmouseover="dispHandle('uni')"代替onmouseover="dispHandle(uni)"

爲了回答您的其他問題有關的另一種方式來隱藏它除了onload事件，你可以用普通的CSS做到這一點：

#uni{display:none}

在你上面的功能我也改變了它obj.style.display = "";到obj.style.display = "block";因爲這將明確地將其在樣式表中更改爲div的默認塊顯示，覆蓋您的style.css

來源

2011-12-12 06:25:55 Vigrond

謝謝工作完美。這裏也是網站http://demilovato.sf.net – zeitue

不錯，我喜歡你的設計理念。很高興我能幫上忙。 – Vigrond

感謝我將它從GNOME桌面環境http://gnome.org和我：它很高興你可以幫忙，因爲我剛剛開始網絡編程5天前，我不知道我在做什麼。 – zeitue

CSS覆蓋菜單在Firefox

回答

相關問題