Меню сайта, шаги или красивые табы
В этот раз в поле зрения попало меню, пошаговая инструкция или можете называть это выезжающие табы.
Данное меню позаимствовано c одного сайта, которое и рассмотрим. Для начала пример:
Меню, пошаговая инструкция или можете называеть это выезжающие табы, основано на jQuery.сайт источник http://yapro.ru Fri Mar 12 2010 16:36:21 GMT+0300
Cостоит эта прелесть из CSS-кода, небольшого кусочка JavaScript и HTML. Все это можно посмотреть на отдельной странице »
Сделано всё не супер, но более-менее для новичка понятно, а именно:
Выбранный (текущий или первый) элемент не имеет ссылки, как бы считается, что Вы уже находитесь на этой странице, поэтому выглядит так:
<span><strong>Название</strong></span>
Элемент, который выглядит как ссылка, должен указывать на номер своего блока (DIV-а), и выглядит так:
<a onclick="switchSteps(this,2);return false;" href="#"><strong>Кликабельно</strong></a>
Вместо href="#" по правильному нужно указывать реальный адрес страницы, где так же есть содержание блока 2. Это нужно для того, чтобы пользователь с отключенным JavaScript прочитал его.сайт источник http://yapro.ru Fri Mar 12 2010 16:36:30 GMT+0300
Блок 2 должен находится в двойном контейнере:
<div class="stepsWrapper">
<div class="stepsInner">
здесь распологаются блок 2 и ему подобные (1, 3, 4, и т.д.), которые выглядят так
<div class="step2 steps00">содержание блока, любой HTML</div>
</div>
</div>
Таким образом, ничего сложного нет, а некоторые уже применяют этот скрипт в качестве двойного меню:
Комментарии