CSS 오버레이 메뉴는 파이어 폭스

있는 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/ 파이어 폭스 콘솔에서 말했듯이

, 파이어 폭스는 "유니"무엇을 알고하지 않습니다. dispHandle(uni) 함수는 "개체 uni를 갖는 매개 변수로 dsipHandle 함수를 실행하십시오"라고 말합니다. uni가 정의되지 않았습니다.

사파리/크롬이 "더 똑똑"하고 왜 uni가 요소의 ID인지 확인하지 못합니다. (아마 다른 사람은 가르치 려 수 있습니다)하지만 파이어 폭스에 대한 당신은 명시 적으로 사용을 명시해야 : 당신이 따옴표로 유니을 넣어해야 자바 스크립트 인라인에서

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"; 
}

합니다. 나는 또한 obj.style.display = "block";에 obj.style.display = "";에서 변경하여 위의 함수에서

#uni{display:none}

: 대신 onmouseover="dispHandle(uni)"

의 onmouseover="dispHandle('uni')" 당신은 정기적으로 CSS를 함께 할 수있는, 게다가 온로드를 숨길 수있는 다른 방법에 대한 다른 질문에 대답하려면 이것은 명시 적으로 스타일 시트에서 div의 기본 블록 표시로 변경하여 style.css를 덮어 씁니다.

출처

2011-12-12 06:25:55 Vigrond

감사합니다. 또한 여기에 사이트 http://demilovato.sf.net – zeitue

니스, 나는 당신의 디자인 아이디어를 좋아해. 다행히 도울 수있어. – Vigrond

감사합니다. 그놈 데스크탑 환경 http://gnome.org에 기반을 두었습니다. 5 일 전에 웹 프로그래밍을 시작했기 때문에 도움이 되었기 때문에 기쁘게 생각합니다. 정말 잘하고 있습니다. – zeitue

CSS 오버레이 메뉴는 파이어 폭스

답변

관련 문제