Konsep Simple Ajax Menu

10/30/2014
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://arlinadesign.blogspot.com/2014/10/konsep-simple-ajax-menu.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

20 comments

ane ambil desain menunya boleh gak nih,, keren soalnya :D

Balas

Wah, lebih mantap lagi seperti menu di Merdeka-com, detik-com, dan lain-lain, jika disentuh dengan mouse di menu tersebut terlihat kategori artikel sesuai menunya. :)

Balas

Nah ini yang tak cari, ternyata namanya ajax menu, saya tahu dulu di theme milik MKR tapi gak tahu namanya, sekalian tanya kalau yang pakai scroll terus halamannya berubah namanya apa ya? pakai query jg kayaknya.

Balas

iya betul, mungkin bisa disebut simple ajax menu berdasarkan kategori hehe...

Balas

iya saya jg sering lihat di theme2 yg dibuat MKR.. kl gak slh namanya ajax load more page / infinite scrolling

Balas
This comment has been removed by a blog administrator.

what your problem? why are u removed our credit link? ah, no need to answer

Balas

Thats What i was looking for :lv @Arlina :-bd

Balas

Oh itu namanya, sudah lumayan banyak yang nerapin halaman pake efek saat scrolling, cuman kok berat ya sepertinya.

Balas

iya mas, pernah saya cb jalankan di template lycoris 2 dan memang agak berat nantinya. apalagi kl artikelnya ratusan, otomatis beban ke memori lokal (RAM) PC jd meningkat disebabkan cache yg terload menumpuk. seperti fitur bawaan pd blog Tumblr. jd lebih baik pakai pembatas numbered page navigation atau older page

Balas

Wih pasti keren tuh Mbak. ;)
Cara membuatnya di Blogger gimana ya Mbak?

Balas

tinggal dipasang aja namun kode yg saya berikan di atas menunya belum responsive.. atau bs jg disesuaikan dengan menu template yg dipakai

Balas

menu requestan ane mana mbak.. yg bikin menu kek template g vusion

Balas

izin untuk copy desain menunya mbak Arlina. Nice blog

Balas

bagus mbak hasilnya dan bisa dikembangkan. terima kasih ya sudah berbagi. izin berbagi ulang di blog saya. terima kasih. salam sahabat blogger.

Balas

iya silahkan, sama2

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.