JQuery slideUp horizontal menu Проблема с Internet Explorer

Эй, ребята, я использовал код, отправленный из другого вопроса здесь, в stackoverflow (JQuery slideUp horizontal menu instead of slideDown) и попытался сделать так, чтобы скользящая ширина подменю была на 100% подобной главному меню. Thing работает в Firefox, Safari, Chrome, Opera, но не в IE ...JQuery slideUp horizontal menu Проблема с Internet Explorer

Я знаю, что это имеет какое-то отношение к CSS, но я застрял и не знаю, как это исправить.

Вот код:

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
    <script> 
    $(function() { 
    $("#menu").find("li").each(function() { 
    if ($(this).find("ul").length > 0) { 
     $(this).mouseenter(function() { 
     $(this).find("ul").stop(true, true).slideDown(); 
     }); 
     $(this).mouseleave(function() { 
     $(this).find("ul").stop(true, true).slideUp(); 
     }); 
    } 
    }); 
    }); 
    </script> 
    <style> 
    html, body {padding:0;margin:0;} 
    #menu { 
    display:block; 
    margin:120px auto 20px; 
    position:relative; 
    background-color:#6a6a6a; 
    font:16px Tahoma, Sans-serif; 
    width:100%; 
    } 
    #menu ul { 
    padding:0; 
    margin:0; 
    width:100%; 
    } 
    #menu li { 
    float:left; 
    list-style-type:none; 
    } 
    #menu ul:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
    } 
    #menu li a { 
    display:block; 
    padding:10px 20px; 
    color:#eee; 
    text-decoration:none; 
    } 
    #menu li a:focus { 
    outline:none; 
    text-decoration:underline; 
    } 
    #menu li:first-child a { 
    border-left:none; 
    } 
    #menu li.last a { 
    border-right:none; 
    } 
    #menu a span { 
    display:block; 
    float:right; 
    margin-left:5px; 
    } 
    #menu ul ul { 
    display:none; 
    width:100%; 
    position:absolute; 
    background:#6a6a6a; 
    bottom:38px; 
    left:0; 
    } 
    #menu ul ul li { 
    float:left; 
    } 
    #menu ul ul a { 
    padding:5px 10px; 
    border-left:none; 
    border-right:none; 
    font-size:14px; 
    } 
    a:hover { 
    cursor: pointer; 
    } 
    </style> 
</head> 
<body> 
    <div id="menu"> 
    <ul> 
    <li> 
    <a>Item1</a> 
    </li> 
    <li> 
    <a>Item2</a> 
    <ul> 
     <li><a href="#">item2-1</a></li> 
     <li><a href="#">item2-2</a></li> 
     <li><a href="#">item2-3</a></li> 
    </ul> 
    </li> 
    <li> 
    <a>Item3</a> 
    <ul> 
    <li><a href="#">item3-1</a></li> 
    <li><a href="#">item3-2</a></li> 
    <li><a href="#">item3-3</a></li> 
    </ul> 
    </li> 
    <li> 
    <a>Item4</a> 
    </li> 
    </ul> 
</div> 
<body> 
<html>

источник

2011-01-19 Panos

С какой версией IE у вас возникли проблемы? И мог бы в нескольких словах сказать, что пошло не так? – polarblau

На IE8 с совместимостью и без. Если вы скопируете вставку кода и просмотрите его в IE, вы увидите, что оно отображает меню, подобное списку, и, если вы видите его в Firefox, вы увидите, как он работает. – Panos

Не забудьте добавить Doctype к разметке, потому что без него IE орками на режиме совместимости и о да, это отстой. И alos, не забудьте закрыть свои теги, отличным браузерам будет все равно, если вы не закроете или, по крайней мере, попытаетесь это исправить, но IE сойдет с ума.

Так что первое, что вы должны сделать, это:

<!doctype html> 
<html> 
<head> 
    <!-- bla bla bla --> 
</head> 
<body> 
    <div id="menu"> 
    <ul> 
    <!-- bla bla bla --> 
    </ul> 
    </div> 
</body> 
</html>

Обратите внимание на доктайп и закрывающие теги body и html.

Теперь, когда волшебство будет происходить в с JavaScript:

$(function() { 
    $("#menu").find("li").each(function() { 
    var $el = $(this); 

    if ($el.find("ul").length > 0) { 
     $el.mouseenter(function() { 
     $el.find("ul").stop().css("width", $(window).width()).slideDown(); 
     }); 
     $el.mouseleave(function() { 
     $el.find("ul").stop().slideUp(); 
     }); 
    } 
    }); 
});

Имейте в виду, что этот код будет обновляться де ширину ул с точной шириной окна, из-за этого, я избавилась от заявление width: 100%; в #menu ul ul.

Надеюсь, что работает. Ссылка: http://jsbin.com/oliya3.

источник

2011-01-19 15:54:00

Спасибо, человек, который действительно сделал трюк! : D – Panos

JQuery slideUp horizontal menu Проблема с Internet Explorer

ответ

Смежные вопросы