Как сделать меню с вкладками — Tab (таб) меню

Доброго времени суток, уважаемые читатели. Этой статьи могло бы и не быть, если бы не одно письмо от читательницы, в котором она попросила рассказать, как красиво оформить видео в блоге, при этом сэкономив место в теле сообщения. Вот, кстати, и письмо:

Здравствуйте, Катя! Меня заинтересовала статья про "Красивое оформление статей в блоге", правда, я еще не определилась как лучше использовать это в своем блоге. Но вопрос не в этом. Дело в том, что я часто вставляю видео в свои сообщения (например, с youtube) и мне хотелось бы сэкономить место (можно, конечно, уменьшить размер самих видео, но мне не нравится смотреть видео в таких маленьких размерах, а переходить на другую страницу не хотелось бы). На некоторых сайтах я встречаю, когда видео вставляются в одно сообщение как бы на разных вкладках, например, как здесь

video-dlya-bloga

но как это делается я не знаю. Может быть поможете красиво решить этот вопрос?

Вообще подобные вкладки называются табами, от английского tab (tabs). Это слово имеет много значений, и какое из них послужило названию меню с вкладками мне не известно.

Таб-меню можно применять, как в главном горизонтальном меню блога, в сайдбаре (боковом меню) своего блога, так и непосредственно в теле сообщений. Все зависит от ваших личных задач и потребностей.

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

Поэтому я просто разобрала его на составные части, разобралась, что для чего нужно, чтобы этот код функционировал и именно о нем сейчас и расскажу. Этот код проверен только для шаблонов для Blogger. На сколько код хорош с точки зрения программирования – сказать не могу. Главное работает:). Итак, приступим.

Подключаем библиотеку Jquery для таб меню

Первое, без чего такое меню не будет существовать – это без подключения специальной библиотеки Jquery.Прежде, чем подключать, проверьте, скорее всего у вас уже она подключена.

На Blogger, думаю, у всех подключена, ведь на этой платформе можно пользоваться JavaScript, и у нас ссылка на этот файл стоит по умолчанию. Открываем свой блог (не админку, а именно блог), кликаем правой кнопкой мыши в любом месте, выбираем команду (в зависимости от вашего браузера) - Исходный код страницы/Просмотр кода страницы/Просмотр HTML кода/Исходный код. Откроется новое окошко (или вкладка) и ближе к началу страницы, между тегами <head>тут</head> ищем вот такую строчку:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Цифры внутри ссылки могут быть разные, зависит от версии скрипта (если я правильно понимаю). Кто такую строчку не нашел, значит нужно вставить ее самостоятельно. Очень маловероятно, чтобы на Blogger не было такой строчки, но все же я на всякий случай опишу процесс.

Открываем Дизайн – Изменить HTML. Находим </head>. И выше него вставляем "мою" строчку.

Библиотеку подключили. Далее необходимо подключить ещё один скрипт, благодаря которому и функционирует меню с вкладками.

Устанавливаем скрипт для меню с вкладками

Открываем Дизайн – Изменить HTML. На всякий случай ставим галочку "Расширить шаблоны виджетов". Находим </body> и выше этого тега вставляем код:
<script type='text/javascript'>
$(document).ready(function(){
$('#tab-sidebar .widget1').hide();
$('#tab-sidebar .widget1:first').show();
$('.tab-widget-menu ul li:first').addClass('selected');
$('.tab-widget-menu ul li').click(function(){
$('.tab-widget-menu ul li').removeClass('selected');
$(this).addClass('selected');
$('#tab-sidebar .widget1').hide();
$('#tab-sidebar .widget1').eq($('.tab-widget-menu ul li').index(this)).fadeIn(500);
});
});
</script>
Вообще этот код можно поместить абсолютно в любое место в шаблоне. Но я считаю, что чем ниже оно будет, тем лучше. Благодаря этому не будет происходить задержка с загрузкой страницы. Если у вас не получается его вставить в шаблон блога, можно вставить в гаджет HTML/JavaScript, и поместить этот гаджет внизу страницы.

Определение стилей для меню

Чтобы наше меню красиво выглядело, к нему необходимо применить CSS. Я немного поколдовала, ниже увидите, как это может выглядеть. Вы же можете настроить внешний вид под свой вкус. Итак, стили ставим сразу перед строкой ]]></b:skin>
#tab-sidebar, tab-widget-menu clear {
width: 500px; /*Ширина блока*/
}
.tab-widget-menu li.selected {
background: none repeat scroll 0 0 #FFFFCC; /*Цвет активной вкладки*/
bottom: -1px;
position: relative;
}
.tab-widget-menu li {
float:left;  /*Горизонтальное положение вкладок */
display:block;
padding:0 12px;
border-right:1px solid #ECEDE8; /*Рамка у вкладок */
height:30px;
line-height:30px;
cursor:pointer;
color:#555; /*Цвет текста*/
text-align:center;
}
.video {
width: auto;
background-color: #006DFF; /*Цвет блока с содержимым*/
padding: 31px 5px 5px; /*Поля вокруг содержимого*/
border: 1px solid #ECEDE8; /*Рамка блока с содержимым*/
}
Я подписала основные элементы, которые скорее всего вы захотите изменить. Остальные отвечают в основном за расположение элементов. Менять можно, но мне кажется, ни к чему.

Вставка таб меню в блог

Теперь переходим непосредственно к нашему меню с вкладками. Как выше написала, меню может быть, как в сайдбаре блога, так и внутри сообщения.

Если вы хотите установить меню в сайдбаре, открываем Дизайн – Элементы страницы – Добавить гаджет. Выбираем гаджет HTML/JavaScript.

Если меню необходимо вставить внутрь сообщения блога, то в момент написания статьи, переходим на вкладку Изменить HTML и вставляем такой код:

<div id='tab-sidebar'>
<div class='tab-widget-menu clear'>
<ul>
<li class='tab1'>Название первой вкладки</li>
<li class='tab2'>Название второй вкладки</li>
<li class='tab3'>Название третьей вкладки</li>
</ul>
</div>

<div class='widget1'>>
<div class='video'>
Содержимое первой вкладки
</div>
</div>

<div class='widget1'>
<div class='video'>
Содержимое второй вкладки
</div>
</div>

<div class='widget1'>
<div class='video'>
Содержимое третьей вкладки
</div>
</div>
</div>

Не рекомендую менять class и id (кроме <div class="video">) в этом коде, т.к. он строго привязан к коду, который мы устанавливали в шаблон блога. Но присваивать новые class или id (там, где его нет) можно. Это может потребоваться, если вы захотите изменить внешний вид вкладок.

Надеюсь, понятно по моим комментариям, где что должно быть.

Принимайте работу.

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

Надеюсь, вам понравилось данное решение и вы с легкостью справитесь с его установкой. Если что-то не получится, спрашивайте в комментариях, постараюсь помочь. Кстати, для WordPress для этих случаев есть готовые плагины, но так же можно найти и скрипты, которые устанавливаются вручную. В будущих статьях расскажу и об этом. А для любителей DLE рекомендую позаботиться о безопасности своего сайта и узнать про заплатки на DLE. Хорошо, что для Blogger нам не нужно думать о таких вещах, как взлом. Конечно, можно взломать все, что угодно, но нас защищает сам Google, а это серьезная контора, так что спите спокойно жители Blogger.Удачи вам.


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

