Форум → Программирование → JavaScript → Не работает меню в IE6
Не работает меню в IE6
Страницы: ← Следующая страница →
-
30 ноября 2009 г. 11:58, спустя 14 минут 56 секунд
chhek,var menuids=["sidebarmenu1"]
<div class="sidebarmenu">
-
30 ноября 2009 г. 12: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 г. 12: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 г. 12:37, спустя 2 минуты 15 секунд
chhek, во всех нормальных браузерах оно работает через :hover можеш просто hover.htc подключить и все должно заработать -
30 ноября 2009 г. 13: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 г. 13:25, спустя 23 часа 57 минут 16 секунд
сори я тогда не знаю у меня идеи закончились, надо спросить вася_цаСпустя 223 сек.о так у тебя hover уже работает там синий квадратик видно при наведении
посмотри куда позиционируется меню -
-
30 ноября 2009 г. 13:46, спустя 17 минут 3 секунды
посмотри куда позиционируется меню
алертом узнай координаты и visible -
30 ноября 2009 г. 17: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 г. 18: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>
и весь файл стилей выше -
-
Страницы: ← Следующая страница →
Пожалуйста, авторизуйтесь, чтобы написать комментарий!