Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2010, 12:20
Новичок на форуме
Отправить личное сообщение для Predatorbbs Посмотреть профиль Найти все сообщения от Predatorbbs
 
Регистрация: 22.11.2010
Сообщений: 3

Сокращение списка выпадающего меню.
Доброго дня. Тоже начал изучать 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 то он будет все выплывающие блоки делать заданного размера, а надо что бы высота была зависима от количества товара, НО не превышала определённой длинны.
ззы. можно даже просто что бы снизу многоточие было без ссылок в каталог.
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2010, 14:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Predatorbbs
а вот когда его стало *ох* как много, меню просто уезжала вниз за пределы подвала.
Самый верный вывод - пора отказаться от такого "меню" и разработать неч-то в корне другое.
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2010, 14:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Predatorbbs
при достижении какой либо длины, что бы снизу "образовывался" (магическим образом) текст, предлагающий перейти в каталог для просмотра.
Как вариант...

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
body {
	font-size: 12pt;
}
#container {
	border: 1px solid;
}
ul {
	max-height: 95px;
	overflow: hidden;
}
</style>
<script>
</script>
</head>
<body>
<div id='container'>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
	<p id='footer'><a href='#'>Browse next &gt;&gt;&gt;</a></p>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2010, 15:23
Новичок на форуме
Отправить личное сообщение для Predatorbbs Посмотреть профиль Найти все сообщения от Predatorbbs
 
Регистрация: 22.11.2010
Сообщений: 3

Костыль годный Спасибо. На первое время им отмажусь. Пока додумываю drop-down меню которое скроллируется. Благо пример в интернетах есть. Осталось попробовать прикруть
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40
ПРограмирование выпадающего списка Chyvak Общие вопросы Javascript 6 24.07.2010 09:52
высота выпадающего списка micscr (X)HTML/CSS 3 23.06.2010 18:20
В IE странная ошибка - скрипт выпадающего меню Akram Internet Explorer 0 11.03.2010 20:37
Переход из выпадающего меню rolekc Элементы интерфейса 1 23.04.2009 19:44