Simple Ajax Menu concept

Simple Ajax Menu Concept - Ok this time I will give an overview of the simple ajax menu that I just created and maybe you have already seen on some websites that apply the menu as in the demo below.

It's just a simple concept that I haven't refined, but it can be an inspiration for those of you who want to develop it.

Elements applied to the 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="Your link">Animation</a></li>
<li><a href="Your link">Nature</a></li>
<li><a href="Your link">People</a></li>
<li><a href="Your link">Technology</a></li>
<li><a href="Your link">Vogue</a></li>
</ul>
</li>
<li>
<a href="#">Category 2</a>
<ul>
<li><a href="Your link">Article</a></li>
<li><a href="Your link">Humor</a></li>
<li><a href="Your link">Health</a></li>
<li><a href="Your link">Music</a></li>
<li><a href="Your link">Personal</a></li>
</ul>
</li>
<li>
<a href="#">Category 3</a>
<ul>
<li><a href="Your link">General article</a></li>
<li><a href="Your link">Music</a></li>
<li><a href="Your link">Technology</a></li>
<li><a href="Your link">Video</a></li>
<li><a href="Your link">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:0px;
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/AVvXsEhiLNa48eUsgO-lmFdEo6RfGbm_KReCGEEEZMtsqW3LWIecdhhSh-fCpP0KOlBLfJK5z4nRzwR2Qoo0nmEyZIELA4-Hkasf2s7SfHA7G236Oyu7OoZLkmleI5gVK4swP6QaagxYPfe-r2OH/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/AVvXsEjqyLcYGiRM3Y_K5gk6wR6gu8jMIu3txysq8H-UTsTi_I6_U08JSUgV7wqZq1vtqfmcYtPH2B0OElU8jRWXDeYPC1mRbft-1F7Z1a2iK9y0nHwMdDtHFk_IFKPqeUgEKbOLPjm5Kcg6Se1y/s1600/Indicate.png) no-repeat;
background-position:10px;
border-radius:5px;
text-transform:lowercase;
}

<script defer='defer' type='text/javascript'>
jQuery(document).ready(function($) {
 $('#adajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'http://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>

Script eksternal

https://cdn.rawgit.com/wiendhy/Wiendy-wiana/16c8a992/wiendhymenu.js