Форум

IIIu6ko · #1 (**permalink**) 14.10.2014, 18:37

Здравствуйте, подскажите как сделать список, который раскрывается при прокрутке страницы..
Наглядный пример: http://getbootstrap.com/components/ (прокрутите страницу, список будет сам раскрываться и переключать разделы)

Я сделал небольшие наброски, но не знаю как привязать якоря к прокрутке страницы.
HTML

<body>
		<ul>
			<li>Lorem ipsum1
				<ul class="ipsum1">
					<li>Lorem ipsum1-2</li>
				</ul>
			</li>
			<li>Lorem ipsum2
				<ul class="ipsum2">
					<li>Lorem ipsum2-2</li>
				</ul>
			</li>
			<li>Lorem ipsum3
				<ul class="ipsum3">
					<li>Lorem ipsum3-2</li>
				</ul>
			</li>
		</ul>
		<p><a name="ipsum1">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p><a name="ipsum2">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p><a name="ipsum3">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</body>

CSS

.ipsum1 {
	display: none;
}

.ipsum2 {
	display: none;
}

.ipsum3 {
	display: none;
}

Я так понимаю нужно создать условие, при котором стиль .ipsum1 будет заменятся например на .ipsum1active, когда страница доходит до якоря #ipsum1.

Возможно ли такое реализовать с помощью javascript? Или это можно сделать легко с помощью css?

З.Ы. Javascript не знаю совсем, полный 0

kostyanet · #2 (**permalink**) 14.10.2014, 20:04

наверно это #target

А вам точно хочется эту свистелку-перделку? Шнурковые технологии годятся только для одностраничек инфобизнеса.

kostyanet · #3 (**permalink**) 14.10.2014, 20:07

Был такой прикол. Чтобы активное меню не искать я приделал в шаблон стиль

<style>
			#<?php echo $this->model?>{
				background-color:#ce0020;
				text-shadow:2px 2px 2px #943d2d!important;
			}
		</style>

забыл и приделал id форме по имени модели - хренакс она вся красная стала. 10 минут думал какого LCD я нализался, потом сообразил что это единственная в жизни решетка подгавнила. Пришлось приделать префикс id формы.

IIIu6ko · #4 (**permalink**) 14.10.2014, 20:45

Сообщение от kostyanet

наверно это #target

Не знал про такой псевдокласс, спасибо

Но это не то, мне нужно чтобы при прокрутке страницы пункты меню сами по себе перебирались + подсписки раскрывались..

раскрытие подсписков можно реализовать и с помощью css, но вот чтобы список реагировал на прокрутку не знаю

IIIu6ko · #5 (**permalink**) 14.10.2014, 21:20

Нашёл в документации к бутстрапу

http://getbootstrap.com/javascript/#scrollspy

пойду пробовать

kostyanet · #6 (**permalink**) 14.10.2014, 22:23

Это короче веб-воплощение фразы Паука "прогонять телегу". Ну не читают люди столько, понимаете? Возьмите книгу с полки - сколько там символов на странице. Перелистывание страницы сбивает программу чтения, стирает некоторые переменные, можно даже задумаццо в этот момент. А тут сто верст и столбы с черными метками пролетают мимо. Такие сайты специально делают чтобы никто не читал.

Сайт должен листаться - это естественно, иначе книги были бы свитками до сих пор.

kostyanet · #7 (**permalink**) 14.10.2014, 22:27

Действительно, закладку они не выкидывают, то есть домотал - щелкни, иначе заложить нечего.

Ну да, на вике бывают телеги, но если вы посмотрите что там самое тележное - все мемориальное. Монументы возводят ради монументов.

kostyanet · #8 (**permalink**) 14.10.2014, 22:36

Sharp and Clean symbols... тыдыщь.

В этом весь буткрэп. Образовался домен шустрых тараканов которые друг другу мозг выносят у кого респонзиблее, шарплее и антиалиазинглее.

Напечатайте смайлик из шрифта Windings и сравните sharp and clean на любом размере от 4 пунктов до 24.

giv13 · #9 (**permalink**) 18.10.2014, 00:32

IIIu6ko, да, это по любому scrollspy от bootstrap. Он придает элементу класс active. Останется дописать только, что если у пункта меню class = active, то октрывай подменю.

Форум

Справочник

Discord чат

Курсы javascript