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

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

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

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

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

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

Оцени публикацию:
  • 12,55
Оценили человек: 12
Теги : Меню сайта, красивые табы

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • если onclick поменять на onmouseover, то будет наверное удобнее ;)  кстати еще нужно поменять в функции switchSteps и в $('div.steps a.YAVIBRAN').trigger('mouseover');
    14 июля 2010, 13:45 коммент полезен : 0 # Center (гость)
  • Скрипт отстой - не работает, если больше 5 табов. Если текста в табах не много, то 6-й он вставляет в 1-й, 7-й во 2-й и так по кругу в интервале от 1 до 5. Если текста в табе много, то там начинает фиг знает что твориться.
    24 февраля 2011, 08:53 коммент полезен : 0 # Alex2
    • 1. Это лишь пример, который рассчитан под 5 табов текущей ширины, нужно больше табов с большим текстом - меняйте CSS-правила, кто запретит =))

      2. Обратите внимание, уже есть более новая версия табов http://yapro.ru/web-master/javascript/poslushnie-listayushiesya-tabi-ili-menyu-sayta.html
      24 февраля 2011, 08:57 коммент полезен : 0 # Admin
  • хороший урок.
    А как можно это дело на автоматическую ротацию еще поставить?
    02 февраля 2012, 12:31 коммент полезен : 0 # Алекса
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » JavaScript »