Проблемка работы 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), чтобы и пункты меню не разъезжались и подменю не обрезалось |
похоже здесь средний уровень не выше моего :)
|
Часовой пояс GMT +3, время: 05:08. |