Проблемы с выпадающим меню

Grey · 16.02.2010, 15:12

Не могу довести до ума код:Нормально работающее в IE выпадающее меню (красное) в Firefox выползает поверх основной панели навигации (черно-синей). Как его пофиксить не пользуясь z-index и не меняя кодировку на Transitional?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<head>
<style>
#container{
width:720px;
min-height:700px;
//height:expression(eval(document.documentElement.cl ientHeight));
margin:0px auto;
border:1px solid black;
background-color: #FFFFFF;
}
.navBar{
width:720px;
height:100px;
background-color:black;
}
.navEle{
float:left;
width:120px;
height:100px;
background-color:blue;
margin:0px 0px 0px 20px;
//display: inline;
}
.subMenu{
width:120px;
height:300px;
background-color:red;
position:absolute;
top:-1000px;
left:-1000px;
}
</style>
<script type="text/javascript" src="libs/dummy.js"></script>
<title>Untitled</title>
</head>
<body>
<div id="container">
<div class="navBar" onMouseOut="hidemenu(true)" onMouseOver="cancelhide()">
<div class="navEle"></div>
<div class="navEle" onMouseOver="show(this,'subMenu1')"></div>
<div class="navEle"></div>
<div class="navEle"></div>
<div class="navEle" onMouseOver="show(this,'subMenu2')"></div>
</div>
</div>
<div class="subMenu" id="subMenu1" onMouseOver="cancelhide()" onMouseOut="hidemenu(true)"></div>
<div class="subMenu" id="subMenu2" onMouseOver="cancelhide()" onMouseOut="hidemenu(true)"></div>

</body>
</html>

Дальше, собсно, скрипт.

var mstatus=true; var timer1=false;
var mstep=3; var cm=null;
var hide_delay=500; var tstat=0;

Определяем браузер пользователя

isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

Функция, отображающая и скрывающая слои

function switchDiv(objElement,bolVisible){
if(isNS4||isIE4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.style.display = "none";
} else {
objElement.style.display = "";
}
}
return 1;
}

Функция, возвращающая значение указанного ей свойства объекта

function getPos(el,sProp) {
var iPos = 0;
while (el!=null) {
iPos+=el["offset" + sProp]
el = el.offsetParent
}
return iPos
}

Функция выдаёт объект с указанным ей названием

function getelementbyid(myid) {
if (isNS4){
objElement = document.layers[myid];
}else if (isIE4) {
objElement = document.all[myid];
}else if (isIE5 || isNS6) {
objElement = document.getElementById(myid);
}
return(objElement); }

Функция отображающая|скрывающая слои

function show(el,m) {

if (m!=null) {
m=getelementbyid(m);
}
if ((el==null) && (cm)) {
mstatus=false;
movefx()
} else if ((m!=cm) && (m)) {
if (cm!=null) switchDiv(cm,false);
switchDiv(m,true);
fxel=el;
fxm=m;
fxrect=0;
mstatus=true; // будем открывать меню с помощью movefx
movefx()
}
if (m) cm=m;
if (tstat==1) {
clearTimeout(timer1);
tstat=0
}
}

Функция, "закрывающая" меню

function hidemenu(b) {
if (b) {
tstat=1;
timer1=setTimeout("show(null)",hide_delay);
} else {
tstat=0;
show(null);
}
}

Функция, останавливающая таймер, запущенный прошлой функцией

function cancelhide() {

if (!mstatus) {
mstatus=1;
}

tstat=0;
clearTimeout(timer1);
}

Функция, отвечающая за эффектное выпадение меню.

function movefx() {

if ((mstatus) && (fxrect>fxm.offsetHeight)) {
fxrect=fxm.offsetHeight;
return 1;
}
if ((!mstatus) && (fxrect<0)) {
fxrect=0;
switchDiv(fxm,false);
mstatus=true;
cm=null;
return 1;
}
if ((isIE5)||(isIE4)||(isNS4)||(isNS6)) {
if (!isNS4) {
fxm.style.left = getPos(fxel,"Left")+"px";
fxm.style.clip='rect(' + (fxm.offsetHeight-fxrect) +
' '+ fxm.offsetWidth + ' ' + fxm.offsetHeight +' '+ 0 +')';
fxm.style.top = getPos(fxel,"Top")+(fxel.offsetHeight-fxm.offsetHeight+fxrect+2)+"px";
} else {
fxm.left=getPos(fxel,"Left");
fxm.clip.top=fxm.offsetHeight-fxrect;
fxm.clip.bottom=fxm.offsetHeight;
fxm.clip.left=0;
fxm.clip.right=fxm.offsetWidth;
fxm.top=getPos(fxel,"Top")+(fxel.offsetHeight-fxm.offsetHeight+fxrect+2);
}
if (mstatus) {
fxrect=fxrect+mstep;
setTimeout('movefx()',1);
// Если меню открывается,
// прибавляем к высоте области отсечения значение mstep;
// запускаем таймер для повторного выполнения movefx через 1 м.сек.
} else {
fxrect=fxrect-mstep;
setTimeout('movefx()',1);
}
return 1;
} else {
if (mstatus) {
fxm.style.left =getPos(fxel,"Left")+"px";
fxm.style.top = (getPos(fxel,"Top")+ fxel.offsetHeight) +"px";
} else {
switchDiv(fxm,false);
cm=null;
mstatus=true;
}
return 1
}
}
</Script>

Niemans · 16.02.2010, 15:14

Может архив залить?

Grey · 16.02.2010, 15:25

Добавил

Niemans · 16.02.2010, 15:45

Цитата:

Как его пофиксить не пользуясь z-index и не меняя кодировку на Transitional?

Никак. То что оно работает в ие6-7 это не говорит о том что оно работает правильно, тк правильно оно работает в лисе, сафари, опере и других, а в ие8 оно вообще не работает.
Можно сделать тоже самое, кроссбраузерно, использую jquery, это и проще и возможностей больше.

vitaly-go · 16.02.2010, 15:55

Nimans судя по тому что там упомянуты IE4-5 и нет 7
он отрыл это гдето очень давно/далеко......

Цитата:

Сообщение от Grey

isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

поэтому действительно лучше воспользоваться более свежими вещами типа jQuery

Grey · 16.02.2010, 16:30

jQuery пользуюсь, спасибо, но в этом случае хотелось понять как код работает в принципе - ведь в Firefox при HTML 4.01 Transitional меню работает нормально. Почему в strict оно вылазит наверх?
В данном случае при Strict в Firefox проблемы с выпадающим меню, а при Transitional - в IE основной слой съезжает вбок. Обе проблемы я решу, конечно, так или иначе, но на будущее - какой стандарт наименее проблематичен?

vitaly-go · 16.02.2010, 16:37

Цитата:

Сообщение от Grey

какой стандарт наименее проблематичен?

ну его название говорит само за себя, но не факт что стрикт сложнее, просто чтото в нем хуже а чтото лучше, каждый вопрос по разному

Grey · 16.02.2010, 16:40

Угу, перефразирую вопрос - вы в каком стандарте пишете?

vitaly-go · 16.02.2010, 16:53

Цитата:

Сообщение от Grey

Угу, перефразирую вопрос - вы в каком стандарте пишете?

перефразирую ответ: - во всех

Grey · 16.02.2010, 16:57

Т.е. вы знаете особенности каждой спецификации или просто по ходу ориентируетесь методом научного тыка?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с выпадающим меню на CSS в Wordpress!	Narayadna	HTML, CSS, JavaScript	1	20.12.2013 11:35
Помогите с выпадающим меню	Vilect	HTML, CSS, JavaScript	12	25.02.2013 21:56
Проблема с выпадающим меню pro_dropdown_2	n-dl	HTML, CSS, JavaScript	5	06.07.2012 00:07
Проблема с выпадающим меню	dieselred	HTML, CSS, JavaScript	1	14.07.2009 19:41
Помогите с выпадающим меню	DENweb	HTML, CSS, JavaScript	13	11.05.2008 15:20

