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

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

Данное меню позаимствовано 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>

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

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

• если onclick поменять на onmouseover, то будет наверное удобнее  кстати еще нужно поменять в функции switchSteps и в $('div.steps a.YAVIBRAN').trigger('mouseover');

  14 июля 2010, 17:45 коммент полезен : 0 # Center (гость)

• Скрипт отстой - не работает, если больше 5 табов. Если текста в табах не много, то 6-й он вставляет в 1-й, 7-й во 2-й и так по кругу в интервале от 1 до 5. Если текста в табе много, то там начинает фиг знает что твориться.

  24 февраля 2011, 11:53 коммент полезен : 0 # Alex2

• 1. Это лишь пример, который рассчитан под 5 табов текущей ширины, нужно больше табов с большим текстом - меняйте CSS-правила, кто запретит 2. Обратите внимание, уже есть более новая версия табов http://yapro.ru/web-master/javascript/poslushnie-listayushiesya-tabi-ili-menyu-sayta.html

  24 февраля 2011, 11:57 коммент полезен : 0 # Admin

• хороший урок. А как можно это дело на автоматическую ротацию еще поставить?

  02 февраля 2012, 15:31 коммент полезен : 0 # Алекса