Как сделать вкладки страниц 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 вкладок для сайта Вам понравился. Мне – так очень! 
И действительно. Трудно сказать, чего нельзя сделать с их помощью, причём, всё можно разместить компактно . Страница сайта не будет перегружена.
Проверяя сделанное на разных электронных устройствах, обнаружил, что НЕ ВСЕ они поддерживают такой простой способ создания вкладок для сайта.
На каких устройствах проверял? Вот на этих: 
Так вот – смартфон с О.С. “Андроид” (он на фото нижний слева) категорически не хотел реагировать ни на смену вкладок, ни на свёртывание первой из них .
Остальные же электронные друзья: стационарный компьютер, ноутбук, планшет работали, как полагается.
**Да! Кстати!
У планшета та же самая операционная система, и такой же браузер “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
Загрузка...
