Как сделать вкладки страниц site ru

HTML + CSS
Вкладки для сайта

Назначение вкладок

Вкладки на страницах сайта позволяют великолепно структурировать информацию, изначально скрывая какую-то её часть.

Создание вкладок позволяет экономить ГРОМАДНОЕ(!) количество места на сайте, что в свою очередь даёт возможность умещать «большое в малом».

Пример действующих вкладок Вы, если были, уже могли раньше видеть в разделе о jQuery UI .

Если же Вы ещё там не были, то для сравнения откройте эту страницу: «Умные вкладки» (откроется в новом окне) .

А здесь я покажу, по сути, такие же вкладки, но сделанные исключительно БЕЗ использования каких бы то ни было скриптов . Только HTML + CSS!

И, что самое интересное, они работают точно так же — при клике по ним, они открываются БЕЗ перезагрузки страницы .

Впрочем, чем читать мои восторженные слова об их достоинствах, лучше посмотрите, и сами увидите, как работают вкладки для сайта на этой странице. Покликайте по ним.

Я не знаю на каком устройстве Вы просматриваете сайт. Поэтому, прежде, чем кликать по вкладкам, сначала ознакомьтесь с дополнением к примеру. Вот оно:

Пример вкладок

Представленный пример создания и использования вкладок, отлично показывает возможности CSS для управления расположением элементов на странице.

Всё содержимое блоков вкладок прописывается в коде HTML, а вот их расположение и отображение, т.е. внешний вид, прописал в отдельной таблице стилей.

Содержимое вкладок может быть абсолютно произвольным: текст, ссылки, рисунки, аудио-плееры, видео, и т.д., и т.п.. Короче — всё, что только вздумается!

*Кстати! Под вкладкой №3 сможете проверить последнее утверждение, и послушать приятную музыку.
А вкладка №4 даст посмотреть интересное видео с YouTube, из которого Вы узнаете, чему нужно учиться, чтобы делать подобные вкладки с помощью скриптов.

Создание вкладок

Шапка с названиями вкладок создана с помощью тэгов «input», которым в атрибутах я установил тип «radio».
К тому же — атрибут «name» у всех input-ов в шапке вкладок одинаковый: «inset», что позволяет выбрать любую вкладку, а предыдущая, при этом, отключится.

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

Читать еще:  Как сделать детский столик

Если нужно изменить цвет всех вкладок, либо цвет какой-то одной вкладки сайта, это очень легко делается в подключённой дополнительной таблице CSS .

Добавил интересную возможность(!) использования пустого тэга «input», прописав его с тем же именем прямо в контент вкладки. Попробуйте!

Закрыть все вкладки

*P.S. Этот пример прописал только в HTML-коде через атрибут «style». Таблицу стилей не трогал.
*В остальных вкладках такую кнопку делать не стал.*

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

Желающие скачать себе этот курс (бесплатно) , найдут его здесь: «Полезное» (откроется в новом окне) .

Содержимое этой вкладки Вы можете не только читать, но и слышать. Конечно, если только у Вас установлена программа флэш-плеера.

В «Яндекс-браузере» такая установлена «по умолчанию», а вот в различных мобильных устройствах: планшетах, смартфонах её может и не быть.

Если Вы не видите сейчас симпатичный аудио-плеер, то стало быть, и не слышите приятную музыку, установленную в него. Как сделать плеер для вкладки сайта, можете узнать здесь: «Аудио и Видео на HTML» (откроется в новом окне) .

В этой же, четвёртой вкладке, сохранил для Вас уже целое видео. Сможете посмотреть вводный видео-урок по технологии JavaScript и jQuery .

Подключил его сюда, чтобы Вы могли оценить, насколько проще показанный способ создания вкладок для сайта с помощью одних лишь только HTML+CSS, чем делать это с использованием скриптов.

Желая перейти на другую вкладку, остановите видеоплеер, иначе звуковую составляющую урока всё равно будете слышать.

В своё время сам начинал учиться, а потом неоднократно возвращался к нему, тренируясь по этому великолепнейшему(!) обучающему курсу.

Результаты изучения, кого интересует, здесь: JAVASCRIPT (откроется в новом окне) .

А в этом примере вкладки Вы можете посмотреть, сколько(!) стороннего кода нужно для организации такого же эффекта средствами jQuery UI .

Этот скриншот взял со своего же сайта, со страницы «Современные технологии» (откроется в новом окне) .
На ней Вы сможете подробно узнать, для чего я такой скриншот сделал, да и вообще всю, указанную в ссылке страницу.

Действие показанного примера вкладок для сайта в точности совпадает с тем, ссылку на который я давал в начале страницы. НО! Количество кода здесь минимум в 10 раз(!) меньше, чем в аналогичном примере, созданном с помощью jQuery UI .

Дополнение к примеру вкладок

Надеюсь, продемонстрированный пример создания простых HTML + CSS вкладок для сайта Вам понравился. Мне — так очень!

И действительно. Трудно сказать, чего нельзя сделать с их помощью, причём, всё можно разместить компактно . Страница сайта не будет перегружена.

Проверяя сделанное на разных электронных устройствах, обнаружил, что НЕ ВСЕ они поддерживают такой простой способ создания вкладок для сайта.

Читать еще:  Как сделать активацию windows 7

