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

Горизонтальное меню для Blogger c красивым эффектом

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

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

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

Красивое горизонтальное меню с анимацией для Blogger

menu12
Меню с анимацией для Blogger

Для того, чтобы установить это меню зайдите в панель инструментов Blogger - Дизайн. Нажмите добавить гаджет Html/JavaScript:

menu
Нажмите добавить гаджет Html/JavaScript:

И в его поле добавьте такой код:

Здесь естественно меняйте названия пунктов меню и вместо решеток вставляйте ссылки на страницы. Сохраните гаджет.

Горизонтальное меню 3D для Blogger с эффектом вращения

Это меню особенно впечатляет, при наведение курсором мыши на пункт меню оно вращается, то есть переворачивается. Красота. Не забудьте проверить в демо блоге.

menu_1
3D Flip меню для блога

Для вставки в поле гаджета Html/JavaScript вот этот код:

Здесь тоже самое заменяйте пункты меню на свои и вставляйте вместо решеток ссылки на что угодно. И последнее меню будет выпадающим.

Как установить горизонтальное выпадающее меню в Blogger

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

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

menu_3

Сначала мы добавим стиль меню CSS в шаблон блога. Для этого перейдите Шаблон - Изменить HTML. Далее, найдите такой тег ]]></b:skin> и над ним вставьте код стиля:

Далее, будем добавлять script , для этого найдите код </head>  и чуть выше добавьте этот скрипт:

Если у вас подключена библиотека jquery, то строчку скрипта jquery надо удалить.

Теперь, вы можете сохранить шаблон. Перейдём теперь к последнему шагу. Добавление меню в блог. Перейдите Дизайн нажмите добавить гаджет HTML/JavaScript. Вверху шаблона как показано на скриншоте выше. Название гаджета оставьте пустым, а в его поле вставьте следующий код:

Вот и всё. Настраивайте своё выпадающее меню по своему усмотрению. Удачи всем. Пока.

P.S. Решить проблему с последним меню (подменю западает за шаблон) можно добавив небольшой код в стили шаблона, то есть, чуть выше строчки ]]></b:skin> :

Этот код от моего читателя, должно помочь.

С уважением, Сергей - блог Школа Bloggera