Как сделать меню с вкладками — Tab (таб) меню: 45 комментариев

  1. Retliff

    Всегда получаю удовольствие от подробности описания процесса и ясности стиля изложения! Спасибо, Катя! Блестяще, как всегда!
    У меня к тебе тоже вопрос (или идея для нового поста)!-)
    Часто бывает, что код, который публикуется в статье, не вмещается в габариты блока сообщений.Может быть ты знаешь, как сделать скроллинг?

  2. Иван

    Вот никто такого раньше подобное не писал!!! Круто Катя, круто, что бы без тебя русские блогеры делали!

  3. SEO-Дилетант'ка

    На сколько мне известно, формат видео на YouTube только один. Под окном видеоролика есть кнопка «Встроить» — выдается только один вид кода, и именно его полностью надо вставить. Можно только предварительно указать размер окна, цвет рамки, и ещё кой-какие настройки.

  4. SEO-Дилетант'ка

    Спасибо, Сергей.
    Не пытаешься ли ты мне намекнуть, что мне стоит использовать скроллинг? 😉 Я подумаю над этим…
    Я напишу, как сделать скролл в ближайших ответах на вопросы.

  5. Retliff

    Никаких намёков, Катюша!-)
    Просто это действительно актуально!
    А ещё (кроме скролла) видел очень интересный вариант с кнопкой, где большущий код открывался на новой вкладке — это тоже было бы интересно реализовать!-)

  6. SEO-Дилетант'ка

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

  7. SwaEgo

    Спасибо за как всегда полезную информацию.С блоггера переезжаю,но пригодится по-любому)

  8. KinoBestia

    Катюша, спасибо за замечательную статью, я нигде и не встречала такого интересного решения для видео — действительно удобно, что не нужно открывать отдельную страницу, плюс аккуратно и оригинально=)
    У меня тут к вам вопрос — понимаю, что он не вписывается в рамки данного поста, но, думаю, эта тема станет вскоре очень актуальной: мы размещаем на страницах своих блогов видео-контент — из youtube, других видеохостингов, сами загружаем. Как можно добиться их индексации так, чтобы они попали в выдачу google video? Допустим, я разместила на youtube своё видео и встроила его на свой блог. На youtube оно быстро проиндексируется, но я хочу, чтобы проиндексировалось именно то видео (не страница, а видео), которое расположено на странице моего блога. Есть ли примеры какой-то рабочей схемы? Я читала документы google, даже составила в соответствии с рекомендациями и отправила в гугл вебмастерс video sitemap с данными встроенного у меня видео с ютьюб, однако эти видео так и не проиндексировались. Скажите, пожалуйста, интересовались ли вы темой индексации видео?=)

  9. Anna Syskova

    Катя, большое Вам спасибо))
    в коде скрипта, как уже отметил Vlad Igolkin, в первой строке в конце стоит лишний знак /
    Единственная непонятка — как можно увеличить расстояние между вкладками? потому что у меня текст на них сливается в одну строку, пробелы не помогают, цвет «Рамка у вкладок» тоже…

  10. SEO-Дилетант'ка

    Оставьте комментарий, чтобы в вашем нике была не ссылка на твитер, а ссылка на ваш блог. я зайду и посмотрю. Мы говорим о blogger. Посмотрите внимательно, 99% того, что вам не нужно подключать библиотеку.

  11. MackapaD

    да, blogger. если не добавлять код для подключения библиотеки Jquery ничего не работает.

    извините, я тут в комментировании тыкаю, что удобнее.

  12. SEO-Дилетант'ка

    Чтобы гугл индексировал видео, нужно специальный файл sitemap.xml создавать, а на блоггер даже обычного нет. Сегодня посмотрела, что ещё можно с помощью специального канала mRSS сделать, я подробнее почитаю, если это возможно сделать на Blogger, я обязательно об этом напишу.

  13. KinoBestia

    Я делала это через wordpress, создавала sitemap.xml — там есть специальный плагин для видео sitemap, можно карту сгенерировать автоматически + самостоятельно внести дополнительные сведения, на блоггере, думаю, реализовывать это надо как-то по-другому. Через канал mRSS не пробовала, будем ждать новостей от вас=)))

  14. Иван

    Катя, убрал фон, он у меня смешал видео влево… Хочется кнопки сделать в низу без отступа с лева и высоту по меньше…
    Не подскажешь?! Я пробовал код кнопок ставить вниз но в итоге раскрывалось сразу 2 ролика… Можешь посмотреть что получилось у меня на блоге в ярлыке news…

  15. Шульга Василий Михайлович

    А как с помощью этой возможности объединить виджет комментариев vkontakte и стандартныt комментарии среды blogger в единое целое, но с возможностью выбора той или иной системы комментария?

  16. SEO-Дилетант'ка

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

  17. san4izl

    Катя, большое спасибо за статью. Но хотелось бы узнать как такие табы установить в WordPress???

  18. SEO-Дилетант'ка

    Именно этот код в мой тестовый WordPress не встал. Но вы можете попробовать. Не исключено, что у вас может встать. Реализация точно такая же, просто разные скрипты могут вступать в конфликт между собой. Так же, я знаю, для WP есть готовые виджеты. Ключевое слово для поиска Tab. Так же и в поисковиках ищите по этому слову. Многие выкладывают свои скрипты такого меню, которое можно интегрировать в любую CMS. Главное найти тот, который не будет вступать в конфликт с уже имеющимися скриптами.

  19. dplenin

    Катерина, не понял самого главного, как вставлять видео в уже готовое таб меню? добавляю код в тело сообщение, вот, что получается: 

  20. Vik-artemova

    Извините дилетанта! У меня получилось темно синее меню и не такое красивое как у Вас. Сделал все как описано. Т.е. ваше меню серое и неширокое, а у меня синее и вылазит из боковой части блога.

  21. SEO-Дилетант'ка

     Вполне вероятно, что у вас не работает предложенный мной скрипт. Это может быть из-за того, что у вас используется уже библиотека JQuery и оба скрипта конфликтуют между собой. Есть два варианта решения проблемы. Либо поискать другой скрипт для вывода меню. Либо разобраться с каким скриптом конфликтует меню и добавить специальный код. Вот тут я бы с радостью вам помогла, но я сама не сильна в этом. Он так и называется jquery noconflict. Документация по этому вопросу.

  22. SEO-Дилетант'ка

     Мое меню — это то, которое в сайдбаре? Так это же я подгоняла под свой дизайн. Вы тоже можете свое меню изменить. За внешний вид полностью отвечает код, который описан, начиная с подзаголовка Определение стилей для меню. посмотрите внимательней, там есть комментарии, вы можете все менять в зависимости от цвета вашего блога и ширины колонки.

  23. SEO-Дилетант'ка

    Ну мне картинка ни о чем не говорит. Надо бы как-то поподробней описать, что делаете.
    Может все же конфликт возникает с другим скриптом?

  24. SEO-Дилетант'ка

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

  25. Flash_net

    Доброго времени суток! Подскажите, как по умолчанию сделать например, активной вторую вкладку?

  26. SEO-Дилетант'ка

     А посмотрите в коде после заголовка «Устанавливаем скрипт для меню с вкладками» есть строки:
    $(‘#tab-sidebar .widget1’).hide();

    $(‘#tab-sidebar .widget1:first’).show();

    $(‘.tab-widget-menu ul li:first’).addClass(‘selected’);
    Так вот widget1 — это содержимое первого виджета. Слово «first» — это первый, слово «selected» — это выделен. В общем, попробуйте вместо widget1 указать widget2. Но это только предположение, я в кодах не сильно разбираюсь и эксперименты не проводила. Но может у вас получится:).

  27. Дмитрий

    Да вещь классная я немного доработал под соцсети  можно посмотреть здесь http://gorod33.blogspot.com/2011/12/chernyi-spisok.html

  28. InDaTim

    Спасибо, все работает, все настраивается элементарно, но вот что не могу найти: как убрать кусочек который вылазит после третьей вкладки и упирается в правое поле? А то вот в моем блоге (http://indatim.blogspot.com) как-то оно не красиво смотрится, т.е. хочется чтобы оно было как реальные виджет и стояло посредине!

  29. Илья

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

  30. Etna BogomoLova

    Доброго времени суток, тезка! Катя, подскажите пожалуйста, какую статью в вашем блоге мне следует изучить, чтобы отыскать ответ на мой вопрос: я хочу в своем блоге поменять скучный архив на тэги. Т.е. чтобы статьи раскидывать по папкам. Сейчас все статьи у меня сохраняются автоматически по дате их публикации. Заранее спасибо за ответ

  31. Anna

    Катерина, здравствуйте!

    Вам комплимент — вы
    умница!

    Ответьте, пожалуйста,
    на мои вопросы.

    А как насчет
    индексации поисковиками
    статей, которые содержатся в меню?

    Читала,
    вот цитаты: “Результаты
    теста показывают, что яваскрипт понимает
    Google и российский поисковик Nigma.
    Остальные поисковые системы (Yahoo, Bing,
    Яндекс, Рамблер, AltaVista) с яваскриптом не
    работают», «Всё
    что вы делаете на javascript — это не
    индексируется”, “Ярлыки изначально
    левая дублирующая информация и закрыта
    от индексации”.

    Судя
    по этому статьи на
    которые
    переходишь через выпадающее меню, а не
    через страницы не будут индексироваться,
    кроме Google
    и Nigma?

    Я
    вижу у вас статьи в выпадающем меню идут
    через ярлыки.

    Ваше
    мнение?

    У
    меня в меню без Jquery, переход на страницы
    идет через Меню
    1 — пункт 1

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

    Я
    бы хотела вообще убрать гаджет
    «страницы». Но тогда где же я буду писать
    статьи?

    Или
    гаджет страниц не удалять, а скрыть их
    отображение в блоге. Оставить только
    страницу «Главная».

    Хочу
    чтобы она была вверху. Но тогда она одна
    занимает всю горизонтальную панель, а
    Вкладки меню под ней на второй панели.
    А рядом с «главной» панель меню не
    ставится. Так, чтобы они были на одной
    линии.

  32. Bloknot2001

    Возможно ли в html  вставить код , что такое вот передвигающееся меню получилось, если есть дайте п.ж. рабочий код 🙂

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

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