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

Горизонтальное выпадающее меню для блога

gorizontal'noe-vypadajushhee-menjuПривет, добрые люди! Сегодня я хочу представить вам отличный набор меню для вашего блога. В связи с различными предпочтениями пользователей, меню подобрал различные. Кто то предпочитает панель навигации для своего сайта многоуровневое фиксированное или простое горизонтальное выпадающее меню, а может кому то надо меню Ajax с различными стилями. Постараюсь чтобы вы нашли здесь то, что вам нужно.

Первое в списке пойдет:

Плавающее (фиксированное) выпадающее многоуровневое меню 3D

Fiksirovannoe-vypadajusсhee-menju
Фиксированное выпадающее многоуровневое меню 3D

Для просмотра этой великолепной менюшки, специально создал ещё один демонстрационный блог, куда вы можете сходить прямо сейчас. Для установки этого меню в блог Blogger нам потребуются пару шагов. Найти в шаблоне такую строчку ]]></b:skin> и чуть выше добавить код стиля CSS для нашего меню 3D flip:

Сохраните шаблон. Далее, нам нужно найти тег </head> или <body> и ниже его добавляем код HTML:

Как видите, ссылок в меню можно напихать много. Пользуйтесь. Важно! Исправил код, теперь будет работать у всех. В конце поста видео установки данного меню в блог.

Идем далее.

Простое горизонтальное меню для Blogger

gorizontal'noe-menju
Простое горизонтальное меню красное

Такое простое меню красного цвета можно установить с помощью гаджета HTML/Javascript:

HTML-Javascript
гаджета HTML/Javascript

Код идет вместе со стилем, для того, чтобы вам не лазить в шаблон блога. не мучиться:

Если вам нужен другой цвет меню,тогда есть другие. Голубой:

gorizontal'noe-menju-blue
Голубое горизонтальное меню

Для этого меню стиль CSS такой:

Поменяйте вверху в коде на этот стиль, а в HTML коде заменить <div class='redmenu'> на две строчки <div id='bluemenu'> <div id='menublues'>

Зеленый стиль меню:

gorizontal'noe-menju-green
Зеленый стиль меню

Код стиля:

Так же  в HTML коде замените на эти строчки <div id='greenmenu'> <div id='menugreen'>.

Далее, ещё меню:

Анимированное выпадающее меню для Blogger

Animirovannoe-menju
Анимированное выпадающее меню

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

Стиль CSS для этого меню:

Код HTML:

Можете совместить стиль и код для вставки в гаджет HTML/Javascript, заключив код CSS в <style> и закрыв его </style>. Конструкция должна иметь такой вид:

<style>

Здесь, код стиля меню

</style>

Код меню HTML

Еще предлагаю вам меню Ajax для вашего блога, с различными цветовыми стилями:

Ajax-Menu
Меню Ajax для блога Blogger

Стиль для голубого цвета меню Ajax, который надо вставить чуть выше строчки ]]></b:skin> в вашем шаблоне:

Затем, вам надо найти такой тег </head> и вставить чуть ниже такой Javascript скрипт:

Дальше, в гаджет HTML/Javascript надо вставить код:

Подставляете вместо ВАШ URL БЛОГА свой адрес, меняете название ярлыков и меню на свои. Если чего не получится, спрашивайте, помогу. Для красного стиля меню код стиля такой:

Код Javascript для меню такой:

Код меню HTML такой же как выше, только надо поменять <ul id='menunavblue' class='menunavblue'> на соответственно <ul id='navmenured' class='menunavred'>.

Зелёный цвет стиля меню:

Код Javascript:

Для этого цвета в HTML коде первую строчку меняем на такую <ul id='menunavgreen' class='menunavgreen'>.

На этом позвольте с вами попрощаться. Меню ещё есть, но для одного поста уже слишком много кода. Поэтому продолжение следует. До встречи.

Установка фиксированного меню Blogger - Видео

Всего доброго, Сергей - блог Школа Bloggera

