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

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

Данное меню позаимствовано 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:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

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

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