Konsep Basit Ajax Menü Oluşturma - Blogunuzda biraz değişiklik yapmak istiyorsanız özellikle de moda bloglarında farklı bir menü oluşturmak zor gibi gözükse de sizlerle paylaşmış olduğum menü sayesinde blogunuzun ihtiyaç olan Ajax Drop Down olarak da bilinen Konsep Basit Ajax Menü blogunuza uygulayabilirsizin. Blogger blogları için açılır resimli menü yapmak isteyenler için yeni nesil blogger eklentilerine bir yenisini daha eklemiş oluyoruz.
Blogger Ajax Menü Nasıl Oluşturulur?
Blogger blogunuza açılır resimli menüyü eklemek için aşağıdaki seçenekleri uygulamalısınız.
1. Blogger blogunuzun kumanda paneline giderek eklemek istediğiniz blogun Şablon > HTML'i Düzenle diyoruz ve CTRL+F yardımıyla </head> kodunu buluyoruz. Aşağıdaki kodları </head> kodunun bir satır üzerine ekleyin.
<style type="text/css">
.mega-menu *{padding:0;margin:0}
ul.mega-menu{line-height:1;list-style:none;overflow:visible!important}
ul.mega-menu:after{padding:0;margin:0;content:' ';height:0;display:block;clear:both}
ul.mega-menu li{float:left;font-size:14px;font-weight:400;display:inline;position:relative;text-transform:capitalize}
ul.mega-menu li a{line-height:50px;padding:0 20px;display:block;font-family:'Oswald';text-decoration:none;color:#2c2c2c;font-size:13px;font-weight:400;transition:all 0.3s ease-in-out}
ul.mega-menu li a:hover,ul.mega-menu li a.hoverover{color:#fff;background:#f54325}
ul.mega-menu ul{top:100%;border:1px solid #ddd;position:absolute;display:none}
ul.mega-menu li:hover > ul{display:block}
ul.mega-menu ul li{background:#f6f6f6;text-shadow:none;z-index:72;float:none;min-width:160px}
ul.mega-menu ul li a{color:#aaa;font-family:'Arial';text-transform:none;font-weight:normal}
ul.mega-menu ul li a:hover,ul.mega-ajax-menu ul li a.hover{background:#f54224}
ul.mega-menu ul ul{left:100%;display:none;top:0}
ul.mega-ajax-menu li div.submenu{z-index:90;left:0;position:absolute;width:600px;top:100%;overflow:hidden;opacity:0;color:#919191;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);min-height:150px;background:#f0f0f0;-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;transition:all 0.3s ease-in-out}
ul.mega-ajax-menu li:hover div.submenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
ul.mega-ajax-menu ul,ul.mega-ajax-menu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}
ul.mega-ajax-menu ul li{background:none!important;float:none!important}
ul.mega-ajax-menu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#212121}
ul.mega-ajax-menu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px 0!important;background:none}
ul.mega-ajax-menu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px!important}
ul.mega-ajax-menu ul.postslist li .imgCont{position:absolute;left:0;top:15px;width:100px;height:70px;overflow:hidden;font-size:0;line-height:0;border:1px solid #929292}
ul.mega-ajax-menu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}
ul.mega-ajax-menu ul.postslist li a{display:block;line-height:1.4;padding:0!important;color:#666;font-family:'Arial';font-size:12px;transition:all 0.3s ease-in-out}
ul.mega-ajax-menu ul.postslist li a:hover{color:#f54325;background:transparent}
ul.mega-ajax-menu .loader{background:url('https://3.bp.blogspot.com/-MFTqwoh16jc/WYQ7hW0yaqI/AAAAAAAABik/J6RGHSsGTvgFzHiM4IjpDGgXCLn5gv6TwCLcBGAs/s1600/beloading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}
ul.mega-ajax-menu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #fff;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}
#mega-ajax-menu{background:#fff;height:50px;width:100%;position:relative;border:1px solid #e6e6e6;max-width:980px;margin:0 auto;padding:0 20px}
li.search-form{float:right!important;line-height:50px;margin:0 20px 0 0}
li.search-form .searchbox{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}
li.search-form .searchbox:focus{border:none;outline:none;background:#fafafa;color:#666}
li.search-form .searchsubmit{background:#f54325;border:none;color:#fff;cursor:pointer;padding:10px 5px;transition:all 0.3s ease-in-out}
li.search-form .searchsubmit:hover{opacity:0.9}
.search-alert{color:#f9f9f9;display:none;margin:5px;padding:2px 15px 2px 40px;background:#333 url(https://3.bp.blogspot.com/-2ornN_QTUuI/WYQ7cH-rRrI/AAAAAAAABig/qluuGruce3k4PtA_rh53Cop_GKC6pYIQQCLcBGAs/s1600/not.png) no-repeat;background-position:10px;text-transform:lowercase;border-radius:5px}
</style>2. Yine CTRL+F yardımıyla </body> kodunu buluyoruz. Aşağıdaki kodları </body> kodunun bir satır üzerine ekleyin.
<script src='https://rawgit.com/jquerycods/jquery/master/mega-menu.js'></script>
<script>jQuery(document).ready(function($) {
$('#mega-ajax-menu').ajaxBloggerMenu({
numPosts : 4,
defaultImg : '//1.bp.blogspot.com/-1YNOb7ACLIk/WYRP-d6azII/AAAAAAAABjQ/k82iO2Nnj0sE0x2-lWRzRk-yIM3sdvdbgCLcBGAs/s1600/nothumb.png'});});
$(function(){
$('.searchblog').submit(function(e){
if($('.search-form .searchbox').val().length==0){
$('.search-form .search-alert').fadeIn().css('display','inline-block');
e.preventDefault();}});});
</script>3. Aşağıdaki HTML kodu yani Ajax Menüyü nerede görmek istiyorsanız oraya ekleyebilirsiniz. Mesela Header yada Header1 altına ekleyebilirsiniz. Aşağıdaki kodda mavi renkli alanı kendinize göre düzenleyin yani mevcut URL ve kategori isimleri kendinize göre düzenleyin.
<ul id="mega-ajax-menu" class="mega-menu">
<li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li><a href="#">Kategori 1</a>
<ul>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
</ul>
</li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
<li><a href="#">Etiket</a></li>
</ul>
</li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbox' name='q' placeholder='Aranacak kelime' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Ara'/>
</form>
<p class='search-alert'>Arama formu boş!
</li>
</ul>Sonuç: Konsep Basit Ajax Menümüzü Oluşturmuş olduk. Eğer yapamayan arkadaşlar olursa iletişim yada yorum kısmından bize ulaştığınız takdirde sizlere yardımcı olmaya çalışırız.
Yorum Gönder