Комментарии

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

  • Посмотрела сейчас ДЕМО первое вообще супер, а анимированное просто восторг вызвало. Хотя я приверженка минимализма. Ну первое правда ВАУ…

    • Согласен. Сейчас пробовал новые виджеты на демоблоге: подписка по почте и похожие сообщения, работают. Посмотрите после поста расположены, тоже класс. Надо поделиться ими. 🙂

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

  • Сергей, добрый день. классные виджеты. Поделитесь пожалуйста. Загорелась прямо.Похожие сообщения вообще необычно.

  • Воу… Вот это другое дело! Панели на панели похожи! Автор вы молодец, ваш сайт теперь у меня в закладках! порыскаю тут :3

  • Здравствуйте! вот еще фиксированного меню на этом сайте bloglovin.com/ . Оно очень крутое, вы можете сделать ещё и такое?

  • Давно искал что-то подобное, сейчас на тесте попробую. Спасибо.

  • Здравствуйте. Я недавно открыла свой блог на blogger. Мне бы хотелось сделать удобную навигацию и я нашла Ваши примеры меню. Уже несколько раз я пробую сделать разные варианты и все выпадающие меню не работают корректно. Если есть время, пожалуйста подскажите, как сделать работающее нормально, выпадающее меню. Заранее благодарю, спасибо.

  • Здравствуйте, Сергей! Я человек сугубо творческий, т е правое полушарие на всю голову,объясните мне,пожалуйста, вот, установила я код в дизайнере блогера, в шаблон даже не суюсь Установилось симпатичное меню, а как их наполнять??? У меня женский сайт, и я бы хотела, чтобы для каждого раздела была своя строка меню, как все туда *затолкать*
    Вообще-то, Сергей, хотелось бы просить Вас проанализировать мой сайт, он выглядит как у недоучки, Скажите, сто надо менять так 1 .2 ,3. На форуме Алдоис регулярно отсылает в справочники, и куда податься новичку, спрошу я Вас

    • В коде меню устанавливаете ссылки на статьи или на ярлыки.А насчёт блога я вам уже говорил уберите к чёрту такую рекламу. Ни кто из за неё ваш блог читать не будет.

  • Здравствуйте. Мне очень понравилось Ваше первое голубое меню. Я делаю все как у Вас описано, меню видно, но при наведении на пункты подпункты не разворачиваются… не могу понять в чем причина.

    И еще может подскажете где в коде поменять цвет с голубого на черный?

    • Привет, Ирина! В коде поменять цвет с голубого на черный — в коде стиля меню, вторая строка, найти background:#0091d6 и заменить на чёрный цвет.
      Если не работает меню значит, что то сделали не правильно.У меня тоже при установке в демо блог было как у вас, потом переустановил и всё окей.

      • Нет, я все делаю точно по схеме и переустанавливала раз 10 уже точно.
        Скорее всего здесь в описании чего-то не хватает…
        Так как я установила другое меню, третье сверху (анимированное выпадающее меню для Blogger), но вкладки так же не хотели разворачиваться, а потом я, случайно, у Вас в блоге, нашла Ваш совет другому пользователю добавить в CSS код и все заработало (В этой теме http://shkolablogger.ru/novoe-menyu-navigatsii-ajax-v-stile-mashable.html)
        Думаю с первым меню тоже что-то нужно добавить…

    • То же самое: подпункты не разворачиваются.

  • Доброго времени суток 🙂 У меня такой вопросик.
    В 3-ем меню сверху, там где окна выпадают по порядку,
    там в Sub Menu ссылку ставить нужно на место — ‘#’ ,
    а вот в домашнем странице Home не пойму куда там нужно ссыль тыкать?
    Я ставила на место ‘data:blog.homepageUrl’, но ничего не выходит…

  • Здравствуйте, а не подскажете ли, как сделать анимированное окно 3-х уровневым? А именно, к примеру, при наведении на подменю 1 выползало ещё несколько подподменю.

  • Здравствуйте, Сергей!
    Первое меню просто замечательное. Давно искала нечто подобное. Установилось хорошо, все разворачивается. Но, когда идет прокрутка страницы вниз, меню остается вверху сайта, а не плывет по странице, как у Вас в демо. Мне хочется, чтобы оно всегда было на виду при прокрутке. Как это сделать? C сайта пока убрала меню,пока не доработаю. Заранее спасибо за ответ.

  • Скажите пожалуйста, как «Фиксированное выпадающее многоуровневое меню 3D» добавить под шапкой блога?

  • Добрый вечер Сергей! Меню очень красивое и интересное. У меня вопрос к Вам, где нужно ставить ссылки чтобы в меню были переходы по моим ссылкам? Ответьте пожалуйста. Заранее, большое Вам спасибо!

    • Привет, Анатолий! 🙂 Ссылки вставляете вместо решеток # и пишите нужные вам названия разделов.Надеюсь где текст вставлять вы знаете 🙂

  • Здравствуйте, Сергей! Спасибо, большое за подробное, понятное описание и видео. Я просмотрела кучу всего в интернете, чтобы сделать выпадающее меню, но лучше вашего не нашла. У меня всё отлично работает. Всё получилось с первой попытки. Только для меня неудобство в том, что ссылки в фиксированном меню открываются в том же окне. Я загружаю ссылки на тесты онлайн (работаю в школе) и тогда чтобы попасть опять на блог нужно «щёлкать» обратно. ПРОСЬБА! научите, пожалуйста, что сделать, чтобы ссылки открывались в новом окне. Срочно нужно! Не оставьте без внимания. До 1 декабря надо сдать блог.

    • Здравствуйте! Используйте вот такую конструкцию
      <a href="#" target="_blank">Меню</a> или закрытую от индексации Google <a href="ссылка" rel="nofollow"target="_blank" rel="nofollow">Меню</a> Ссылки будут открываться в новой вкладке браузера.

  • Спасибо большое за внимание к моему вопросу. Я не сказала, что загрузила первое голубое ( у меня зелёное) меню и уже накидала кучу тестов туда. Я не хочу ничего менять, потому что меня всё устраивает и всё очень красиво и к месту. Вопрос: можно ли в шаблонах блога добавить какие-нибудь «иероглифы» чтобы мои ссылки открывались в новой вкладке. Может я Вас не поняла… Вы мне предложили другое меню? А гаджетами я пользуюсь, но в данном случае не поняла как их можно применить Спасибо. Буду ждать совета-помощи

  • СУПЕР! Вы гений! У меня всё получилось! Я пробовала вставить target , но в чём-то делала ошибку. Мерси-мерси Я счастлива просидела две недели с этой задачкой Бог дал розума вам написать. Спасибо Вам за ваш труд

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

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

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

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

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