Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблемка работы JQuery меню в IE (https://javascript.ru/forum/jquery/6864-problemka-raboty-jquery-menyu-v-ie.html)

anikey99 28.12.2009 18:42

Проблемка работы JQuery меню в IE
 
В рамках изучения JQuery, создал анимированное меню:
(сразу замечу, это первый опыт и за неоптимальность кода сильно не ругайте). Все в общем работает, кроме нюансика, в IE - при открытии списка подпунктов, пункты меню разъезжаются. На локальной машине это исправить удалось (overflow:hidden), но при внедрении на ucoz обрезается подменю.
Вот весь код скрипта:
----------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
    
$('#p0').mouseover(function () {
$("#mcont li").hide("slow");

});

//-----------------------------------
$('#p1').mouseover(function () {
if ($("#p1 li:first").is(":hidden")) {
$("#p1 li").show("slow");
}
$("#p2 li").hide("slow");
$("#p3 li").hide("slow");
});
$('#p1 li').click(function () {$("#p1 li").hide("slow");  });
//-----------------------------------
$('#p2').mouseover(function () {
if ($("#p2 li:first").is(":hidden")) {
$("#p2 li").show("slow");
}
$("#p1 li").hide("slow");
$("#p3 li").hide("slow");
});
$('#p2 li').click(function () {$("#p2 li").hide("slow");  });
//-----------------------------------
$('#p3').mouseover(function () {
if ($("#p3 li:first").is(":hidden")) {
$("#p3 li").show("slow");
}
   $("#p2 li").hide("slow");
$("#p4 li").hide("slow");
});
   $('#p3 li').click(function () {$("#p3 li").hide("slow");  });
//--------------------------------
$('#p4').mouseover(function () {
if ($("#p4 li:first").is(":hidden")) {
$("#p4 li").show("slow");
}
   $("#p3 li").hide("slow");
$("#p5 li").hide("slow");
});
   $('#p4 li').click(function () {$("#p4 li").hide("slow");  });
//--------------------------------
$('#p5').mouseover(function () {
if ($("#p5 li:first").is(":hidden")) {
$("#p5 li").show("slow");
}
   $("#p4 li").hide("slow");
$("#p6 li").hide("slow");
});
   $('#p5 li').click(function () {$("#p5 li").hide("slow");  });
//--------------------------------

$('li.p2e').mouseover(function () {
$("#p1 li").hide("slow");
$("#p2 li").hide("slow");
$("#p3 li").hide("slow");
$("#p4 li").hide("slow");
$("#p5 li").hide("slow");
});
//--------------------------------

$(document.body).click(function () {
$("#p1 li").hide("slow");
$("#p2 li").hide("slow");
$("#p3 li").hide("slow");
$("#p4 li").hide("slow");
$("#p5 li").hide("slow");
});

$("#mcont li").mouseover(function () {
  $(this).css({background:'#f7f6f5'});
 $("#mcont div").css({width:'100px'});
});
$("#mcont li").mouseout(function () {
  $(this).css({background:'#ffffff'});
});

  });

  </script>

  <style>
#p1 li, #p2 li, #p3 li, #p4 li, #p5 li { position:relative;top:0px;left:0px;background:#ffffff; margin:1px; width:180px;border-top:1px solid 

#cccccc;hheight:25px; display:none; clear:both;z-index:15; }
 #p0, #p1, #p2, #p3, #p4, #p5 {float:left;width:100px;border:0px solid #cccccc;text-align:center;cursor:pointer;pposition:fixed; 

ooverflow:hidden;}
 #mcont {position:absolute;border-bottom:0px solid #ffcccc;padding:5px;clear:both;width:800px;z-index:10;}
#next {position:relative;top:40px;width:100%;}
.p2e {background:#cccccc;}
li {list-style-type:none;}
</style>
<!--[if IE]>
<style>
#p0, #p1, #p2, #p3, #p4, #p5 {overflow:hidden;}
</style>
<![endif]-->


</head>
<body>
<div id='mcont'>

<div id='p0' style="margin-left:10px;">* <a href="http://kachay.ucoz.org">Главная</a> *</div>

<div id='p1'>* Новости *
  <li><a href=''>RSS News</a></li>
  <li>Наши информеры</li>
  <li>Архив Новостей</li>
 <li class=p2e>x</li>
</div>

<div id=p2>* Девушки *
  <li><a href=''>Импортные</a></li>
  <li>Русские</li>
  <li>Эротические модели</li>
 <li><a href=''>С большой грудью</a></li>
  <li>Обложки Playboy</li>
  <li>Модели Digital.com</li>
<li class=p2e>x</li>
</div>
 
<div id=p3>* Flash игры *
  <li><a href=''>Стена</a></li>
  <li>Головоломка</li>
  <li>Распутай клубок</li>
<li>Аэрохоккей</li>
<li>Подборка флэш игр</li>
<li>Flash игры от Ucoz</li>
<li class=p2e>x</li>
</div>

<div id=p4>* Картинки *
  <li><a href='http://rendfoto.3dn.ru'>100000 фото обо всем</a></li>
  <li>Случайное фото на KP.ru</li>
  <li>Виртуальная третьяковка</li>
<li>Анимационные .gif</li>
<li class=p2e>x</li>
</div>

<div id=p5>* Форум *
  <li><a href=''>Спорт</a></li>
  <li>События</li>
  <li>Газетные заголовки</li>
<li>История развития сайта</li>
<li class=p2e>x</li>
</div>

</div> <!--mcont-->

<div id=next>

<hr>
<li>Произвольный
<li>текст
<li>здесь
</div>
</body>
</html>

-----------------------------
внедрение на ucoz - http://kachay.ucoz.org/search/web
----------------------------
подскажите, плиз, какое свойство CSS надо применить для IE(и ОЧЕНЬ желательно динамически с применением JQuery), чтобы и пункты меню не разъезжались и подменю не обрезалось

anikey99 29.12.2009 19:09

похоже здесь средний уровень не выше моего :)


Часовой пояс GMT +3, время: 18:11.