Как в Blogger Сделать Меню

Blogger: Выпадающее меню с адаптивным дизайном
Горизонтальное выпадающее меню второй вариант
Blogger: Как настроить Главное Меню
Стандартное выпадающее меню
Главное меню с якорными ссылками

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

Blogger: Выпадающее меню с адаптивным дизайном

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

Скачать код меню

Чтобы узнать, как его устанавливать посмотрите видео:

Тема Emporio оказалась самой хитрож... вот решение, как установить это же меню в Emporio.

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

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

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

Так что, если вы ищете для своего блога меню под мобильные устройства, вы попали по нужному адресу. Сегодня в этой статье мы покажем вам, как можно легко добавить на свой блог Mobile Responsive Multi Dropdown Menu. Для устройств с разными расширениями дисплея это меню будет отображаться по разному. Чем меньше расширение, тем компактнее оно будет выглядеть. Чтобы увидеть наше главное меню в действии, перейдите на наш тестовый блог.

Для того чтобы установить горизонтальное выпадающее меню на свой блог вам нужно открыть раздел Шаблон - Изменить HTML и найти там код ]]></b:skin> перед которым нужно вставить следующий код:

CSSnav { display: block; margin-top: 100px; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a { color: #fff; background: #9ca3da; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #9ca3da; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; margin-top: 100px; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } .menu li a:hover,.menu li:hover>a { background: #9ca3da; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }

Затем находим код </body> перед которым нужно добавить следующий код:

JS<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});
//]]>
</script>

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

HTML<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav>

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

Blogger: Как настроить Главное Меню

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

Для настройки нужно выбрать название одной из ячеек главного меню к примеру на нашем сайте это будет ячейка под названием Интересное. Дальше в панели управления выбираем раздел Тема - Изменить HTML в открывшемся кликните в любом месте левой кнопкой мышки, чтобы оно выбралось и нажмите сочетание клавиш CTRL+F в открывшемся поисковом окошке вводим название ячейки и жмем клавишу Enter. Видим браузер нашел нашу ячейку и заодно остальные ячейки. Теперь название ячейки меняете своими именами, а в местах, где стоит # ставите вместо нее ссылку на ту страницу, которую должна открывать ячейка вашего меню. Жмете сохранить шаблон и проверяете проделанную работу. Если вам нужно добавить ячейку к главному меню копируете уже имеющуюся ячейка и вставляете ее за той, которой она должна идти, только не забудьте поменять название и ссылку.

Так же не менее важный нюанс, когда вы вставляете ссылку от ярлыка к примеру она выглядит так:

http://laport.blogspot.com/search/label/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B5?&max-results=7

тогда шаблон не сохранит, и выдаст ошибку в таком случае в этой ссылке вам нужно вписать amp; окончание ссылки должно выглядеть так ?&amp;max-results=7 После этого шаблон сохранится.

На скриншоте мы обвили все описанные выше действия.
Если вы все равно не поняли, что да как предлагаем вам посмотреть видео инструкцию по настройке главного меню.

Видео инструкция:

Настройка меню в Дизайне

Стандартное выпадающее меню

Вы уже знаете, что в блоггере есть стандартное меню (виджет Страницы) в которое можно добавлять не только статические страницы, но и ссылки на любые другие страницы. И по умолчанию в нем нет возможности задать выпадающие ссылки. Вот как раз это мы с вами будем исправлять. Для начала перейдите в панель управления, раздел Дизайн, создайте новый гаджет HTML/Javascript, разместите в нем HTML код:

HTML<div class="section" id="page_list_top" name="Список страниц (верхний)"><div class="widget PageList" data-version="2" id="PageList1">
<div class="widget-content">
<div class="overflowable-container overflowable-3">
<div class="overflowable-contents">
<div class="container">
<ul class="tabs">
<li class="overflowable-item" aria-hidden="false">
<a href="#">Главная страница</a>
</li>
<li class="overflowable-item" aria-hidden="false">
<a href="#">Новости</a>
</li>
<li class="overflowable-item" aria-hidden="false">
<a href="#">Скачать игры Torrent</a>
</li>
<div class="dropdown">
<li class="dropbtn"><a href="#"> Dropdown <i aria-hidden="true" class="fa fa-caret-down"></i></a>
</li>
<div class="dropdown-content">
<a href="#">Спорт</a>
<a href="#">Кино</a>
<a href="#">Бизнес</a>
<a href="#">Техника</a>
<a href="#">Музыка</a>
<a href="#">Мир</a>
<a href="#">Здоровье</a>
</div>
</div>
</ul>
</div>


</div>
</div></div></div></div>

Сохраните виджет. Теперь перейдите в раздел Тема - Изменить HTML добавьте после тега ]]></b:skin> CSS код:

CSS<style>
.tabs-inner {padding: 0;}
.overflowable-container, #page_list_top .widget.PageList .overflowable-contents, .blog-name, .top-nav .PageList, .centered-top-secondline .PageList ul{overflow:visible;}  
.tabs-outer{overflow:visible;}
.tabs .widget ul, .tabs .widget ul{overflow:visible;}  
.dropdown a:hover {text-decoration:none;}  
.dropbtn a{color:#!important}
.dropbtn { border: none; position: relative; color: #cccccc; background: #3330; padding: 0px; float: none!important;} .dropdown { position: relative; cursor: pointer; display:inline-block; margin-right:0px;} .dropdown-content { display: none; position: absolute; min-width: 160px; z-index: 9; margin-top: 0px;} .dropdown-content a { color: #fff!important; padding: 12px 16px; text-decoration: none; display: block; margin-left: 0px; background: #11111175; position: relative; float: left; width: 100%; text-align: left; } .dropdown-content a:hover {background: #!important; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -webkit-transition: all 0.6s ease-out;} .dropdown:hover .dropdown-content { display: block; } .dropdown-content a:before {content:&quot;&quot;;position:absolute;width:0;left:0;right:0;margin:auto; bottom:5px;height:3px;background:#fff;opacity:0;visibility:hidden;transition: all 0.8s ease-in-out;} .dropdown-content a:hover:before {opacity:1;visibility:visible;width:90%;}
@media(max-width:700px) {.overflowable-container{display: inline-block;}}
</style>

Сохраните изменения.
Если используете тему Soho тогда добавьте к CSS еще один кусок:

CSSli.dropbtn:before { color: rgba(0, 0, 0, 0.54); content: '\00b7'; }

Видео инструкция:

Главное меню с якорными ссылками

Пример того, как сделать простое меню по средствам HTML и CSS с якорными ссылками, а так же плавной прокруткой страницы сайта:

Mark Korvin февраля 29, 2024 Коммент.

Mark Korvin

Как в Blogger Сделать Меню

Blogger: Выпадающее меню с адаптивным дизайном

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

Blogger: Как настроить Главное Меню

Стандартное выпадающее меню

Главное меню с якорными ссылками

Инструменты, которые я использую для продвижения своих сайтов, соц сетей и Youtube

Рекомендуемые публикации

Видео

Последние публикации

Архив блога

Вопросы, Ответы, Отзывы

Как в Blogger Сделать Меню

Blogger: Выпадающее меню с адаптивным дизайном

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

Blogger: Как настроить Главное Меню

Стандартное выпадающее меню

Главное меню с якорными ссылками

Поделиться в социальных сетях:

Рекомендуем

Инструменты, которые я использую для продвижения своих сайтов, соц сетей и Youtube

Рекомендуемые публикации

Видео

Последние публикации

Архив блога

Вопросы, Ответы, Отзывы