Створення меню

Горизонтальне меню з випадаючими вкладками для blogger

Доброго дня читачі, друзі та гості. Вирішила поділитися з вами, своїм досвідом по створенню меню. У статті Горизонтальне меню з випадаючими вкладками для blogger інформація про фіксований меню, яке при прокручуванні сторінки завжди зверху.Таке меню ідеально підходить для блогів вчителів, у них завжди багато інформації. Сподіваюсь, що мій досвід стане Вам у нагоді.

Отже приступимо

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

Cross-Column 2

<style>#sbtop-wrapper{background:#000;width:100%;float:left;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:10px double #DAA520;border-top:10px double #DAA520;border-radius:12px;}#sbtop a{display:block;text-decoration:none;font:normal 12px Georgia;text-color: #FA8072; padding:7px 10px 7px}#sbtop li ul,#sbtop ul li{width:300px;}#sbtop ul li a{text-align:left;color:#333333;font-size:16px;font-weight:400;text-transform:none;font-family:Georgia;border:none;padding:5px 10px}#sbtop li ul{z-index:100;position:absolute;display:none;background: #F4A460;border:2px dotted #A52A2A;padding-bottom:10px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}#sbtop li:hover a,#sbtop a:active,#sbtop a:focus,#sbtop li.hvr a{background-color: #eee;color:#A52A2A;}#sbtop li:hover ul,#sbtop li.hvr ul{display:block}#sbtop li:hover ul a,#sbtop li.hvr ul a{color:#A52A2A;background-color:transparent;text-decoration:none}#sbtop li ul li.hr{border-bottom:0px solid #000;border-top:0px solid #A52A2A;display:block;font-size:1px;height:0;line-height:0;margin:100px 0}#sbtop ul a:hover{background-color:#A52A2A;color:#eee!important;text-decoration:none}#sbtop a span,#sbtop a.arrow span{font:bold 14px Georgia;color:#A52A2A;display:block;line-height:16px;text-transform:uppercase;}#sbtop li:hover a span,#sbtop li:hover a.arrow span{color: #0e5198;}</style>

<div id="sbtop-wrapper"><div id="sbtopbar"><ul id="sbtop">
<li><a href="http://ozolynsh.blogspot.com/p/blog-page_87.html" style="height:16px;line-height:16px;"><span>ГОЛОВНА СТОРІНКА</span></a></li>
<li class="topmenu"><a href="#" style="height:16px;line-height:16px;"><span>Для учнів</span></a>
<ul>
<li class="subfirst"><a href="http://ozolynsh.blogspot.com/search/label/%D0%9A%D1%83%D1%80%D1%81%20code">Курс CODE</a></li>
<li class="sublast"><a href="http://ozolynsh.blogspot.com/p/blog-page_26.html">Інтерактивні тренінги</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:16px;line-height:16px;"><span>Для батьків</span></a>
<ul>
<li class="subfirst"><a href="http://ozolynsh.blogspot.com/p/blog-page_29.html">Поради батькам</a></li>
<li><a href="http://ozolynsh.blogspot.com/p/blog-page_99.html">Пам’ятка для батьків</a></li>
<li class="sublast"><a href="http://ozolynsh.blogspot.com/p/blog-page_41.html">Безпека в Інтернеті</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:16px;line-height:16px;"><span>Для вчителів</span></a>
<ul>
<li class="subfirst"><a href="http://ozolynsh.blogspot.com/search/label/%D0%9C%D0%BE%D0%B2%D0%B0%20Python">Мова Python</a></li>
<li><a href="http://ozolynsh.blogspot.com/p/blog-page_26.html">Інтерактивні вправи</a></li>
<li class="sublast"><a href="#">Презентації до уроків</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:16px;line-height:16px;"><span>Підручники</span></a>
<ul>
<li class="subfirst"><a href="http://ozolynsh.blogspot.com/p/2.html">2 клас</a></li>
<li><a href="http://ozolynsh.blogspot.com/p/blog-page_79.html">3 клас</a></li>
<li><a href="#">4 клас</a></li>
<li><a href="#">5 клас</a></li>
<li><a href="#">6 клас</a></li>
<li><a href="#">7 клас</a></li>
<li><a href="#">8 клас</a></li>
<li><a href="#">9 клас</a></li>
<li><a href="#">10 клас</a></li>
<li class="sublast"><a href="#">11 клас</a></li>
</ul></li>
<li class="topmenu"><a href="http://ozolynsh.blogspot.com/p/blog-page_72.html" style="height:16px;line-height:16px;"><span>Навчальні 
додатки</span></a></li>
</ul></div><div style="clear:both;"></div></div>

Копіюємо код  ⇑⇑⇑

А от з оформленням під дизайн своїх блогів доведеться витратити час і старанно попрацювати. Не у всіх шаблонах blogger меню буде коректно відображатися. Зокрема стосується шаблону "Корпорація Чудеса". У цьому шаблоні вкладки не працюють. Також не підійде для сторонніх шаблонів. 

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

Для того щоб відображались усі наші вкладочки треба виконати наступне

Після чого йдемо в "Шаблон" → "Змінити HTML" натискаємо CTRL+F і вписуємо у поле для пошуку словосполучення Cross-Column 2:
ви знайдете наступний рядок

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column 2' showaddelement='no'/>
вам необхідно змінити його на

<b:section class='menu' id='menu_1' name='Cross-Column' showaddelement='yes'/>

Після цього все буде працювати

Налаштувння мені допомогла зробити стаття http://sasha753357.blogspot.com/2015/07/blog-post_17.html