studio-benkei

グラデーションのように色が変化するナビゲーション

david walsh blogのエントリーから、
マウスオーバーに合わせてグラデーションのように背景色が変化するナビゲーションを実装するスクリプトを紹介します。

実装にはmootools.jsが必要です。

参考サイト → Fancy Navigation with MooTools Javascript

css ▼

            .nav {
              background:#000;
              color:#ddd;
              display:block;
              width:200px;
            }
             
          

HTML ▼

           <ul>
              <li><a href="#" class="nav">Nav Item 1</a></li>
              <li><a href="#" class="nav">Nav Item 2</a></li>
              <li><a href="#" class="nav">Nav Item 3</a></li>
              <li><a href="#" class="nav">Nav Item 4</a></li>
              <li><a href="#" class="nav">Nav Item 5</a></li>
              <li><a href="#" class="nav">Nav Item 6</a></li>
              <li><a href="#" class="nav">Nav Item 7</a></li>
              <li><a href="#" class="nav">Nav Item 8</a></li>
              <li><a href="#" class="nav">Nav Item 9</a></li>
              <li><a href="#" class="nav">Nav Item 10</a></li>
            </ul>
           
          

JavaScript ▼

            window.addEvent('domready', function() {
              $each($$('a.nav'),function(el) {
                el.addEvent('mouseenter', function() {
                  el.highlight(el.getStyle('background-color'),'#333');
                });
                el.addEvent('mouseleave', function() {
                  el.highlight(el.getStyle('background-color'),'#eee');
                });	
              });
            });