Blogger Mobil Uyumlu Top Menü Navigasyonu

Bu yazımızda blog sitelerinde mobil uyumlu navigasyon nasıl yapılır? Mobil uyumlu navigasyon menüsü ipuçlarını ve örnek kodlarını paylaşıyoruz. Bu diğer navigasyon menülerinden biraz farklı olacak.

Menü göstergeleri ve menü gizleme sistemine işlerlik kazandırmak için biraz farklılıklar oluşturuldu, blog sayfalarında bu navigasyonu kullanırken aşağı-yukarı yani kaydırma sistemi mause imlecinin komutuyla çalışacak. Bu navigasyonun diğer bir özelliği de bir blog için çok hafif olması yani blogunuzu hiç bir zaman yavaşlatmaz, özellikle sade bir blog teması kullananlar için basit şekilde oluşturulan menüler daha da işler hale gelebilir.

Blog Mobil Uyumlu Navigasyon Nasıl Oluşturulur?

1. Blogger hesabınıza giriş yapın ve eklemek istediğiniz blogu seçin. Seçmiş olduğunuz blogun kumanda (arayüz) panelinden Şablon > HTML'i Düzenle > CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

nav {width: 100%;}
.nav_wrapper {position: fixed;left: 0;top: 0;width: 100%;transition: top .5s ease-out;background: #2f3b3f;}
.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: #efa666;}
.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: #efa666;}
.topmenu-link {display: none;}
.spinner-master input[type=checkbox] {display: none;}
.topmenu {width: 100%;height: auto;background: #2f3b3f;transition: all 0.3s ease;}
.topmenu ul {padding: 0px;margin: 0px;list-style: none;position: relative;display: inline-block;}
.topmenu > li > ul.sub_topmenu {min-width: 10em;padding: 4px 0;background-color: #f4f4f4;border: 1px solid #fff;}
.topmenu ul li {padding: 0px;}
.topmenu > ul > li {display: inline-block;}
.topmenu ul li a {display: block;text-decoration: none;color: #fff;font-size: 14px;}
.topmenu ul li a:hover {background: #efa666;color: #fff;}
.topmenu ul li.hover > a {background: #efa666;color: #fff;}
.topmenu ul li > a {padding: 15px;}
.topmenu ul ul {display: none;position: absolute;top: 100%;min-width: 160px;background: #39484d;}
.topmenu ul li:hover > ul {display: block;}
.topmenu ul ul > li {position: relative;}
.topmenu ul ul > li a {padding: 10px 15px;height: auto;background: #39484d;}
.topmenu ul ul > li a:hover {background: #efa666;color: #fff;}
.topmenu 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.topmenu-link {display: block;color: #fff;float: left;text-decoration: none;padding: 10px 16px;font-size: 1.5em;}
a.topmenu-link:hover {color: #efa666;}
a.topmenu-link:after {content: "\2630";font-weight: normal;}
a.topmenu-link.active:after {content: "\2715";}
.topmenu {clear: both;min-width: inherit;float: none;}
.topmenu, .topmenu > ul ul {overflow: hidden;max-height: 0;background-color: #39484d;}
.topmenu > li > ul.sub-topmenu {padding: 0px;border: none;}
.topmenu.active, .topmenu > ul ul.active {max-height: 55em;}
.topmenu ul {display: inline;}
.topmenu li, .topmenu > ul > li {display: block;}
.topmenu > ul > li:last-of-type a {border: none;}
.topmenu li a {color: #fff;display: block;padding: 0.8em;position: relative;}
.topmenu li.has-subtopmenu > a:after {content: '+';position: absolute;top: 0;right: 0;display: block;font-size: 1.5em;padding: 0.55em 0.5em;}
.topmenu li.has-subtopmenu > a.active:after {content: "-";}
.topmenu ul ul > li a {background-color: #39484d;padding: 10px 18px 10px 30px;}
.topmenu ul li a:hover {background: #4b5f65;color: #fff;}
.topmenu ul li.hover > a {background: #4b5f65;color: #fff;}
.topmenu ul ul, .topmenu 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%;};}

2. Aşağıdaki HTML kodları <body> kodunun altında görünmesini istediğiniz yere ekleyebilirsiniz. <body> yada </header> kodlarından sonra olabilir.

<div class="nav_wrapper">
<!--<a class="topmenu-Kategori" href="#topmenu"></a>-->
<div class="spinner-master">
<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>
<a href="#search_box" class="btn" id="search">&#9740;</a>
<nav id="topmenu" class="topmenu">
<ul class="dropdown">
<li ><a href="#" title="Kategori">Anasayfa</a>
<ul >
<li ><a href="#" title="Kategori">Kategori » </a>
<ul >
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
</ul>
</li>
<li ><a href="#" title="Kategori">Hakkımda</a></li>
<li ><a href="#" title="Kategori">Kategori » </a>
<ul >
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori </a></li>
</ul>
</li>
</ul>
</li>
<li ><a href="#" title="Kategori">Kategori</a>
<ul >
<li ><a href="#" title="Kategori ">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
</ul>
</li>
<li ><a href="#" title="Kategori">Portföy</a>
<ul >
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
</ul>
</li>
<li ><a href="#" title="Kategori">İş</a>
<ul >
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title=" Kategori"> Kategori</a></li>
</ul>
</li>
<li ><a href="#" title="Kategori">Oyunlar</a>
<ul >
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
<li ><a href="#" title="Kategori">Kategori</a></li>
</ul>
</li>
<li ><a href="#" title="Kategori">Arşiv</a></li>
</ul>
</nav>
<form class="search_box" id="search_box" action="/search/">
<input name="search_criteria" placeholder="Arama yap" value="" type="text">
<input class="search_icon" value="ARA" type="submit">
</form>
</div>

HTML kod içerisinde yer alan kategori büton yazılarını kendi blogunuza göre düzenleyin. Düzenlemiş olduğunuz bütonlara link vermek için blogunuzda bulanan linkleri hashtag # ile gösterilen renkli alanlara ekleyin.

3. Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.

<script src="https://googledrive.com/host/0BwDz8flINeefaUs4LWxZUUZnTlU" type="text/javascript"></script>

DEMO launch