Menu główne pełni prawdopodobnie najważniejszą rolę, jaką jest kierowanie użytkowników do niezbędnych stron bloga.
Dzięki temu elementowi możesz znacznie ułatwić użytkownikom dostęp do swoich postów. To jest to, na co wyszukiwarki przede wszystkim zwracają uwagę podczas oceny zasobów. Nikt nie lubi stron o skomplikowanej i niezrozumiałej strukturze.
Jak zainstalować menu główne na swoim blogu
Głównym problemem jest to, że różne motywy Bloggera mają różne znaczniki HTML, więc dość trudno jest znaleźć jedną działającą opcję dla wszystkich motywów. Jednak pomimo tego udało mi się znaleźć właściwą opcję.
Głównymi właściwościami tego menu jest to, że jest ono responsywne, tzn. dostosowuje się do urządzeń mobilnych, a także ma możliwość konfigurowania dodatkowych (rozwijanych) przycisków.
Skorzystaj z instrukcji HTML i wideo, aby prawidłowo zainstalować menu na swoim blogu:
- W panelu sterowania przejdź do sekcji Motyw - Edytuj kod HTML.
- Naciśnij CTRL+F na klawiaturze.
- W wyświetlonym polu wyszukiwania wpisz </body> więc naciśnij Enter.
- Dodaj kod przed tagiem </body>:
<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'>☌</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 > li > ul.sub_menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu > ul > 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 > a { background: #25a186; color: #fff; } .menu ul li > a { padding: 15px; } .menu ul ul { display: none; position: absolute; top: 100%; min-width: 160px; background: #39484d; } .menu ul li:hover > ul { display: block; } .menu ul ul > li { position: relative; } .menu ul ul > li a { padding: 10px 15px; height: auto; background: #39484d; } .menu ul ul > 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 > .horizontal { opacity: 0; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px; } .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .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: "\2630"; font-weight: normal; } a.menu-link.active:after { content: "\2715"; } .menu { clear: both; min-width: inherit; float: none; } .menu, .menu > ul ul { overflow: hidden; max-height: 0; background-color: #39484d; } .menu > li > ul.sub-menu { padding: 0px; border: none; } .menu.active, .menu > ul ul.active { max-height: 55em; } .menu ul { display: inline; } .menu li, .menu > ul > li { display: block; } .menu > ul > li:last-of-type a { border: none; } .menu li a { color: #fff; display: block; padding: 0.8em; position: relative; } .menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em; } .menu li.has-submenu > a.active:after { content: "-"; } .menu ul ul > li a { background-color: #39484d; padding: 10px 18px 10px 30px; } .menu ul li a:hover { background: #4b5f65; color: #fff; } .menu ul li.hover > 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'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Na razie to wszystko, jeśli masz jakieś pytania, zadaj je w komentarzach