Графические вкладки для сайта

В одной из своих прошлых статей я рассказывала как сделать вкладки на сайт. Сегодня же также поговорим о вкладках, но уже об более красивых и более сложных, а именно о графических вкладках. Ведь сами вкладки (табы) могут быть и изображением. Как например тут:

✪ DEMO⇊ СКАЧАТЬ

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

Разархивируйте архив, в нем будут 4 файла. Их нужно загрузить на Ваш сайт в папку tabnew.

JS

Для работы вкладок необходимо подключение библиотеки jQuery. Для этого нужно скачать файл jquery.idTabs.min.js. Создать в корне сайте папку js и поместить скачанный файл в эту папку. Далее на странице, где будут использоваться Табы разместить следующий код после тега <body>:

Если вкладки будут использоваться на всех страницах сайта — лучше разместить этот код в шаблон страницы.

Для сайтов на Worpdress:
В редакторе темы (Консоль — Внешний вид — Редактор) найти файл, который отвечает за функции темы. Обычно это function.php, но, например, в моей теме это includes/theme-functions.php. В самом конце, перед закрывающим ?> вставить следующий код

HTML

HTML код вкладок мало, чем отличается от кода простых вкладок. Ставите этот код в том месте веб-страницы, где должны быть Ваши вкладки.

CSS

Скопируйте код и вставьте его в CSS стили вашего сайта.

Вот собственно и все. Красивых Вам вкладок!


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *