Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

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


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

Обсуждение темы Проблемы с выпадающим меню в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Не могу довести до ума код:Нормально работающее в IE выпадающее меню (красное) в Firefox выползает поверх основной панели навигации (черно-синей). Как его пофиксить ...


Закрытая тема
 
Опции темы
Старый 16.02.2010, 15:12   #1
Не могу довести до ума код:Нормально работающее в 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:12
Ссылки
Старый 16.02.2010, 15:14   #2
Может архив залить?
 
Старый 16.02.2010, 15:25   #3
Добавил
Вложения
Тип файла: zip Рабочий стол.zip (3.3 Кб, 4 просмотров)
 
Старый 16.02.2010, 15:45   #4
Цитата:
Как его пофиксить не пользуясь z-index и не меняя кодировку на Transitional?
Никак. То что оно работает в ие6-7 это не говорит о том что оно работает правильно, тк правильно оно работает в лисе, сафари, опере и других, а в ие8 оно вообще не работает.
Можно сделать тоже самое, кроссбраузерно, использую jquery, это и проще и возможностей больше.
 
Этот пользователь сказал спасибо Niemans за это полезное сообщение:
vitaly-go (16.02.2010)
Старый 16.02.2010, 15:55   #5
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
 
Старый 16.02.2010, 16:30   #6
jQuery пользуюсь, спасибо, но в этом случае хотелось понять как код работает в принципе - ведь в Firefox при HTML 4.01 Transitional меню работает нормально. Почему в strict оно вылазит наверх?
В данном случае при Strict в Firefox проблемы с выпадающим меню, а при Transitional - в IE основной слой съезжает вбок. Обе проблемы я решу, конечно, так или иначе, но на будущее - какой стандарт наименее проблематичен?
 
Старый 16.02.2010, 16:37   #7
Цитата:
Сообщение от Grey Посмотреть сообщение
какой стандарт наименее проблематичен?
ну его название говорит само за себя, но не факт что стрикт сложнее, просто чтото в нем хуже а чтото лучше, каждый вопрос по разному
 
Старый 16.02.2010, 16:40   #8
Угу, перефразирую вопрос - вы в каком стандарте пишете?
 
Старый 16.02.2010, 16:53   #9
Цитата:
Сообщение от Grey Посмотреть сообщение
Угу, перефразирую вопрос - вы в каком стандарте пишете?
перефразирую ответ: - во всех
 
Старый 16.02.2010, 16:57   #10
Т.е. вы знаете особенности каждой спецификации или просто по ходу ориентируетесь методом научного тыка?
 
Старый 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


Текущее время: 22:41. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум