| Predatorbbs |
22.11.2010 12:20 |
Сокращение списка выпадающего меню.
Доброго дня. Тоже начал изучать javascript относительно недавно... совсем недавно. Неделя-полторы как :) Однако появилась срочная надобность организовать то, что не получается. Да, такое часто бывает.
В общем, есть выпадающее меню (выпадает вниз). У этого меню есть подменю (выпадает вправо от меню), которое вываливает список товаров из базы. Изначально товара было мало... а вот когда его стало *ох* как много, меню просто уезжала вниз за пределы подвала. Интересует хотя бы то, как ограничить выпадающий список до определённой длины. Или при достижении какой либо длины, что бы снизу "образовывался" (магическим образом) текст, предлагающий перейти в каталог для просмотра. Вот собсно сам код (писал не я):
$(window).load(function(){
var opened = 0;
if (window.location.hash) {
$(window).scrollTop(window.location.hash.substr(1));
window.location.hash = "215";
}
$('.list>li').addClass('lvl1');
$('.here').parentsUntil('li.lvl1').parent().addClass('instant');
$('.list>li ul').each(function(){
if (!$(this).parent().hasClass('instant'))
{
$(this).hide();
} else {
$(this).css('display','block');
}
});
$('.drop').parent().addClass('ext');
$('.active').addClass('ext').find('ul').slideDown('slow',function(){setTimeout(function(){opened = 1;},500); });
$('.drop2')
.hide()
.parent()
.find('>a')
.addClass('side');
$('.side').parent().hover(
function(){
if (opened == 1) {
$(this).find('.side').addClass('hover');
$(this).find('.drop2').stop().show().animate({width:240},{duration:500,easing:'easeOutBounce'});
}
},
function(){
if (opened == 1) {
$('.hover').removeClass('hover');
$(this)
.find('.drop2')
.stop()
.animate({width:0},200,function(){$(this)
.find('.drop2')
.hide();});
}
}
);
$('.list>li:gt(2)').addClass('toTop');
$('.toTop').each(function(){
var li = $(this).find('>li').size();
var li2 = Math.ceil(li /2);
$(this).find('li:gt('+(li2)+')>ul.drop2').css('bottom','0px').css('top','auto');
});
$('.list').find('a').click(function(){
var hash = $(window).scrollTop();
if (hash!=0) {
var link = $(this).attr('href');
link = link +'#'+hash;
$(this).attr('href',link);
}
});
});
То подменю выпадающее обозвано классом .drop2. Оформление берёт из css файла. Больше вроде ничего фундаментального.
зы. Если в 30-ой строке:
$(this).find('.drop2').stop().show().animate({width:240},{duration:500,easing:'easeOutBounce'});
помимо параметра width добавить ещё и height то он будет все выплывающие блоки делать заданного размера, а надо что бы высота была зависима от количества товара, НО не превышала определённой длинны.
ззы. можно даже просто что бы снизу многоточие было без ссылок в каталог. |