На каких устройствах проверял? Вот на этих:

Так вот — смартфон с О.С. «Андроид» (он на фото нижний слева) категорически не хотел реагировать ни на смену вкладок, ни на свёртывание первой из них .

Остальные же электронные друзья: стационарный компьютер, ноутбук, планшет работали, как полагается.

**Да! Кстати!
У планшета та же самая операционная система, и такой же браузер «Google Chrome», но, видимо, не столь «замобиленный» , как у смартфона.

И в то же время — упомянутый в самом начале страницы способ создания таких вкладок с помощью jQuery UI , хоть и содержит очень много(!) кода, однако признаётся всеми устройствами БЕЗ ИСКЛЮЧЕНИЯ!

Вот такое дополнение к примеру вкладок . . . .
Надеюсь, оно поможет Вам решить, как лучше сделать вкладки на странице сайта.

А в дополнение к увиденному, посмотрите ещё один интересный раздел, внешние эффекты которого очень похожи на действие вкладок.
Такой раздел находится здесь: «Спойлер на JavaScript» (откроется в новом окне) .

Все права защищены. Copyright © 2009 — Коротеев Владимир.

Подборка красивых вкладок — набор красивых вкладок для сайта

Сегодня я предлагаю вашему вниманию подборку красивых и оригинальных вкладок. При создании данных эффектов были использованы псевдо-элементы, изображения SVG и CSS переходы. Дизайн всех вкладок выполнен в современном стиле и подойдет практически для любого сайта. Посмотрите примеры этих вкладок и вы сами удивитесь насколько необычно можно оформить, казалось бы, такой часто используемый элемент на сайте.

Подборка красивых вкладок

Похожие статьи, опубликованные раньше:

Посмотреть примерСкачать

Подборка красивых вкладок

Если вы смотрели демо версию, то смогли заметить что все примеры находятся на одной странице. Поэтому если вы скачаете и откроете исходники, то увидите длинную страницу как на изображении слева. Не пугайтесь! Там всё красиво структурировано. Вам лишь нужно взять нужный «кусочек» кода и вставить его себе на сайт.

Каждый новый пример расположен в отдельном блоке .

Тоже самое обстоит и с файлом стилей. Он также большой но там всё прокомментировано, поэтому проблем возникнуть не должно.

Если кто-то до сих пор не посмотрел демо, то для вас я сделал несколько скриншотов 🙂 :

Вывод

Неплохая подборка вкладок с нестандартными эффектами и переходами. Уделите несколько минут своего времени и посмотрите все вкладки. Бывает так, что смотришь и думаешь: «Ну обычные вкладки, что тут такого. Да и не очень и нужны они мне.». Но один, какой-нибудь необычный, дизайн настолько сильно запоминается, что когда нужно реализовать вкладки на сайте, именно таким образом и хочется их сделать. А где их видел даже и не вспомнишь!

Читать еще:  Как в ворде сделать отрывные телефоны

Поэтому не забываем добавлять мой сайт в закладки в браузере (делается это сочетанием клавиш CTRL+D) 😉 .

Как сделать вкладки на странице сайта

Табы (Tabs) — это вкладки на одной странице сайта, которые экономят время и упорядочивают информацию. Я английского языка tabs — это ярлык, этикетка, лейбл. А нам в веб дизайне привычнее и понятнее называть их табами или вкладками. Но вкладки легче показать, чем объяснить.Пример вкладок для сайта

Этот пример и сам скрипт взят мною с сайта jQueary idTabs. Очень интересные сайт где много табов с примерами, очень советую.

И в этой статье мы будем разбирать только один, самый простой скрипт создания табов, но как по мне и его вполне достаточно для полета фантазии.

3 шага для создания вкладок на своем сайте.

Шаг 1 — JS

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

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

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

Шаг 2 — HTML

Это непосредственно код скрипта вкладок.

Скрипт вкладок для сайта
HTML

Сразу под этими вкладками вставить:

Для сайтов WordPress:

Этот код Вы вставляете в то место страницы (или шаблона страницы) где Вы хотите, чтобы у Вас были вкладки. В ucoz удобно делать вкладки в шаблонах, а вместо информации вставлять соответствующие системные коды. Именно так я создала Блок описания товара в своем Скрипте Интернет-магазина.

Как видим сам код простой и изменить его не составит труда. Меняете названия вкладок по своему усмотрению. Наполняете абсолютно любой информацией, используя html-теги. Информации должна быть внутри соответствующих div-тегов.

Если Вы хотите добавить еще вкладки, то копируете и вставляете во Вкладках строчку
Вкладка 3
, а в Инфо строчку

Шаг 3 — CSS

С кодом постепенно стало ясно, но ведь вкладки должны иметь внешний вид, хотя бы такой как в примере! Для этого используем CSS Стили. Ниже приведены стили моего примера, на их основе Вы можете создать свои собственные, нужна только фантазия и совсем небольшие знания CSS :-).

Итак, копируем код, который ниже и вставляем его Панель Управления — Дизайн — Управление дизайном (CSS) в самый низ странцы.

Источники:

http://www.dopinform.ru/site25.html

http://sitehere.ru/podborka-krasivyx-vkladok

Как сделать вкладки на странице сайта

Ссылка на основную публикацию
Статьи на тему:

Adblock
detector