выпадающее меню
Есть следующий скрипт выпадающего меню:
$(document).ready(function () {
$('#megamenu li').hover(
function () {
//показать подменю
$('#level', this).slideDown(0);
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
Как сделать, что бы выпадающий список был всегда в пределах экрана. В связи с тем, что некоторые пункты меню находятся очень близко к правому краю экрана, то при раскрытии списка меню, часть просто скрывается за пределами экрана. Заранее спасибо. |
выяснить их ширину и сдвинуть на нужное значение, единственное есть НО это то что выяснить их ширину в момент когда они скрыты не реально, поэтому нужно временно его отобразить измерить скрыть
$(document).ready(function () {
$('#megamenu li').hover(
function () {
var el = $('#level', this).show();
if (el[0].offsetLeft > ( document.body.offsetWidth - el[0].offsetWidth) ) {
el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px");
}
//показать подменю
el.hide().slideDown(0);
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
|
ругается на не закрытую скобку в условии, но вроде проверил все в порядке. Может я слепой?
|
Цитата:
Подскажите пожалуйста, как решить данную проблему? |
$(document).ready(function () {
$('#megamenu li').hover(
function () {
var el = $('#level', this).show();
if ( Math.max(0, el[0].offsetLeft - ( document.body.offsetWidth - el[0].offsetWidth ) ) != 0 ) {
el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px");
}
//показать подменю
el.hide().slideDown(0);
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
|
devote, спасибо.
С той ошибкой справились, но теперь выскакивает другая ошибка, теперь на двоеточие в этой стоке
el.css("left": (document.body.offsetWidth - el[0].offsetWidth) + "px");
Ошибка следующего вида: missing ) after argument list |
Это я ошибку сделал:
el.css("left", (document.body.offsetWidth - el[0].offsetWidth) + "px");
|
devote, огромное спасибо!!!!
Все заработало. А вы не подскажете можно ли регулировать отступом? Например если я захочу, что бы выпадающая часть была не в плотную к краю экрана, а был отступ от края экрана в n-ое количество пикселей? |
el.css("left", ((document.body.offsetWidth - el[0].offsetWidth) - 100) + "px");
|
Еще раз Спасибо)
|
Можно узнать а ведь можно выбрать не только границу экрана, а к примеру границы сайта?
|
можно конечно
|
Извините меня за назойливость, вы мне не покажете на примере моего скрипта?
|
ну все зависит от того в каком блоке сидит сам сайт, тоесть не тот что растянут во всю ширину, а тот который стоит в центре.
пример структуры сайта надо знать, яж его не вижу |
могу дать ссылку на сайт
|
давай
|
вообще он по центру, размер 1024px
|
|
$(document).ready(function () {
$('#megamenu li').hover(
function () {
var maxLeft = $('.header').width() + $('.header')[0].offsetLeft,
el = $('#level', this).show();
if ( Math.max(0, el[0].offsetLeft - ( maxLeft - el[0].offsetWidth ) ) != 0 ) {
el.css("left", (maxLeft - el[0].offsetWidth) + "px");
}
//показать подменю
el.hide().slideDown(0);
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
|
ну и помойку ты там развел =) код можно было сделать один универсальный а не клонировать его для каждого меню.
|
Вставь этот код где нить в одном месте, например в внутри тега <head>
<script type="text/javascript">
$(document).ready(function () {
$('.megamenu li').hover(
function () {
var maxLeft = $('.header').width() + $('.header')[0].offsetLeft,
el = $('.level', this).show();
if ( Math.max(0, el[0].offsetLeft - ( maxLeft - el[0].offsetWidth ) ) != 0 ) {
el.css("left", (maxLeft - el[0].offsetWidth) + "px");
}
//показать подменю
el.hide().slideDown(0);
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
</script>
И не нужно будет клонировать сотню раз его. |
дело все в том, что это скрипт находится в xsl шаблоне и в цикле, поэтому расклонировался для каждого пункта меню)
|
а еще я привязан к id меню
|
А вы не поможете ограничить вывод скрипта, на те пункты меню, в которых нет выпадающего списка? А то к ним применяется стиль для выпадающего меню, это видно в разделе Студентам
|
да я там еще кой чё пропустил у тя на сайте, в коде не то написал, надо вместо этого:
var maxLeft = $('.header').width() + $('.header')[0].offsetLeft,
написать так:
var maxLeft = $('.header').width(),
Я не обратил внимания на то что header стоит с релативной позицией.Цитата:
$(document).ready(function () {
$('.megamenu li').hover(
function () {
var maxLeft = $('.header').width(),
el = $('.level', this);
if ( el.find('a').length != 0 ) {
el.show();
if ( Math.max(0, el[0].offsetLeft - ( maxLeft - el[0].offsetWidth ) ) != 0 ) {
el.css("left", (maxLeft - el[0].offsetWidth) + "px");
}
//показать подменю
el.hide().slideDown(0);
}
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
|
Работает)))
|
а вы случаем не разбираетесь в xsl шаблонах?
|
Цитата:
|
у меня сайт на движке, который обязывает делать вывод через xsl(((
|
devote, у меня еще пару вопросов по скрипту:
$(document).ready(function () {
$('.megamenu li').hover(
function () {
var maxLeft = $('.header').width(),
el = $('.level', this);
if ( el.find('a').length != 0 ) {
el.show();
if ( Math.max(0, el[0].offsetLeft - ( maxLeft - el[0].offsetWidth ) ) != 0 ) {
el.css("left", (maxLeft - el[0].offsetWidth) + "px");
}
//показать подменю
el.hide().slideDown(0);
}
},
function () {
//скрыть подменю
$('.level', this).slideUp(0);
}
);
});
Ко всем элементам меню 3-его и 4-ого уровня меню(div level3 и div level4) применен олин стиль. Но у самого правого, к примеру в О КОЛЛЕДЖЕ это колледж сегодня, а в АБИТУРИЕНТАХ это колледж сегодня, когда выпадает список, то div level3 и div level4 которым в css задано быть рядом, просто отображаются друг под другом. Дело в скрипте или все же css нужно править? Хотя в css все нормуль, может у вас есть идеи? |
Цитата:
|
а может сдвинуть скриптом крайний блок пикселей на 200? что бы поместились в 2 колонки?
|
текущий скрипт ведь можно чуть подвинуть, правильно я понимаю?
|
ну при желании можно сделать все что угодно, главное захотеть.. Мне сложно что-то решить в твою сторону так как не могу дать ответов не пробуя экспериментировать... тут надо методом проб и ошибок подходить к вопросы, выяснять что к чему и как побороть.
|
| Часовой пояс GMT +3, время: 15:09. |