BHIBIT ARIANTO: CREATE VERTICAL SCROLL MENU WITH JQUERY PLUGIN

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 denganjquery - menu javascript gulir berbasis yang akan melakukan hal yang sama. Tentu saja, itu tidak akan 100% sama, karena beberapa fitur mewah yang hanya tidak praktis untuk menerapkan dengan javascript.

DEMO Vertical Scroll Menu With jQuery Plugin.

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 / 2007</a></li>
<li><a href="#">MENU SIZE 2 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 3 / 2007</a></li>
<li><a href="#">MENU 4 / 2007</a></li>
<li><a href="#">MENU SIZE 5 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 6 / 2007</a></li>
<li><a href="#">MENU 7 / 2007</a></li>
<li><a href="#">MENU SIZE 8 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 9 / 2007</a></li>
<li><a href="#">MENU 10 / 2007</a></li>
<li><a href="#">MENU SIZE 11 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 12 / 2007</a></li>
<li><a href="#">MENU 13 / 2007</a></li>
<li><a href="#">SUPER LONG MENU SIZE 14 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 15 / 2007</a></li>
<li><a href="#">MENU 16 / 2007</a></li>
<li><a href="#">MENU SIZE 17 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 18 / 2007</a></li>
<li><a href="#">MENU 19 / 2007</a></li>
<li><a href="#">MENU SIZE 20 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 21 / 2007</a></li>
<li><a href="#">MENU 22 / 2007</a></li>
<li><a href="#">MENU SIZE 5 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 23 / 2007</a></li>
<li><a href="#">MENU 24 / 2007</a></li>
<li><a href="#">MENU SIZE 25 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 26 / 2007</a></li>
<li><a href="#">MENU 27 / 2007</a></li>
<li><a href="#">MENU SIZE 28 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 29 / 2007</a></li>
<li><a href="#">MENU 30 / 2007</a></li>
<li><a href="#">MENU SIZE 31 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 32 / 2007</a></li>
<li><a href="#">MENU 33 / 2007</a></li>
<li><a href="#">MENU SIZE 34 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 35 / 2007</a></li>
<li><a href="#">MENU 34 / 2007</a></li>
<li><a href="#">MENU SIZE 34 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 35 / 2007</a></li>
<li><a href="#">MENU 35 / 2007</a></li>
<li><a href="#">MENU SIZE 34 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 35 / 2007</a></li>
<li><a href="#">MENU 36 / 2007</a></li>
<li><a href="#">MENU SIZE 34 / 2007</a></li>
<li><a href="#">MENU SIZE LONG 35 / 2007</a></li>
<li><a href="#">MENU SIZE EXTRA LARGE 36 / 2007</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 ^^
sumber

BHIBIT ARIANTO

Kamis, 06 Juni 2013

CREATE VERTICAL SCROLL MENU WITH JQUERY PLUGIN

Tidak ada komentar:

Posting Komentar