Blogger Yatay ve Açılır Duyarlı Menü Eklentisi

Blogger Yatay ve Açılır Duyarlı Menü Eklentisi - Bu yazımızda Blogger yeni temalarına uygun header menü tasarımı hakkında bilgiler paylaşacağım. Muhteşem bir özelliğe sahip olan menü, blogunuzun görüntülenen ekran boyutlarına uyum sağlaması ve hem yatay hem de açılır menü özelliğine sahiptir. Eğer yeni bir tema tasarlamayı düşünüyorsanız, yatay ve açılır duyarlı bir menü özelliğini de tasarımınızda kullanabilirsiniz.

Yatay ve Açılır Duyarlı Menü Eklentisi

Duyarlı menü eklentisini blogunuza eklemek için, Blogger hesabınıza giriş yapın ve blogunuzun yönetici panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun tema editör (kodları) sayfasını açın ve aşağıdaki adımları uygulayın.

1- Blogunuzun tema kodları arasında bulunan </head> kodunu CTRL-F yardımıyla bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
/*<![CDATA[*/
nav#menu-auto{background:#fff;max-width:100%;overflow-x:auto}
nav#menu-auto ul{margin:0;padding:0;list-style:none}
nav#menu-auto ul li{float:left;list-style:none;font:700 12px lato,arial;display:list-item}
nav#menu-auto ul li.more{height:45px;line-height:45px;text-align:center;display:none;float:right}
nav#menu-auto ul li.more ul#overflow.show{display:block}
nav#menu-auto ul li a,nav#menu-auto ul li span,nav#menu-auto ul li.more span.btn-more{display:block;background:#fff;color:#333;text-decoration:none;padding:0 1em;cursor:pointer;transition-duration:.3s;height:45px;line-height:45px}
nav#menu-auto ul li a:hover,nav#menu-auto ul li span:hover{background:#e00;color:#fff}
nav#menu-auto ul li.more #overflow{display:none;position:absolute;text-align:left;transition-duration:.3s;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background-color:#ffffff;z-index:9999}
nav#menu-auto ul li.more #overflow li{float:none}
nav#menu-auto ul li.more #overflow li a{background:#fff;white-space:nowrap;padding:0 15px;height:35px;line-height:35px}
nav#menu-auto ul li.more #overflow li a:hover{background:#e00}
nav#menu-auto ul li.more span.btn-more{background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;height:100%}
/*]]>*/
</style>

2- Aşağıdaki jQuery kodunu tema editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.

<script>
//<![CDATA[
window.onresize=navigationResize;navigationResize();function navigationResize(){$('#nav li.more').before($('#overflow > li'));var $navItemMore=$('#nav > li.more'),$navItems=$('#nav > li:not(.more)'),navItemMoreWidth=navItemWidth=$navItemMore.width(),windowWidth=$(window).width(),navItemMoreLeft,offset,navOverflowWidth;$navItems.each(function(){navItemWidth+=$(this).width();});navItemWidth>windowWidth?$navItemMore.show():$navItemMore.hide();while(navItemWidth>windowWidth){navItemWidth-=$navItems.last().width();$navItems.last().prependTo('#overflow');$navItems.splice(-1,1);}
navItemMoreLeft=$('#nav .more').offset().left;navOverflowWidth=$('#overflow').width();offset=navItemMoreLeft+navItemMoreWidth-navOverflowWidth;$('#overflow').css({'left':offset});}
function showOverflow(){document.getElementById("overflow").classList.toggle("show");}
window.onclick=function(event){if(!event.target.matches('.btn-more')){var dropdowns=document.getElementsByClassName("content-dropdown");var i;for(i=0;i<dropdowns.length;i++){var openDropdown=dropdowns[i];if(openDropdown.classList.contains('show')){openDropdown.classList.remove('show');}}}}
//]]>
</script>

3- Aşağıdaki HTML kodları header içerisine ekleyen.

<nav id="menu-auto">
<ul id="nav">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">Menü 1</a></li>
<li><a href="#">Menü 2</a></li>
<li><a href="#">Menü 3</a></li>
<li><a href="#">Menü 4</a></li>
<li><a href="#">Menü 5</a></li>
<li><a href="#">Menü 6</a></li>
<li><a href="#">Menü 7</a></li>
<li><a href="#">Menü 8</a></li>
<li><a href="#">Menü 9</a></li>
<li><a href="#">Menü 11</a></li>
<li><a href="#">Menü 12</a></li>
<li><a href="#">Menü 13</a></li>
<li><a href="#">Menü 14</a></li>
<li><a href="#">Menü 15</a></li>
<li><a href="#">Menü 16</a></li>
<li><a href="#">Menü 17</a></li>
<li><a href="#">Menü 18</a></li>
<li><a href="#">Menü 19</a></li>
<li><a href="#">Menü 20</a></li>
<li class="more">
<span onclick="showOverflow()" class="btn-more"></span>
<ul id="overflow" class="content-dropdown"></ul>
</li>
</ul>
</nav>

NOT: Her blog temasının farklı bir kodlama yapısı olduğundan dolayı, HTML kodları tam olarak hangi kodlar arasına eklemeniz ile ilgili tam bir bilgi verememekteyiz.

Ön İzleme

Yukarıdaki kodları doğru eklediğinizden emin olarak sayfayı kaydedin.