16.02.2010, 15:12	#1
Grey	Не могу довести до ума код:Нормально работающее в IE выпадающее меню (красное) в Firefox выползает поверх основной панели навигации (черно-синей). Как его пофиксить не пользуясь z-index и не меняя кодировку на Transitional? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <head> <style> #container{ width:720px; min-height:700px; //height:expression(eval(document.documentElement.cl ientHeight)); margin:0px auto; border:1px solid black; background-color: #FFFFFF; } .navBar{ width:720px; height:100px; background-color:black; } .navEle{ float:left; width:120px; height:100px; background-color:blue; margin:0px 0px 0px 20px; //display: inline; } .subMenu{ width:120px; height:300px; background-color:red; position:absolute; top:-1000px; left:-1000px; } </style> <script type="text/javascript" src="libs/dummy.js"></script> <title>Untitled</title> </head> <body> <div id="container"> <div class="navBar" onMouseOut="hidemenu(true)" onMouseOver="cancelhide()"> <div class="navEle"></div> <div class="navEle" onMouseOver="show(this,'subMenu1')"></div> <div class="navEle"></div> <div class="navEle"></div> <div class="navEle" onMouseOver="show(this,'subMenu2')"></div> </div><!--end navBar--> </div><!--end container--> <div class="subMenu" id="subMenu1" onMouseOver="cancelhide()" onMouseOut="hidemenu(true)"></div> <div class="subMenu" id="subMenu2" onMouseOver="cancelhide()" onMouseOut="hidemenu(true)"></div> </body> </html> Дальше, собсно, скрипт. var mstatus=true; var timer1=false; var mstep=3; var cm=null; var hide_delay=500; var tstat=0; Определяем браузер пользователя isNS4 = (document.layers) ? true : false; isIE4 = (document.all && !document.getElementById) ? true : false; isIE5 = (document.all && document.getElementById) ? true : false; isNS6 = (!document.all && document.getElementById) ? true : false; Функция, отображающая и скрывающая слои function switchDiv(objElement,bolVisible){ if(isNS4\|\|isIE4){ if(!bolVisible) { objElement.visibility ="hidden" } else { objElement.visibility ="visible" } } else if (isIE5 \|\| isNS6) { if(!bolVisible){ objElement.style.display = "none"; } else { objElement.style.display = ""; } } return 1; } Функция, возвращающая значение указанного ей свойства объекта function getPos(el,sProp) { var iPos = 0; while (el!=null) { iPos+=el["offset" + sProp] el = el.offsetParent } return iPos } Функция выдаёт объект с указанным ей названием function getelementbyid(myid) { if (isNS4){ objElement = document.layers[myid]; }else if (isIE4) { objElement = document.all[myid]; }else if (isIE5 \|\| isNS6) { objElement = document.getElementById(myid); } return(objElement); } Функция отображающая\|скрывающая слои function show(el,m) { if (m!=null) { m=getelementbyid(m); } if ((el==null) && (cm)) { mstatus=false; movefx() } else if ((m!=cm) && (m)) { if (cm!=null) switchDiv(cm,false); switchDiv(m,true); fxel=el; fxm=m; fxrect=0; mstatus=true; // будем открывать меню с помощью movefx movefx() } if (m) cm=m; if (tstat==1) { clearTimeout(timer1); tstat=0 } } Функция, "закрывающая" меню function hidemenu(b) { if (b) { tstat=1; timer1=setTimeout("show(null)",hide_delay); } else { tstat=0; show(null); } } Функция, останавливающая таймер, запущенный прошлой функцией function cancelhide() { if (!mstatus) { mstatus=1; } tstat=0; clearTimeout(timer1); } Функция, отвечающая за эффектное выпадение меню. function movefx() { if ((mstatus) && (fxrect>fxm.offsetHeight)) { fxrect=fxm.offsetHeight; return 1; } if ((!mstatus) && (fxrect<0)) { fxrect=0; switchDiv(fxm,false); mstatus=true; cm=null; return 1; } if ((isIE5)\|\|(isIE4)\|\|(isNS4)\|\|(isNS6)) { if (!isNS4) { fxm.style.left = getPos(fxel,"Left")+"px"; fxm.style.clip='rect(' + (fxm.offsetHeight-fxrect) + ' '+ fxm.offsetWidth + ' ' + fxm.offsetHeight +' '+ 0 +')'; fxm.style.top = getPos(fxel,"Top")+(fxel.offsetHeight-fxm.offsetHeight+fxrect+2)+"px"; } else { fxm.left=getPos(fxel,"Left"); fxm.clip.top=fxm.offsetHeight-fxrect; fxm.clip.bottom=fxm.offsetHeight; fxm.clip.left=0; fxm.clip.right=fxm.offsetWidth; fxm.top=getPos(fxel,"Top")+(fxel.offsetHeight-fxm.offsetHeight+fxrect+2); } if (mstatus) { fxrect=fxrect+mstep; setTimeout('movefx()',1); // Если меню открывается, // прибавляем к высоте области отсечения значение mstep; // запускаем таймер для повторного выполнения movefx через 1 м.сек. } else { fxrect=fxrect-mstep; setTimeout('movefx()',1); } return 1; } else { if (mstatus) { fxm.style.left =getPos(fxel,"Left")+"px"; fxm.style.top = (getPos(fxel,"Top")+ fxel.offsetHeight) +"px"; } else { switchDiv(fxm,false); cm=null; mstatus=true; } return 1 } } </Script>

16.02.2010, 15:14	#2
Niemans	Может архив залить?

16.02.2010, 16:30	#6
Grey	jQuery пользуюсь, спасибо, но в этом случае хотелось понять как код работает в принципе - ведь в Firefox при HTML 4.01 Transitional меню работает нормально. Почему в strict оно вылазит наверх? В данном случае при Strict в Firefox проблемы с выпадающим меню, а при Transitional - в IE основной слой съезжает вбок. Обе проблемы я решу, конечно, так или иначе, но на будущее - какой стандарт наименее проблематичен?

16.02.2010, 16:40	#8
Grey	Угу, перефразирую вопрос - вы в каком стандарте пишете?

16.02.2010, 16:57	#10
Grey	Т.е. вы знаете особенности каждой спецификации или просто по ходу ориентируетесь методом научного тыка?