Як зробити меню з вкладками
Привіт, Катя! Мене зацікавила стаття про "Гарне оформлення статей в блозі", правда, я ще не визначилася як краще використовувати це в своєму блозі. Але питання не в цьому. Справа в тому, що я часто вставляю відео в свої повідомлення (наприклад, з youtube) і мені хотілося б заощадити місце (можна, звичайно, зменшити розмір самих відео, але мені не подобається дивитися відео в таких маленьких розмірах, а переходити на іншу сторінку не хотілося б). На деяких сайтах я зустрічаю, коли відео вставляються в одне повідомлення як би на різних вкладках, наприклад, як тут
але як це робиться я не знаю. Може бути допоможете красиво вирішити це питання?
Взагалі подібні вкладки називаються табами, від англійського tab (tabs). Це слово має багато значень, і яке з них послужило назвою меню з вкладками мені не відомо.
Таб-меню можна застосовувати, як в головному горизонтальному меню блогу, в сайдбарі (бічному меню) свого блогу, так і безпосередньо в тілі повідомлень. Все залежить від ваших особистих завдань і потреб.
Зізнаюся чесно, я не стала сильно заморочуватися кодом для таб меню. Справа в тому, що я по-тихоньку готую новий шаблон для цього блогу, так ось в новому дизайні у мене буде саме таке меню. Код для нього вже був придуманий розробником шаблону.
Тому я просто розібрала його на складові частини, розібралася, що для чого потрібно, щоб цей код функціонував і саме про нього зараз і розповім. Цей код перевірений тільки для шаблонів для Blogger. На скільки код хороший з точки зору програмування - сказати не можу. Головне працює :). Отже, приступимо.
Підключаємо бібліотеку Jquery для таб меню
Перше, без чого таке меню не буде існувати - це без підключення спеціальної бібліотеки Jquery.Прежде, ніж підключати, перевірте, швидше за все у вас вже вона підключена.
На Blogger, думаю, у всіх підключена, адже на цій платформі можна користуватися JavaScript, і у нас посилання на цей файл стоїть за умовчанням. Відкриваємо свій блог (НЕ адмінку, а саме блог), натискаємо правою кнопкою миші в будь-якому місці, вибираємо команду (в залежності від вашого браузера) - Вихідний код сторінки / Переглянути джерело сторінки / Перегляд HTML коду / Вихідний код. Відкриється нове вікно (або вкладка) і ближче до початку сторінки, між тегами
тут шукаємо ось таку строчку:Цифри всередині посилання можуть бути різні, залежить від версії скрипта (якщо я правильно розумію). Хто такий рядок не знайшов, значить потрібно вставити її самостійно. Дуже малоймовірно, щоб на Blogger не було такого рядка, але все ж я про всяк випадок опишу процес.
Відкриваємо Дизайн - Змінити HTML. знаходимо . І вище нього вставляємо "мою" рядок.
Бібліотеку підключили. Далі необхідно підключити ще один скрипт, завдяки якому і функціонує меню з вкладками.
Встановлюємо скрипт для меню з вкладками
$ ( '. Tab-widget-menu ul li: first'). AddClass ( 'selected');
$ ( '. Tab-widget-menu ul li'). Click (function ()
$ ( '. Tab-widget-menu ul li'). RemoveClass ( 'selected');
$ ( '# Tab-sidebar .widget1'). Eq ($ ( '. Tab-widget-menu ul li'). Index (this)). FadeIn (500);
Визначення стилів для меню
width: 500px; / * Ширина блоку * /
background: none repeat scroll 0 0 #FFFFCC; / * Колір активної вкладки * /
float: left; / * Горизонтальне положення вкладок * /
border-right: 1px solid # ECEDE8; / * Рамка у вкладок * /
color: # 555; / * Колір тексту * /
background-color: # 006DFF; / * Колір блоку з вмістом * /
padding: 31px 5px 5px; / * Поля навколо вмісту * /
border: 1px solid # ECEDE8; / * Рамка блоку з вмістом * /
Вставка таб меню в блог
Тепер переходимо безпосередньо до нашого меню з вкладками. Як вище написала, меню може бути, як в сайдбарі блога, так і у складі повідомлення.
Якщо ви хочете встановити меню в сайдбарі, відкриваємо Дизайн - Елементи сторінки - Додати гаджет. Вибираємо гаджет HTML / JavaScript.
Якщо меню необхідно вставити всередину повідомлення блогу, то в момент написання статті, переходимо на вкладку Змінити HTML і вставляємо такий код: