Konsep Simple Ajax Menu - Arlina Design
Konsep Simple Ajax Menu

Konsep Simple Ajax Menu - Ok kali ini saya akan memberikan gambaran dari simple ajax menu yang baru saja saya buat dan mungkin sudah pernah anda lihat di beberapa website yang menerapkan menu seperti pada demo di bawah ini.


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="http://lycoris9.blogspot.com/search/label/Animation">Animation</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/Nature">Nature</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/People">People</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/Technology">Technology</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/Vogue">Vogue</a></li>
</ul>
</li>
<li>
<a href="#">Category 2</a>
<ul>
<li><a href="http://minima9.blogspot.com/search/label/Artikel">Artikel</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Humor">Humor</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Kesehatan">Kesehatan</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Music">Music</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Personal">Personal</a></li>
</ul>
</li>
<li>
<a href="#">Category 3</a>
<ul>
<li><a href="http://gvusion.blogspot.com/search/label/Artikel%20Umum">Artikel Umum</a></li>
<li><a href="http://gvusion.blogspot.com/search/label/Music">Music</a></li>
<li><a href="http://gvusion.blogspot.com/search/label/Technology">Technology</a></li>
<li><a href="http://gvusion.blogspot.com/search/label/Video">Video</a></li>
<li><a href="http://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: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('http://4.bp.blogspot.com/-sRHd2OR7omQ/VFBOax0jdNI/AAAAAAAABgg/ei6bgO1agM0/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(http://4.bp.blogspot.com/-Pzf65SZdXYo/VFHy3_xVhmI/AAAAAAAABg4/W2QdE2000f4/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 : '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 eksternal

https://cdn.rawgit.com/Arlina-Design/redvision/master/javmenu.js

Source : http://www.arlinadzgn.com/2014/10/konsep-simple-ajax-menu.html

Konsep Simple Ajax Menu

Konsep Simple Ajax Menu

Konsep Simple Ajax Menu - Ok kali ini saya akan memberikan gambaran dari simple ajax menu yang baru saja saya buat dan mungkin sudah pernah anda lihat di beberapa website yang menerapkan menu seperti pada demo di bawah ini.


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="http://lycoris9.blogspot.com/search/label/Animation">Animation</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/Nature">Nature</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/People">People</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/Technology">Technology</a></li>
<li><a href="http://lycoris9.blogspot.com/search/label/Vogue">Vogue</a></li>
</ul>
</li>
<li>
<a href="#">Category 2</a>
<ul>
<li><a href="http://minima9.blogspot.com/search/label/Artikel">Artikel</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Humor">Humor</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Kesehatan">Kesehatan</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Music">Music</a></li>
<li><a href="http://minima9.blogspot.com/search/label/Personal">Personal</a></li>
</ul>
</li>
<li>
<a href="#">Category 3</a>
<ul>
<li><a href="http://gvusion.blogspot.com/search/label/Artikel%20Umum">Artikel Umum</a></li>
<li><a href="http://gvusion.blogspot.com/search/label/Music">Music</a></li>
<li><a href="http://gvusion.blogspot.com/search/label/Technology">Technology</a></li>
<li><a href="http://gvusion.blogspot.com/search/label/Video">Video</a></li>
<li><a href="http://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: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('http://4.bp.blogspot.com/-sRHd2OR7omQ/VFBOax0jdNI/AAAAAAAABgg/ei6bgO1agM0/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(http://4.bp.blogspot.com/-Pzf65SZdXYo/VFHy3_xVhmI/AAAAAAAABg4/W2QdE2000f4/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 : '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 eksternal

https://cdn.rawgit.com/Arlina-Design/redvision/master/javmenu.js

Source : http://www.arlinadzgn.com/2014/10/konsep-simple-ajax-menu.html

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo