Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Create Vertical Scroll Menu With jQuery Plugin

Create Vertical Scroll Menu With jQuery Plugin


Mand4rt |Baiklah kali ini saya akan memberikan trik blogger yaitu 'Membuat Vertical Menu Menggunakan jQuery Plugin' Saya datang ke website Desain Persempit. Menu gulir Nya menangkap banyak perhatian saya, saya bermain dengan itu untuk sementara waktu. Ya, sayangnya, itu dibangun dalam sekejap. Dan, Ya, kita akan menerapkannya dengan jquery - menu javascript gulir berbasis yang akanmelakukan hal yang sama. Tentu saja, itu tidak akan 100% sama, karena beberapa fitur mewah yang hanya tidak praktis untuk menerapkan dengan javascript.


Jika sobat tertarik untuk mencoba, silahkan perhatikan CSS, HTML, & SCRIPT dibawah ini!

CSS ::

 #gridmenu {background:#ddd;
height:375px;
overflow:hidden;
position:relative;
}
#verscrolmenu {float:right;
width:100%;
list-style:none;
padding:0;
margin:0;
top:0;
position:relative;
height:100%;
width:300px;
}
#verscrolmenu li {
padding:10px 0;
text-align:right;
display:block;
cursor:hand;
cursor:pointer;
}
#verscrolmenu li a {
color:#ddd;background:url() repeat #1f1f1f;
font-family:helvetica, arial, verdana;
font-size:10px;
font-weight:900;
display:inline;
padding:20px 8px 5px 20px;
text-decoration:none;
}
#verscrolmenu li span {
font-family:georgia, arial;
font-size:10px;
color:#464646;
}

HTML ::

 <div id="gridmenu">
<ul id="verscrolmenu">
<li><a href="#">MENU 1 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 2 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 3 <span> / 2007</span></a></li>
<li><a href="#">MENU 4 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 6 <span> / 2007</span></a></li>
<li><a href="#">MENU 7 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 8 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 9 <span> / 2007</span></a></li>
<li><a href="#">MENU 10 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 11 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 12 <span> / 2007</span></a></li>
<li><a href="#">MENU 13 <span> / 2007</span></a></li>
<li><a href="#">SUPER LONG MENU SIZE 14 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 15 <span> / 2007</span></a></li>
<li><a href="#">MENU 16 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 17 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 18 <span> / 2007</span></a></li>
<li><a href="#">MENU 19 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 20 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 21 <span> / 2007</span></a></li>
<li><a href="#">MENU 22 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 23 <span> / 2007</span></a></li>
<li><a href="#">MENU 24 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 25 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 26 <span> / 2007</span></a></li>
<li><a href="#">MENU 27 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 28 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 29 <span> / 2007</span></a></li>
<li><a href="#">MENU 30 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 31 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 32 <span> / 2007</span></a></li>
<li><a href="#">MENU 33 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU 35 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU 36 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
<li><a href="#">MENU SIZE EXTRA LARGE 36 <span> / 2007</span></a></li>
</ul>
</div>

SCRIPT ::

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type="text/javascript" src="http://www.queness.com/resources/html/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.queness.com/resources/html/js/jquery.color.js"></script>

<script type="text/javascript">
$(document).ready(function() {  

//Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';

//Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';
  
    //Default Padding
    var defpadLeft = $('#verscrolmenu li a').css('paddingLeft');
    var defpadRight = $('#verscrolmenu li a').css('paddingRight');
      
//Animate the LI on mouse over, mouse out
    $('#verscrolmenu li').click(function () {  
//Make LI clickable
        window.location = $(this).find('a').attr('href');
      
    }).mouseover(function (){
      
//mouse over LI and look for A element for transition
        $(this).find('a')
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {
  
//mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });  
  
//Scroll the menu on mouse move above the #gridmenu layer
    $('#gridmenu').mousemove(function(e) {

//Gridmenu Offset, Top value
        var s_top = parseInt($('#gridmenu').offset().top);      
      
//Gridmenu Offset, Bottom value
        var s_bottom = parseInt($('#gridmenu').height() + s_top);
  
//Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#verscrolmenu li').height() * $('#verscrolmenu li').length);
          
//Calculate the top value
//This equation is not the perfect, but it 's very close  
var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
      
//Animate the #menu by chaging the top value
$('#verscrolmenu').animate({top: top_value}, { queue:false, duration:500});
});
});  
</script>

Selamat mencoba dan silahkan berkreasi sendri agar tampilan vertical menu ini terlihat lebih menarik! Goodluck guys ^^

iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

Sejauh ini belum ada diskusi yang masuk. Mulailah berdiskusi dan temukan teman-teman barumu.

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom