CSSとjQueryで作る垂直スクロールメニュー[js][CSS]

jq0905261.jpg

valums.comより、CSSとjQueryで作る垂直スクロールメニューの紹介です。

デモページはこちらから

作成方法は、以下のようにマークアップするだけです。

HTML

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

CSS

div.sc_menu_wrapper {
  position: relative;
  height: 500px;
  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;              

  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;
}

jQuery

/*<!--[CDATA[*/
function makeScrollable(wrapper, scrollable){
}
$(function(){
  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]-->*/

画像のローディングのための以下のスクリプトも記述します。

function makeScrollable(wrapper, scrollable){
  var wrapper = $(wrapper), scrollable = $(scrollable);

  scrollable.hide();
  var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

  var interval = setInterval(function(){
    var images = scrollable.find('img');
    var completed = 0;

    images.each(function(){
      if (this.complete) completed++;
    });

    if (completed == images.length){
      clearInterval(interval);
      setTimeout(function(){

        loading.hide();
        wrapper.css({overflow: 'hidden'});                                              

        scrollable.slideDown('slow', function(){
          enable();
        });
      }, 1000);
    }
  }, 100);

  function enable(){
  }
}

マウスホバーするとツールチップが表示されます。そのスクリプトが以下です。

function enable(){
  var inactiveMargin = 100;
  var wrapperWidth = wrapper.width();
  var wrapperHeight = wrapper.height();
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;

  wrapper.mousemove(function(e){
    var wrapperOffset = wrapper.offset();
    var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;

    if (top < 0){
      top = 0;
    }

    wrapper.scrollTop(top);
  });
}