Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Выпадающее меню в IE

Автор: nerig 16.1.2012, 09:34

Сделал выпадающее меню для сайта, работает везде, кроме Internet Explorer(восьмая версия), подменю не выпадает.

Вот код стилей CSS

Код


#menu{
            list-style:none;
            padding:0;
            margin:0;
        }
        #menu li{
        list-style: none;        
        border-right:1px solid #888899;    
        background-image:url(button1.jpg);
        float: left;
        height:38px;
        width:114px;
        padding: 0;
        margin-top: -20px;
        //margin-top: 0px;
        
        text-align:center;        
        position:relative;
         
        z-index: 1000;

        }
        #menu li ul,
        #menu li.js_hover ul{
        position: absolute; left: -41px; top: 39px; display: none; 

            
        }
        #menu li ul li{
            float:bottom;
            height:55px;
            border-right:1px solid #888899;
            border-left:1px solid #888899;
            border-bottom:1px solid #888899;                
            margin:0;
            margin-left:0px;
            background-image:url(button1.jpg);
            margin-top: 0px;            
            width:160px;
            height:38px;
            text-align:center;

        }
        #menu li a{
        display: block;
        text-decoration: none;
        
        color: #000000;
        font-size: 16px;
        padding: 0px; 

            
        }
        #menu li:hover ul, #menu li.jshover ul{
            display:block;  
        }
        #menu li:hover, #menu li.jshover{
            
        }

А вот сам HTML-код

Код


<ul id="menu">
        <li><a href=#" align="center">раздел 1</a></li>
    <li><a href="#" align="center">раздел 2</a></li>
        <li>
            <a href="#" align="center" style="font-size:15px">раздел 3</a>
            <ul>
                <li><a href="# " align="center">раздел 3.1</a></li>
                <li><a href="#">раздел 3.2</a></li>
                <li><a href="#" align="center">раздел 3.3</a></li>
            </ul>
        </li>
        <li><a href="#" align="center">раздел 4</a></li>
     
    <li><a href="#" align="center">раздел 5</a></li>
    <li><a href="#l" align="center">раздел 6</a></li>

    <li><a href="#" align="center">раздел 7</a></li>
        
    <li><a href="#" align="center">раздел 8</a></li>
    </ul>

Читал про разные фиксы для IE, но так и не понял как их вставлять. Также были примеры с javascript'ом, но и с ними не получилось. Впервые пользуюсь html, поэтому прошу сильно по голове не бить. Помогите, пожалуйста smile

Автор: ksnk 16.1.2012, 09:44

А у меня работает в 8-ке... Может кавычек не хватает?
<li><a href="#" align="center">раздел 1</a></li>

Автор: nerig 16.1.2012, 09:57

ksnk
Нет, кавычки не помогают. Блин, ненавижу IE(ну и свои кривые руки smile

), все криво работает!!!

Автор: ksnk 16.1.2012, 10:02

Чтобы стало работать в IE6 можно пристроить костыль

Код


$(function(){
if($.browser.msie && $.browser.version<7) {
   $('li').hover(function(){$(this).addClass('jshover')},function(){$(this).removeClass('jshover')})
}
})

Добавлено через 34 секунды
http://jsfiddle.net/b8Rqz/5/

А у меня - работает

Автор: nerig 16.1.2012, 10:08

ksnk
А вот поподробнее, куда этот костыль пристроить, где его прописать?

Автор: ksnk 16.1.2012, 10:16

По моей ссылке менюшка показывается?

Цитата(nerig @ 16.1.2012, 10:08

)

А вот поподробнее, куда этот костыль пристроить, где его прописать?

Нужно подключить jQuery добавив

Код


<script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
if($.browser.msie && $.browser.version<7) {
   $('li').hover(function(){$(this).addClass('jshover')},function(){$(this).removeClass('jshover')})
}
})
</script>

в секцию header страницы.

Для IE 7-8-9 работает без этого костыля.

Автор: nerig 16.1.2012, 10:23

ksnk
По ссылке работает, а вот прописываю у себя и не работает(((

Автор: nerig 18.1.2012, 05:28

Проблему решил с помощью вот такого скрипта

Код


<script>
        jsHover = function() {
        var hEls = document.getElementById("menu").getElementsByTagName("li");
        for (var i=0, len=hEls.length; i<len; i++) {
        hEls[i].onmouseover=function() { this.className+=" jshover"; }
        hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
        }
        }
        if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
    </script>

Но появилась новая проблема, когда навожу мышь на какой либо из пунктов меню, то этот пункт "улетает" куда-то в сторону. Проблема видимо в конфликте двух скриптов, второй скрипт отвечает за смену слайдов чуть выше над меню

Код


<script>

$(document).ready(function() {

$('#scrollRight').cycle({ 
    fx:      'fade', 
    speed:    3000, 
    pause: 1,
    timeout:  3000
});


});

</script>

Если его убрать, то с меню все хорошо, но нет смены слайдов. Как можно решить данный конфликт?