Меню сайта, шаги или красивые табы

Автор: Aport Пятница, Январь 23rd, 2015 Нет комментариев

Рубрика: Разное

В этот раз в поле зрения попало меню, пошаговая инструкция или можете называть это выезжающие табы.

Данное меню позаимствовано 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>
<div>
здесь распологаются блок 2 и ему подобные (1, 3, 4, и т.д.), которые выглядят так
<div>содержание блока, любой HTML</div>
</div>
</div>

Таким образом, ничего сложного нет, а некоторые уже применяют этот скрипт в качестве двойного меню:

Меню сайта, шаги или красивые табы

Скачать архив »

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты