Membuat Menu Scrolling Vertikal CSS dan jQuery

Menu Scrolling Vertikal ini kebalikan arah dari " Menu
Scrolling Horizontal ". Pemakaian kode CSS dan
jQuery masih tetap digunakan pada Menu Scrolling
Vertikal ini. Cara kerjanyapun masih sama yaitu dengan
cara mengerakkan cursor anda. Bila anda tertarik ingin
membuatnya, berikut ini langkah membuatnya :

1.   Masuk ke Edit HTML

2.   Carilah kode </head>

3.   Letakkan kode berikut di atasnya.

<style type="text/css"> body { background: #0F0D0D; padding: 30px 0 0 50px; } div.sc_menu_wrapper { position: relative; height: 500px; /* Make bigger than a photo, because we need a place for a scrollbar. */ width: 160px; margin-top: 30px; overflow: auto; } div.sc_menu { padding: 15px 0; } .sc_menu a { display: block; margin-bottom: 5px; width: 130px; border: 2px rgb(79, 79, 79) solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; /* When image support is turned off */ color: #fff; background: rgb(79, 79, 79); } .sc_menu a:hover { border-color: rgb(130, 130, 130); border-style: dotted; } .sc_menu img { display: block; border: none; } .sc_menu_wrapper .loading { position: absolute; top: 50px; left: 10px; margin: 0 auto; padding: 10px; width: 100px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-align: center; color: #fff; border: 1px solid rgb(79, 79, 79); background: #1F1D1D; } /* Styling tooltip */ .sc_menu_tooltip { display: block; position: absolute; padding: 6px; font-size: 12px; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid rgb(79, 79, 79); background: rgb(0, 0, 0); /* Make background a bit transparent for browsers that support rgba */ background: rgba(0, 0, 0, 0.5); } /* Here are styles for a link to an article. Not for you :) */ #back { margin-left: 8px; color: gray; font-size: 18px; text-decoration: none; } #back:hover { text-decoration: underline; } </style><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script><br /> <script type= "text/javascript">/*<![CDATA[*/ function makeScrollable(wrapper, scrollable){ // Get jQuery elements var wrapper = $(wrapper), scrollable = $(scrollable); // Hide images until they are not loaded scrollable.hide(); var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper); // Set function that will check if all images are loaded var interval = setInterval(function(){ var images = scrollable.find('img'); var completed = 0; // Counts number of images that are succesfully loaded images.each(function(){ if (this.complete) completed++; }); if (completed == images.length){ clearInterval(interval); // Timeout added to fix problem with Chrome setTimeout(function(){ loading.hide(); // Remove scrollbars wrapper.css({overflow: 'hidden'}); scrollable.slideDown('slow', function(){ enable(); }); }, 1000); } }, 100); function enable(){ // height of area at the top at bottom, that don't respond to mousemove var inactiveMargin = 99; // Cache for performance var wrapperWidth = wrapper.width(); var wrapperHeight = wrapper.height(); // Using outer height to include padding too var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin; // Do not cache wrapperOffset, because it can change when user resizes window // We could use onresize event, but it's just not worth doing that // var wrapperOffset = wrapper.offset(); // Create a invisible tooltip var tooltip = $('<div class="sc_menu_tooltip"></div>') .css('opacity', 0) .appendTo(wrapper); // Save menu titles scrollable.find('a').each(function(){ $(this).data('tooltipText', this.title); }); // Remove default tooltip scrollable.find('a').removeAttr('title'); // Remove default tooltip in IE scrollable.find('img').removeAttr('alt'); var lastTarget; //When user move mouse over menu wrapper.mousemove(function(e){ // Save target lastTarget = e.target; var wrapperOffset = wrapper.offset(); var tooltipLeft = e.pageX - wrapperOffset.left; // Do not let tooltip to move out of menu. // Because overflow is set to hidden, we will not be able too see it tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth()); var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40; // Move tooltip under the mouse when we are in the higher part of the menu if (e.pageY - wrapperOffset.top < wrapperHeight/2){ tooltipTop += 80; } tooltip.css({top: tooltipTop, left: tooltipLeft}); // Scroll menu var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin; if (top < 0){ top = 0; } wrapper.scrollTop(top); }); // Setting interval helps solving perfomance problems in IE var interval = setInterval(function(){ if (!lastTarget) return; var currentText = tooltip.text(); if (lastTarget.nodeName == 'IMG'){ // We've attached data to a link, not image var newText = $(lastTarget).parent().data('tooltipText'); // Show tooltip with the new text if (currentText != newText) { tooltip .stop(true) .css('opacity', 0) .text(newText) .animate({opacity: 1}, 1000); } } }, 200); // Hide tooltip when leaving menu wrapper.mouseleave(function(){ lastTarget = false; tooltip.stop(true).css('opacity', 0).text(''); }); /* //Usage of hover event resulted in performance problems scrollable.find('a').hover(function(){ tooltip .stop() .css('opacity', 0) .text($(this).data('tooltipText')) .animate({opacity: 1}, 1000); }, function(){ tooltip .stop() .animate({opacity: 0}, 300); }); */ } } $(function(){ makeScrollable("div.sc_menu_wrapper", "div.sc_menu"); }); /*]]>*/</script>

KETERANGAN =

Atur width & heightnya. Sesuaikanlah
dengan ukuran gambar milik anda.

4.   Cari lagi kode </body>

5.   Letakkan kode berikut di atasnya.

<div class="sc_menu_wrapper"><div class="sc_menu"><a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a><br /> <a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a><br /> <a title="jQuery" href="#"><img src="img/3.jpg" alt="jQuery"/></a> <br /> <a title="CSS" href="#"><img src="img/4.jpg" alt="CSS"/></a><br /> <a title="Vertical" href="#"><img src="img/5.jpg" alt="Vertical"/></a><br /> <a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a><br /> <a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a><br /> <a title="jQuery" href="#"><img src="img/3.jpg" alt="jQuery"/></a><br /> <br /> <a title="Navigation" href="#"><img src="img/4.jpg" alt="Navigation" /></a><br /> <a title="JavaScript" href="#"><img src="img/5.jpg" alt="JavaScript"/></a><br /> <a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a><br /> <a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a><br /> <a title="JavaScript" href="#"><img src="img/3.jpg" alt="Javascript"/></a> <br /> </div></div>

6.   Kode tersebut juga bisa anda letakkan
      pada gadget HTML/JavaScript.

KETERANGAN =

*   Ganti URL alamat dan URL gambarnya
    dengan URL milik anda.

*   Ganti juga kata keterangan gambarnya
    dengan kata yang anda inginkan.

Selamat Mencoba,

semoga berhasil, good luck!