Головна x Blogger

Як Додати в Блог на Blogger Головне Меню

Mark K. | Публікацію оновлено: 2024-09-21T13:10:07Z
Блоггер головне меню

Головне меню виконує чи не найважливішу роль, яка заключається в тому, щоб спрямовувати користувачів на потрібні сторінки вашого блогу. 

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

Як встановити в блог Головне Меню

Основна проблема заключається в тому, що різні Теми Blogger відповідно мають різну HTML розмітку, тому досить складно знайти один робочий варінт для всіх Тем. Однак не зважаючи на це мені вдалося знайти потрібний варінт. 

Основні властивості цього меню заключаються в тому, що воно є адаптивним, тобто підлаштовується під мобільні пристрої, та має змогу налаштовувати додаткові (випадаючі) кнопки.

Для того, щоб правильно встановити меню в свій блог використовуйте HTML та відео інструкцію:
<div class='nav_wrapper'>
<!--<a class="menu-link" href="#menu"></a>-->
  
 <div class='spinner-master'>
  <input id='spinner-form' type='checkbox'/>
  <label class='spinner-spin' for='spinner-form'>
    <div class='spinner diagonal part-1'/>
    <div class='spinner horizontal'/>
    <div class='spinner diagonal part-2'/>
  </label>
</div>
  
<a class='btn' href='#search_box' id='search'>&#9740;</a>
<nav class='menu' id='menu'>
 <ul class='dropdown'>
  <li><a href='#Link' title='Link'>Home</a></li>
  <li><a href='#Link' title='Link'>Category</a>
  <ul>
   <li><a href='#Link' title='Link '>Link</a></li>
   <li><a href='#Link' title='Link'>Link</a></li>
  </ul>
  </li>
  <li><a href='#Link' title='Link'>Portfolio</a>
   <ul>
    <li><a href='#Link' title='Link'>Link</a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#Link' title='Link'>Work</a>
  <ul>
   <li><a href='#Link' title='Link'>Link</a></li>
   <li><a href='#Link' title='Link'>Link</a></li>
   <li><a href='#Link' title='Link'>Link</a></li>
   <li><a href='#Link' title=' Link'> Link</a></li>
  </ul>
  </li>
  <li><a href='#Link' title='Link'>Playground</a>
   <ul>
    <li><a href='#Link' title='Link'>Link  </a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
    <li><a href='#Link' title='Link'>Link</a></li>
   </ul>
  </li>
  <li><a href='#Link' title='Link'>Sitemap</a></li>
 </ul>
 </nav>
<form action='/search/' class='search_box' id='search_box'>
  <input name='search_criteria' placeholder='Поиск' type='text' value=''/>
  <input class='search_icon' type='submit' value='Поиск'/>
</form>
</div>

<style>
.centered-top-container.sticky {position: absolute;}
.centered-top-container {top: 20px;
    position: relative;}
nav { width: 100%; } .nav_wrapper { position: fixed; left: 0; top: 0; width: 100%; transition: top .5s ease-out; background: #2f3b3f;z-index:9999999 } .scroll { top: -90px; } .no-scroll { top: 0; z-index: 9999; } .btn { padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease; } .btn:hover { transition: all 0.1s ease; } #search { float: right; font-size: 30px; padding: 2px 15px; line-height: 40px; color: #fff; margin: 0; font-weight: 700; -webkit-transform: rotate(181deg); -moz-transform: rotate(181deg); -ms-transform: rotate(181deg); -o-transform: rotate(181deg); transform: rotate(181deg); } #search:hover { color: #25a186; } .search_box { clear: both; width: 100%; background: #e8ebf0; padding: 0; margin: 0; height: 0; overflow: hidden; transition: all 0.1s ease-in-out; } .search_box.active { height: auto; padding: 15px 0; } .search_box input { width: 80%; font-size: 13px; margin: 0 0 0 15px; padding: 10px; border: none; background: #fff; } .search_box input:focus { outline: none; } .search_box input.search_icon { clear: both; width: 10%; height: auto; padding: 10px; margin: 0; margin-left: -5px; border: none; color: #fff; cursor: pointer; background: #8c949d; opacity: 1; transition: all 0.1s ease; } .search_box input.search_icon:hover { background: #25a186; } .menu-link { display: none; } .spinner-master input[type=checkbox] { display: none; } .menu { width: 100%; height: auto; background: #2f3b3f; transition: all 0.3s ease; } .menu ul { padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; } .menu &gt; li &gt; ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu &gt; ul &gt; li { display: inline-block; } .menu ul li a { display: block; text-decoration: none; color: #fff; font-size: 14px; } .menu ul li a:hover { background: #25a186; color: #fff; } .menu ul li.hover &gt; a { background: #25a186; color: #fff; } .menu ul li &gt; a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover &gt; ul { display: block; } .menu ul ul &gt; li { position: relative; } .menu ul ul &gt; li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul &gt; li a:hover { background: #25a186; color: #fff; } .menu ul ul ul { position: absolute; left: 100%; top: 0; } @media all and (max-width: 768px) { .example-header .container { width: 100%; } #search { padding: 10px; } .spinner-master * { transition: all 0.3s; box-sizing: border-box; } .spinner-master { position: relative; margin: 15px; height: 30px; width: 30px; float: left; } .spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0; } .spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #fff; } .spinner-master .diagonal.part-1 { position: relative; float: left; } .spinner-master .horizontal { position: relative; float: left; margin-top: 4px; } .spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin &gt; .diagonal.part-2 { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px; } a.menu-link { display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em; } a.menu-link:hover { color: #25a186; } a.menu-link:after { content: &quot;\2630&quot;; font-weight: normal; } a.menu-link.active:after { content: &quot;\2715&quot;; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu &gt; ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu &gt; li &gt; ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu &gt; ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu &gt; ul &gt; li { display: block; } .menu &gt; ul &gt; li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu &gt; a:after { content: &#39;+&#39;; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu &gt; a.active:after { content: &quot;-&quot;; } .menu ul ul &gt; li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover &gt; a { background: #4b5f65; color: #fff; } .menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top: auto; border: none; } .search_box { position: absolute; top: 60px; left: 0; z-index: 10; } .search_box input { width: 70%; } .search_box input.search_icon { width: 17%; }; }
</style>
<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;,&quot;fixed&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})})
</script>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Відео інструкція встановлення адаптивного меню:


Як активувати стандартне меню 

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

Поділитися: