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

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

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

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

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

Для просмотра этой великолепной менюшки, специально создал ещё один демонстрационный блог, куда вы можете сходить прямо сейчас. Для установки этого меню в блог 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 - Видео

Всего доброго, Сергей



Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          • У меня тоже не идет анимация раскрытия меню

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

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

    • Привет,Ирина! data:blog.homepageUrl это и есть ссылка, то есть, домашняя страница, её менять не надо.

      • Да, но если я нахожусь на другой странице и нажимаю кнопку Home, то никаких действий не происходит.. А должно переходить на домашнюю страницу.

        • Тогда вместо data:blog.homepageUrl вставьте ссылку на главную страницу блога.

          • Я Выше писала, что пробовала уже так и не работает.

          • Все, я уже нашла как это исправить.
            Нужно вначале прописать:

            href=’адрес домашней странички’ rel=»nofollow»>Home

            href=’#’ rel=»nofollow»>Menu 1

          • Я в начале a expr:href заменила на просто a href и все заработало. Ура)

          • А вы будете это меню ставить? А шаблон какой у вас будет?

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

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

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

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

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

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

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

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

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

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

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

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

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

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