Комментарии

  • Большое спасибо, за такой интересный пост. Все получилось.

  • Доброго времени суток!у меня не выходит вот такое меню пожалуйста помогите!

  • простите я впервые создал блог, у меня получилось вставить ваше красивое меню, и вот тут у меня ступор, страницы то я создал НО ГДЕ ВЗЯТЬ ССЫЛКИ НА НИХ что бы вставить их вместо решеток (((

    • Привет! Ссылки на страницы в адресной строке браузера. На ярлыки — нажать на ярлык и также ссылка в браузере. Можно указать ссылки на ярлыки таким образом,вместо решётки вставить /search/label/технологии Вместо технологии вставить название вашего ярлыка и т.д. 🙂

  • Ура, спасибо что так быстро ответили 🙂 правда это мне не помогло… хех…
    попробую обрисовать словами — значит когда мы создаем страницу первым делом мы заходим на вкладку Страницы, там нажимаем кнопку Создать страницу, открывается у нас Страница где мы даем Заголовок страницы и вносим текст страницы… после внесения нужной мне информации я включаю Просмотр, меня всё предположим устраивает и я нажимаю кнопку Публикация… После нажатия у меня опять появляется страница Где отображены все мои страницы И ВОТ ТЕПЕРЬ ГЛАВНЫЙ ВОПРОС ДЛЯ МЕНЯ 🙂 (простите туплю но мне простительно я же хочу научится 🙂 где теперь взять ЭТОТ САМЫЙ АДРЕС который как я правильно понял берется в адресной строке браузера 🙂 я уже почитал объяснение как сделать по простому переключение между страницами, ХОЧЕТСЯ ЖЕ КРАСИВО БЛАГОДАРЯ ВАШИМ ШАБЛОНАМ 🙂

  • как здорово, что можно с вами консультироваться… я установил для себя вот такое вот меня \»Красивое горизонтальное меню с анимацией для Blogger\» в нем 5 элементов для перехода на страницы, а как сделать чудо, чтобы добавить еще одну страницу, не 5 а 6? 🙂

    • Привет, Сергей! В код меню попробуйте добавить ещё одну строчку — <li><a href="##########" rel="nofollow"><exespan> Здесь название</exespan></a></li> 🙂

  • спасибо, все получилось 🙂 вы спец в своем деле 🙂

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

  • Спасибо, всё заработало, какой вы молодец!

  • а у меня еще вопрос ((( получается на главной странице у меня каждое сообщение по отдельности, это круто тем более что каждое комментировать можно, а вот когда я создаю страницы, делаю на главной на них ссылки, перехожу туда а там может быть только одно сообщение или так же делается как и на главной???

    • Нет не делается. Статические страницы обычно создаются не для сообщений. С помощью страниц можно создавать — страницу О блоге и авторе, содержание блога, размещать различные инструменты на них, контакты (форма для связи с автором блога) и так далее.

  • хорошо, спасибо, найдем выход и из этих ситуации 🙂

  • Здравствуйте! Я воспользовалась Вашим горизонтальным меню 3D для Blogger с эффектом вращения. Все получилось отлично. Только очень хочется поменять цвета. Например, черный фон на салатовый, а белый текст сделать оранжевым. Подскажите, как это сделать? В каком месте что менять?
    Благодарна Вам за меню и заранее за ответ.

  • Помогите, пожалуйста, делаю выпадающее меню серое, но так получается, что подменю не видно, оно находится, как бы под шаблоном, что делать? Шаблон мой меня вполне устраивает, но текст должен быть поверх него. Я уже пробовала разные меню установить — это мне подходит больше всего, но вот этот нюанс все портит

  • Извините, не поняла получили ли вы письмо. У меня в данном варианте выпадающего меню, пункты подменю получаются под шаблоном. Как можно это исправить, шаблон меня устраивает и хочу текст поверх него. Буду ждать вашего ответа.

  • Сергей, я вчера в долгих поисках очередного шаблона нашла вариант, который заносится только в дизайнер java script без изменения HTML. Но не смогла отредактировать самую левую колонку, чтобы список открывался строго в один ряд. Посмотрите, пожалуйста, и помогите если можете. Остальные колонки я исправила по примеру одной правильной, а левая никак. Либо буду пробовать снова ваш шаблон загружать. Посмотрите в моем блоге, как получилось. И СПАСИБО. Буду ждать ответа.

    #nav8, #nav8 ul, #nav8 li {
    margin: 0;
    padding: 0;
    border: 0;
    }
    #nav8, #nav8 ul {
    background: rgb(46,95,122);
    }
    #nav8 {
    border-spacing: 0 0;
    position: relative;
    z-index: 50;
    width: 100%;
    }
    #nav8 ul {
    position: absolute;
    display: none;
    }
    #nav8 td:hover ul {
    display: block;
    }
    #nav8 ul li {
    list-style: none;
    }
    #nav8 .right {
    direction: rtl;
    }
    #nav8 .right ul {
    right: 0;
    }
    #nav8 .right li {
    direction: ltr;
    }
    #nav8 a {
    display: block;
    padding: 3px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    }
    #nav8 ul a {
    padding: 3px 15px;
    text-align: left;
    }
    #nav8 td:hover, #nav8 li:hover {
    background: rgb(96,145,172);
    }

  • Сергей, пожалуйста подскажите как можно изменить ширину горизонтального красивого меню. Если я добавляю к нему еще элементы(страницы) , они не встают в ряд по всей ширине блога, а занимают вторую строчку, хотя место есть. И само меню жмется к левой стороне а не устанавливается по центру Не знаю понятно ли я объяснила.

    • Здравствуйте, Елена!
      Попробуйте изменить width: 100%; в большую сторону, если конечно есть место.Хотя ширина установлена 100% . Вы бы адрес блога указали, глянуть надо. 🙂

  • Сергей, спасибо большое за оперативность. Все получилось после того как я вновь загрузила код. Сразу добавила еще несколько страниц — Встали в линеечку!!! Но… первый элемент все таки как то некорректно установился. Посмотрите — в чем может быть ошибка? Я чайник в блогостроительстве и этот блог у меня учебный. Я только начинаю что то настраивать. Хочется чтоб было все аккуратно и удобно в смысле навигации. Поэтому Ваш сайт это находка для меня. Спасибо. С наступающим Новым Годом!

  • Сергей спасибо большое за оперативный ответ. Все с шириной получилось но все таки с первым элементом какая то проблема. Если не сложно — посмотрите. Пишу второй раз. Почему то мой комментарий исчез.

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

  • Доброе время суток! У меня вот такой вопрос. Все сообщения сразу появляются на главной странице блога. Как можно страницы так же быстро добавлять в меню?

  • Здравствуйте, подскажите пожалуйста, как сделать меняющейся фон в

    меню при наведении на него мышкой, меню вертикальное создано из

    гаджета «Ярлыки»

  • Здравствуйте! У меня такая проблема, как только добавляю ява скрипт, последний шаг в сем меню, так он мне не меню показывает, а сам текст скрипта. Помогите пожалуйста.

  • Здравствуйте! Скажите пожалуйста, как только добавляю код ява скрипт в гаджет Java/Html (Пример1), так он мне не меню показывает, а сам текст скрипта. Помогите пожалуйста, хочу добавить меню под шапкой блога

  • Большое спасибо! Получилось 🙂 Подскажите, пожалуйста, как добавить под шапкой блога Фиксированное выпадающее многоуровневое меню 3D?
    http://shkolablogger.ru/gorizontalnoe-vyipadayushhee-menyu-dlya-bloga.html#comment-56296
    Оно у меня сверху над шапкой, когда вставляю код HTML в гаджет под шапкой, то тоже виден сам текст кода. Спасибо за ответ!

  • Добрый вечер. Создала по вашей статье горизонтальное меню. Всё получилось, СПАСИБО:)
    Но столкнулась с проблемой, при открытии фотографии строка меню перекрывает изображение. Возможно Вы подскажите что с этим можно сделать.

    https://pp.vk.me/c837724/v837724930/25e9b/e731zcMn10E.jpg

    • Привет! Я вам советую установить другое меню. С этим возникают разные проблемы (меню создавалось давно, а Blogger постоянно обновляется). 🙂 Выбор меню у меня в блоге большой, сможете подобрать подходящее.

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

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

Решите задачку: *