Membuat Simple Ajax Menu Responsive

Kali ini Sudar Code share lagi tutorial Membuat Simple Ajax Menu yang mungkin pernah kamu lihat pada beberapa website. 

• Result

Ini hanya konsep sederhana yang belum saya sempurnakan, namun bisa menjadi bahan inspirasi bagi anda yang ingin mengembangkannya.

Elemen yang diterapkan pada menu

<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">Category 1</a>
<ul>
<li><a href="https://lycoris9.blogspot.com/search/label/Animation">Animation</a></li>
<li><a href="https://lycoris9.blogspot.com/search/label/Nature">Nature</a></li>
<li><a href="https://lycoris9.blogspot.com/search/label/People">People</a></li>
<li><a href="https://lycoris9.blogspot.com/search/label/Technology">Technology</a></li>
<li><a href="https://lycoris9.blogspot.com/search/label/Vogue">Vogue</a></li>
</ul>
</li>
<li>
<a href="#">Category 2</a>
<ul>
<li><a href="https://minima9.blogspot.com/search/label/Artikel">Artikel</a></li>
<li><a href="https://minima9.blogspot.com/search/label/Humor">Humor</a></li>
<li><a href="https://minima9.blogspot.com/search/label/Kesehatan">Kesehatan</a></li>
<li><a href="https://minima9.blogspot.com/search/label/Music">Music</a></li>
<li><a href="https://minima9.blogspot.com/search/label/Personal">Personal</a></li>
</ul>
</li>
<li>
<a href="#">Category 3</a>
<ul>
<li><a href="https://gvusion.blogspot.com/search/label/Artikel%20Umum">Artikel Umum</a></li>
<li><a href="https://gvusion.blogspot.com/search/label/Music">Music</a></li>
<li><a href="https://gvusion.blogspot.com/search/label/Technology">Technology</a></li>
<li><a href="https://gvusion.blogspot.com/search/label/Video">Video</a></li>
<li><a href="https://gvusion.blogspot.com/search/label/Webmaster">Webmaster</a></li>
</ul>
</li>
<li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!
</li>    
</ul>
<div class='clear'/>    
</ul>
<div class='clear'/>

.admenus *{margin:0;padding:0}
ul.admenus{list-style:none;line-height:1;overflow:visible!important}
ul.admenus:after{margin:0;padding:0;content:' ';display:block;height:0;clear:both}
ul.admenus li{float:left;display:inline;position:relative;font-size:14px;font-weight:400;text-transform:uppercase}
ul.admenus li a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#2c2c2c;font-family:'Oswald';font-size:13px;font-weight:400;transition:all 0.3s ease-in-out}
ul.admenus li a:hover,ul.admenus li a.hoverover{background:#f54325;color:#fff}
ul.admenus ul{position:absolute;display:none;top:100%;border:1px solid #ccc}
ul.admenus li:hover >ul{display:block}
ul.admenus ul li{z-index:72;float:none;min-width:160px;background:#f5f5f5;text-shadow:none}
ul.admenus ul li a{text-transform:none;font-weight:normal;color:#aaa;font-family:'Arial'}
ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover{background:#f54325}
ul.admenus ul ul{display:none;left:100%;top:0}
ul.adajaxmenu li div.submenu{position:absolute;width:600px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;background:#f0f0f0;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#929292;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}
ul.adajaxmenu 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.adajaxmenu ul,ul.adajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}
ul.adajaxmenu ul li{background:none!important;float:none!important}
ul.adajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#202020}
ul.adajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px 0!important;background:none}
ul.adajaxmenu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px!important}
ul.adajaxmenu 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.adajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}
ul.adajaxmenu 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.adajaxmenu ul.postslist li a:hover{color:#f54325;background:transparent}
ul.adajaxmenu .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwCbdqqVz5PBs43uKDXUg0jL1WCF3ukmKnnE3IvaDs2yvKcjPerU2mcehHxuHhy3XhyphenhyphenNKOnZ-gNRnV-Vhz4gGv8nHDQIgUwBybuZhIDo3bXQXPFMQ0NOV-_12Z1xUVBM2Wf4Wf1636DGo8/s1600/adloading.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}
ul.adajaxmenu .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}
#adajaxmenu{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 .searchbar{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}
li.search-form .searchbar: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;padding:2px 15px 2px 40px;display:none;margin:5px;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJk3BbMrvB0FSzvMp7MYZbtNU3c2qMztUYRb3TiDqtTsyRVakihtbP2MEJreSz-4Pn19PvLHPfDKvH8H70XplCV320H9I-LgVzCa_AsJrz4Fkp_tmvE82M_vhe1CxPlzgw9RAlAYbg81X/s1600/Indicate.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}

jQuery(document).ready(function($) {
 $('#adajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'https://url-to-image.com/default-image.jpeg' // Default thumbnail Image
 });
});

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});

Script eksternal

https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/ajaxmen.js