Основную часть сайта занимает навигация на сайте, чтобы пользователь мог с легкостью найти необходимую информацию. Но порой хочется вывести куда больше ценной информации на ресурсе не затрачивая при этом драгоценное пространство, ведь переборщить и нагрузить сайт лишним материалом означает потерять читаемость и общую планировку, а это негативно сказывается на имиджу сайта среди его постоянных читателей и не только. Данную навигацию можно встретить и у нас на сайте, пользователи зачастую спрашивают, как можно создать аналог.

В данном уроке мы рассмотрим как создать схожую навигацию с вкладками как у нас на сайте. Мы рассмотрим принцип работы, при этом стилизацию можно изменить на свое усмотрение, также заменив иконки. И так, приступим.

Шаг 1. HTML

Для начала мы рассмотрим разметку, TabMenu UL # это кнопки на верхней части вкладки. Внутри контейнера boxBody, необходимо указать 5 div‘ов, число div‘ов будет зависеть от того, сколько элементов вы указали в # tabMenu, в данном случае мы будем использовать 5. Таким образом, расположение BoxBody должно совпадать с расположением кнопки в tabMenu #.

С разметкой мы закончили, теперь перейдем к стилям.

Шаг 2. CSS

В стилях ничего сложного нет, их всегда можно с легкостью редактировать под свое усмотрение, в данных стилях мы сделаем вывод иконок, также добавим некоторые хаки для ie, и заключим простые правила для демонстрации и организации.

Со стилями все просто, не будем на них детальнее останавляваться, рассмотреть их более подробно можно в исходниках.

Шаг 3. JavaScript

Теперь самое интересное, нам необходимо оживить всю навигацию, придать скользящий эффект и эффект сворачивания панелей, при переходе на определенную вкладку. Более детально можно ознакомится с правилами jQuery в статье Jquery Animate Effect Tutorial.

Вот и все. Готово!