Форум → Программирование → JavaScript → Не работает меню в IE6
Не работает меню в IE6
Страницы: ← Следующая страница →
-
30 ноября 2009 г. 0:58, спустя 14 минут 56 секунд
chhek,var menuids=["sidebarmenu1"]
<div class="sidebarmenu">
-
30 ноября 2009 г. 1:05, спустя 7 минут 21 секунду
в других браузерах и без:<script type="text/javascript"> var menuids=["sidebarmenu"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas function initsidebarmenu(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids).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) //if this is a first level submenu ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" else //else if this is a sub level submenu (ul) 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–){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" } } } if (window.addEventListener) window.addEventListener("load", initsidebarmenu, false) else if (window.attachEvent) window.attachEvent("onload", initsidebarmenu) </script>
работает…
вписал вместо sidebarmenu1 - sidebarmenu….ничего не помогло :) -
30 ноября 2009 г. 1:22, спустя 16 минут 16 секунд
тогда я ебуСпустя 184 сек.приведи код в порядок
а то мне кажется там не хватает фигурных скобокelse //else if this is a sub level submenu (ul) { ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" }
-
-
30 ноября 2009 г. 1:37, спустя 2 минуты 15 секунд
chhek, во всех нормальных браузерах оно работает через :hover можеш просто hover.htc подключить и все должно заработать -
30 ноября 2009 г. 2:28, спустя 51 минуту 13 секунд
Убрал JS скрипт. В HEAD добавил:<!–[if IE]> <style type="text/css"> BODY { behavior:url("http://lift.gorodgomel.by/templates/tsd_gomellift/csshover.htc"); } </style> <![endif]–>
в CSS, изменил названия элементов в виде:.sidebarmenu ul li a.hover{ text-decoration: none; background-color: none; color: white; } .sidebarmenu ul li a:hover{ text-decoration: none; background-color: none; color: white; }
Т.е. сделал копию элементов с селекторами.
В IE начались меняться при наведении кнопки..а как полностью сделать?? -
30 ноября 2009 г. 2:25, спустя 23 часа 57 минут 16 секунд
сори я тогда не знаю у меня идеи закончились, надо спросить вася_цаСпустя 223 сек.о так у тебя hover уже работает там синий квадратик видно при наведении
посмотри куда позиционируется меню -
-
30 ноября 2009 г. 2:46, спустя 17 минут 3 секунды
посмотри куда позиционируется меню
алертом узнай координаты и visible -
30 ноября 2009 г. 6:45, спустя 3 часа 59 минут 8 секунд
не совсем ясно, что необходимо проделать…html, body {height:100%; margin:0; padding:0; background:#fff} body{ background:url(images/0.gif) no-repeat; background-attachment:fixed} html, body, div, table, td, p {font-family:Arial, Helvetica, sans-serif; font-size:12px} table {border-collapse: collapse; width:100%} table td {padding: 0px;} #parallax { position:relative; overflow:hidden; width:800px; height:550px; border:none; margin:0 auto 20px auto; } form {margin:0px; padding:0px} img {border:none; margin:0px; padding:0px} #main { min-height:100%;} * html #main {height:100%;} .top{ max-width:1164px; min-width:1000px; margin:0px auto; background:url(images/bg_top_wide_lifti_bezl.png) top center no-repeat; position:relative; top:-402px; left:0px; overflow:hidden} /**html .content{width:expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1000) ? '1000px' : ?((document.body.clientWidth > 1264) ? '1264px' : '100%'));}*/ *html .top{width:expression((document.documentElement.clientWidth > 1164) ? '1164px' : ((document.documentElement.clientWidth < 1000) ? '1000px' : '100%'));} .top .bg_up{ height:398px;} .top .bg_up .logo_slogan{ height:147px} .top .bg_up .logo{ margin:35px 0px 0px 30px; float:left; width:250px; height:73px} * html .top .bg_up .logo{ margin:35px 0px 0px 15px; float:left; } .top .bg_up .slogan{ float:left; margin:70px 0px 0px 208px; background:url(images/slogan.gif) no-repeat ; height:21px; width:300px} .top .bg_up .lifti{ background:url(images/lifti.png) 330px bottom no-repeat; height:203px} .top .bg_up .menu{ float:left; font:11px Tahoma, Verdana, Arial, Helvetica, sans-serif, Tahoma; color:#33ff00; width:113px; margin:0px 0px 0px 55px;} .top .bg_up .menu_form{ float:left; height:255px;; border:0px solid #f00} * html .top .bg_up .menu{ margin-left:58px} .top .bg_up .menu A{color:#33ff00; text-decoration:underline;} .top .bg_up .menu A:HOVER{ text-decoration:none} .top .bg_up .menu .menu_item{ width:113px; margin-bottom:11px; float:left} .top .bg_up .menu .selected{ margin-bottom:16px; background:url(images/selected.gif) right center no-repeat; float:left; padding-right:16px; color:#fff; font-weight:bold;} .top .bg_up .menu A#active_menu{ margin-bottom:8px;margin-top:8px; background:url(images/selected.gif) right center no-repeat; float:left; padding-right:16px; color:#fff; font-weight:bold;text-decoration:none} .form_serch{ margin:20px 0px 0px 32px; width:219px; border:0px solid #f00} .form_serch .inputbox{ width:143px; height:18px; font:11px Arial, Helvetica, sans-serif; border:1px solid #9f9ea4; padding-left:4px; color:#999} *html .form_serch .inputbox{ padding-top:3px; height:16px} .form_serch .button{ margin-left:3px; background:url(images/btn_search.gif) top left no-repeat; width:69px; height:22px; border:none} .form_serch .button:HOVER{ cursor:pointer} .top .bg_up .silueti{ height:207px; width:726px; float:right; margin:50px 22px 0px -4px;} *html .top .bg_up .silueti{ margin-right:11px} .top .bg_up .silueti .siluet1{ width:175px; height:207px; float:center; margin-top:50px; margin-left:50px; border:0px solid #f00} .top .bg_up .silueti .siluet2{width:86px; height:213px; float:center; margin-top:40px; margin-left:300px; border:0px solid #f00} .top .bg_up .silueti .siluet3{width:106px; height:201px; float:center; margin-top:50px; margin-left:500px; border:0px solid #f00} /** html .top .bg_up .silueti .siluet1{background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="sil1.png", sizingMethod="scale");} * html .top .bg_up .silueti .siluet2{background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="sil2.png", sizingMethod="scale");} * html .top .bg_up .silueti .siluet3{background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="sil3.png", sizingMethod="scale");}*/ .cont{max-width:1164px; min-width:1000px; margin:0px auto; padding-bottom:113px;/*position:relative; top:-402px; left:0px; overflow:hidden*/} *html .cont{margin-top:-10px} *html .cont{width:expression((document.documentElement.clientWidth > 1164) ? '1164px' : ((document.documentElement.clientWidth < 1000) ? '1000px' : '100%'));} .cont .news_feedback{width:220px; vertical-align:top} .cont .title{font: bold 17px Arial, Helvetica, sans-serif; color:#336; margin:0px 0px 10px 32px} .contentheading{font: bold 17px Arial, Helvetica, sans-serif; color:#336; margin:0px 0px 10px 32px} .cont .news_item{font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#666; margin:0px 0px 10px 32px} .cont .news_date{font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;font-weight:bold; color:#999; margin-bottom:5px} .cont .news_cont A{font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif; text-decoration:underline; color:#666; line-height:16px} .cont .news_cont A:HOVER{ text-decoration:none} .cont .form_feedback{ margin:0px 0px 10px 32px; text-align:left} .cont .title_fb{font: bold 17px Arial, Helvetica, sans-serif; color:#336; margin:20px 0px 0px 0px} .cont .inputbox{ height:20px; border:1px solid #77797c; width:200px; margin:3px 0px; font:11px Arial, Helvetica, sans-serif; color:#999; padding:0px; padding-left:3px;} *html .cont .input{ padding-top:3px; height:16px} .cont .artforms-button{ background:url(images/btn_send.gif) top left no-repeat; width:79px; height:22px; border:none; } .cont .inputboxtxt{ width:200px; border:1px solid #77797c; margin:3px 0px; height:78px; padding:2px 0px 0px 3px; font:11px Arial, Helvetica, sans-serif; color:#999} .cont .content{min-width:540px; vertical-align:top; } *html .content{width:expression(document.body.clientWidth < 540? "540px": "100%")} .cont .text{ font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#333; line-height:19px; margin:0px 20px 20px 20px} .cont .text a{ font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#333; line-height:19px;} .cont .text a:hover{text-decoration:none;} .cont .text P{font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#333; line-height:19px; margin:0px 0px 10px 0px; padding:0px} .cont .diplom_objects{width:200px; vertical-align:top; margin-bottom:20px;} .cont .diplom_objects .title{font: bold 17px Arial, Helvetica, sans-serif; color:#336; margin:0px 0px 10px 0px} *html .cont .diplom_objects{width:expression(document.body.clientWidth < 220? "220px": "auto")} .cont .diploms{ margin:0px 0px 25px 0px} .cont .img_bord{display:block; border:2px solid #ccc; float:left} .cont .img_bord IMG{border:2px solid #fff} .footer{height:109px; margin-top:-113px; border-top:4px solid #1e1c44; font:bold 12px Arial, Helvetica, sans-serif; color:#c0c0c0; text-align:center; /*position:relative; top:-402px; left:0px; overflow:hidden*/} .foter_cont {min-width:1000px; max-width:1164px; margin:0px auto} *html .foter_cont{width:expression((document.documentElement.clientWidth > 1164) ? '1164px' : ((document.documentElement.clientWidth < 1000) ? '1000px' : '100%'));} .footer .logo_niz{min-width:220px; } .footer .copy{min-width:540px; text-align:center} .footer .copy_txt{ width:256px;font:11px Arial, Helvetica, sans-serif; color:#666; margin:0px auto} .footer .medialine{min-width:220px;} .sidebarmenu ul{ margin: 0; padding: 0; list-style-type: none; font:11px Tahoma, Verdana, Arial, Helvetica, sans-serif, Tahoma; width: 220px; border-bottom: 0px solid #ccc; } .siderfooter{ height: 62px; } .sidebarmenu ul li{ position: relative; z-index:10; } .sidebarmenu ul li a{ display: block; overflow: auto; color: #33ff00; text-decoration: underline; padding: 3px; border-bottom: 0px solid #778; border-right: 0px solid #778; } .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{ background-color: none; } .sidebarmenu ul li a:active{ color: #FFFFFF; } .sidebarmenu ul li a:visited{ text-decoration: underline; color: #33ff00; } .sidebarmenu ul li a:hover, .sidebarmenu ul li a.hover{ text-decoration: none; background-color: none; color: white; } .sidebarmenu ul li ul{ position: absolute; width: 169px; top: 0; visibility: hidden; background:#403c76; border:1px solid #635f9d; z-index:5; } .sidebarmenu ul li li{ margin:3px 0; } .sidebarmenu li.subfolderstyle{ background: url(images/arrow_sub.png) no-repeat right top; } .sidebarmenu li.subfolderstyle:hover, .sidebarmenu li.subfolderstyle.hover{ background: url(images/arrow_sub.gif) no-repeat right top; } * html .sidebarmenu ul li { float: left; height: 1%; } * html .sidebarmenu ul li a { height: 1%; } li.subfolderstyle:hover ul, li.subfolderstyle.hover ul { visibility:visible; } li.subfolderstyle:hover ul , li.subfolderstyle.hover ul { left:220px; } li.subfolderstyle:hover ul ul, li.subfolderstyle.hover ul ul { visibility:hidden; left:390px; } li.subfolderstyle:hover li.subfolderstyle:hover ul, li.subfolderstyle.hover li.subfolderstyle.hover ul { visibility: visible; left:169px; } li.subfolderstyle div.fr { position:absolute; right:-1px; width:2px; top:1px; height:17px; background:#403c76; display:none; font-size:1px; z-index:100 } li.subfolderstyle:hover div.fr, li.subfolderstyle.hover div.fr { display:block } li.subfolderstyle:hover ul div.fr, li.subfolderstyle.hover ul div.fr { display: none } li.subfolderstyle:hover li.subfolderstyle:hover div.fr, li.subfolderstyle.hover li.subfolderstyle.hover div.fr { display: block } li.subfolderstyle li a { color:#fff; padding-left:20px; display:block; color: white; background:url(images/arr_li.png) left no-repeat; margin-left:3px; } li.subfolderstyle li li a { color:#33ff00; padding-left:5px ; display:block; background: 0; margin-left:3px; font-weight:bold; }
может поможите? у меня никак не получается.. -
-
30 ноября 2009 г. 7:12, спустя 7 минут 17 секунд
Вообщем вот:
мой файл csshover.htc<attach event="ondocumentready" handler="parseStylesheets" /> <script> /** * Whatever:hover - V1.42.060206 - hover & active * ———————————————————— * © 2005 - Peter Nederlof * Peterned - http://www.xs4all.nl/~peterned/ * License - http://creativecommons.org/licenses/LGPL/2.1/ * * Whatever:hover is free software; you can redistribute it and/or * modify it under the terms of the GNU Lesser General Public * License as published by the Free Software Foundation; either * version 2.1 of the License, or (at your option) any later version. * * Whatever:hover is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * Lesser General Public License for more details. * * Credits and thanks to: * Arnoud Berendsen, Martin Reurings, Robert Hanson * * howto: body { behavior:url("csshover.htc"); } * ———————————————————— */ var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i, currentSheet, doc = window.document, hoverEvents = [], activators = { onhover:{on:'onmouseover', off:'onmouseout'}, onactive:{on:'onmousedown', off:'onmouseup'} } function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; window.attachEvent('onunload', unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets); } function parseStylesheet(sheet) { if(sheet.imports) { try { var imports = sheet.imports, l = imports.length; for(var i=0; i<l; i++) parseStylesheet(sheet.imports); } catch(securityException){} } try { var rules = (currentSheet = sheet).rules, l = rules.length; for(var j=0; j<l; j++) parseCSSRule(rules[j]); } catch(securityException){} } function parseCSSRule(rule) { var select = rule.selectorText, style = rule.style.cssText; if(!csshoverReg.test(select) || !style) return; var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1'); var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo); var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1]; var affected = select.replace(/:(hover|active).*$/, ''); var elements = getElementsBySelect(affected); if(elements.length == 0) return; currentSheet.addRule(newSelect, style); for(var i=0; i<elements.length; i++) new HoverElement(elements, className, activators[pseudo]); } function HoverElement(node, className, events) { if(!node.hovers) node.hovers = {}; if(node.hovers[className]) return; node.hovers[className] = true; hookHoverEvent(node, events.on, function() { node.className += ' ' + className; }); hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); }); } function hookHoverEvent(node, type, handler) { node.attachEvent(type, handler); hoverEvents[hoverEvents.length] = { node:node, type:type, handler:handler }; } function unhookHoverEvents() { for(var e,i=0; i<hoverEvents.length; i++) { e = hoverEvents; e.node.detachEvent(e.type, e.handler); } } function getElementsBySelect(rule) { var parts, nodes = [doc]; parts = rule.split(' '); for(var i=0; i<parts.length; i++) { nodes = getSelectedNodes(parts, nodes); } return nodes; } function getSelectedNodes(select, elements) { var result, node, nodes = []; var identify = (/\#([a-z0-9_-]+)/i).exec(select); if(identify) { var element = doc.getElementById(identify[1]); return element? [element]:nodes; } var classname = (/\.([a-z0-9_-]+)/i).exec(select); var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ''); var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false; for(var i=0; i<elements.length; i++) { result = tagName? elements.all.tags(tagName):elements.all; for(var j=0; j<result.length; j++) { node = result[j]; if(classReg && !classReg.test(node.className)) continue; nodes[nodes.length] = node; } } return nodes; } </script>
Index.php в хэде<!–[if IE]> <style type="text/css"> BODY { behavior:url("http://lift.gorodgomel.by/templates/tsd_gomellift/csshover.htc"); } </style> <![endif]–>
Вывод меню:<div class="sidebarmenu"> <ul> <li><a href="http://lift.gorodgomel.by/index.php">Главная</a></li> <li class="subfolderstyle"> <div class="fr"> </div> <ul> <li><a href="#">История</a></li> <li><a href="#">Сотрудничество</a></li> <li><a href="#">Филиалы</a></li> <li><a href="#">Социальная политика</a></li> </ul> <a href="#">О компании</a> </li> <li class="subfolderstyle"> <div class="fr"> </div> <ul> <li class="subfolderstyle"> <div class="fr"> </div> <ul> <li><a href="#">OTIS 100r</a></li> <li><a href="#">OTIS 200r</a></li> <li><a href="#">OTIS Gen2</a></li> </ul> <a href="#">Лифты</a></li> <li class="subfolderstyle"> <div class="fr"> </div> <ul> <li><a href="#">OTIS 506NCE</a></li> <li><a href="#">OTIS 606NCT</a></li> </ul> <a href="#">Эскалаторы и <br>траволаторы </a></li> <li class="subfolderstyle"> <div class="fr"> </div> <ul> <li><a href="#">БК450</a></li> <li><a href="#">А2</a></li> <li><a href="#">БК350</a></li> <li><a href="#">БК 325</a></li> <li><a href="#">БК Стандарт</a></li> <li><a href="#">БК 150</a></li> </ul> <a href="#">Подъемники для <br>инвалидов</a></li> </ul> <a href="#">Продукция</a> </li> <li> <a href="http://www.liftesk.by">Система диспетчерского контроля</a> <a href="#">Модернизация</a> <li class="subfolderstyle"> <div class="fr"> </div> <ul> <li><a href="#">Карта проезда</a></li> <li><a href="#">Телефон</a></li> <li><a href="#">Адрес</a></li> <li><a href="#">Написать сообщение</a></li> </ul> <a href="#">Контакты</a> </li> </li> </ul> </div>
и весь файл стилей выше -
-
Страницы: ← Следующая страница →
Пожалуйста, авторизуйтесь, чтобы написать комментарий!