Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 20.08.2009 15:49

vv74
Новичок
Зарегистрирован: 20.08.2009
Сообщений: 3

Проблемы в IE с вертикальным меню

Добрый день.
Попробовал переписать горизонтальное меню - http://www.kriesi.at/archives/create-a- … via-jquery - вертикально. Работает везде, кроме IE - как только подменю становится ниже основного меню, подменю закрывается.
PS. Подменю должно заползать на основное меню.

HTML:
<ul id="nav">
    <li><a href="#">1 HTML</a>
        <ul>   
                <li><a href="#">1.1 HTML 3.2</a></li>
                 <li><a href="#">1.2 HTML 4.0</a></li>
                 <li><a href="#">1.3 HTML 4.01</a></li>
                 <li><a href="#">1.4 HTML 5</a></li>
                 <li><a href="#">1.5 XHTML</a></li>
              </ul>
    </li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript </a>
      <ul>
            <li><a href="#">3.1 jQuery</a></li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
      </ul>
    </li>
   
</ul>


CSS:

body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
line-height:1.5em;
width: 185px;
border: 1px solid black;
}


#nav li{
    position: relative;
}

#nav  li ul{
    position: absolute;
    width: 190px;
    left: 160px;
    top: 0;
}

#nav li a{
display: block;
width: 160px;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}


#nav a:hover{
    background-color: Blue;
    color: Lime;
}


/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%;  } * html ul li a { } /* End */


JS(jquery-1.2.3.min.js):
function mainmenu(){


$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}



$(document).ready(function(){                   
    mainmenu();
});

Спасибо.

Нет на форуме

 

#2 21.08.2009 11:20

Xexe
Новичок
Зарегистрирован: 03.03.2008
Сообщений: 28

Re: Проблемы в IE с вертикальным меню

Было бы здорово увидеть что у вас получилось. Если я правильно понял проблему - должно помочь вот это:

#nav, #nav ul{
background: url(image-ie-fix.gif);
}

#nav  li ul{
     background: url(image-ie-fix.gif);
}

не уверен, что нужно в обоих случаях писать. image-ie-fix.gif не обязательно должен существовать.
Если проблема похожа на эту: - должно помочь. Бэкграунд нужен для подменю
---------------------------------------------------------------------------------------  - - - - - - - - - - - - - - - - - - -
I   Пункт 1     I   Пункт 2      I     Пункт 3    I    Пункт 4      I    Пункт 5     I     пока мышка тут - все нормально
---------------------------------------------------------------------------------------  - - - - - - - - - - - - - - - - - - -
                    I    Пункт 1 подменю      I                                                        когда попадает сюда - подменю в ИЕ исчезает
                    I    Пункт 2 подменю      I
                    I    Пункт 3 подменю      I
                    I----------------------------I

Нет на форуме

 

#3 21.08.2009 12:49

vv74
Новичок
Зарегистрирован: 20.08.2009
Сообщений: 3

Re: Проблемы в IE с вертикальным меню

Не совсем. Пример:
http://www.magnat-kuhni.ru/test/menu_v.html
В IE(6,7) я не могу перейти на пункты
1.4 XHTML, 1.5 HTML 5 и  3.2 Mootools, 3.3 Prototype
- подменю сразу закрывается, как только становиться ниже главного

Нет на форуме

 

#4 21.08.2009 14:24

Xexe
Новичок
Зарегистрирован: 03.03.2008
Сообщений: 28

Re: Проблемы в IE с вертикальным меню

да. Задай бэкгроунд.
Достаточно вот этого вроде
#nav  li ul{
     background: url(image-ie-fix.gif);
}

Нет на форуме

 

#5 21.08.2009 15:19

vv74
Новичок
Зарегистрирован: 20.08.2009
Сообщений: 3

Re: Проблемы в IE с вертикальным меню

Спасибо огромное, помогло:)

Нет на форуме

 

#6 21.10.2009 23:55

lesia
Новичок
Зарегистрирован: 21.10.2009
Сообщений: 2
Вебсайт

Re: Проблемы в IE с вертикальным меню

Доброго времени суток! У меня похожая проблема с меню - в ИЭксплорере нет перехода на подпункты... ((( 
Если можно, то посмотрите в ИЭ 6,7 страничку с заготовкой. - >>> http://www.sun-place.com/html-h11.htm
Пример стилей (html не прописываю, так его можно посмотреть на исходном коде)
<style type="text/css">    .suckerdiv ul{margin: 0; padding: 0;
list-style-type: none; width: 160px; border-bottom: 0 solid #ccc;}   
.suckerdiv ul li{position: relative; z-index: 999;}   
.suckerdiv ul li ul{position: absolute; z-index: 999;
width: 170px; top: 0; visibility: hidden;}    .suckerdiv ul li a{display: block;
overflow: auto; color: #030BB1; text-decoration: none; background: #fffff;
padding: 1px 5px; border: 0 solid #ccc; border-bottom: 0;}   
.suckerdiv ul li a:visited{color: #030BB1;}   
.suckerdiv ul li a:hover{background-color: #FFFA73;}   
.suckerdiv .subfolderstyle{background: url(arrow-list.gif) no-repeat center right;}   
* html .suckerdiv ul li { float: left; height: 1%; }   
* html .suckerdiv ul li a { height: 1%; }    </style>
   
<script type="text/javascript">    var menuids=["suckertree1"];   
function buildsubmenus(){    for (var i=0; i<menuids.length; i++){   
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul"); 
  for (var t=0; t<ultags.length; t++){    ultags[t].parentNode.getElementsByTagName("a")[0]
.className="subfolderstyle";    if (ultags[t].parentNode.parentNode.id==menuids[i])   
{ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"}   
else    {ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"};   
ultags[t].parentNode.onmouseover=function(){   
this.getElementsByTagName("ul")[0].style.display="block";    };   
ultags[t].parentNode.onmouseout=function(){   
this.getElementsByTagName("ul")[0].style.display="none";    }} ;   
for (var t=ultags.length-1; t>-1; t--){    ultags[t].style.visibility="visible";   
ultags[t].style.display="none";    }}};    if (window.addEventListener){   
window.addEventListener("load", buildsubmenus, false)}    else if (window.attachEvent){   
window.attachEvent("onload", buildsubmenus)}    </script> 

Заранее благодарю!

Отредактированно lesia (21.10.2009 23:56)

Нет на форуме

 

#7 12.11.2009 09:44

lesia
Новичок
Зарегистрирован: 21.10.2009
Сообщений: 2
Вебсайт

Re: Проблемы в IE с вертикальным меню

ПроМблема решена... Можно не грузиться

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson