31 光の反射を表現し、知的な印象を与えるナビゲーション

31　光の反射を表現し、知的な 印象を与えるナビゲーション
制作・文＝石橋ひでやす（Studio-INT）、田中朋也（tiny-studio）

To Use XHTML CSS JavaScript Photoshop Illustrator Fireworks 透過PNG

---

XHTML

【1】この作例ではjQueryを利用する。jQueryのWebサイト（jquery.com/）からダウンロードして読み込む。利用方法はjQueryのWebサイトを参考にしてほしい。マークアップする際は、id属性に「navi」という値を指定した＜div＞要素を用意し、＜ul＞要素を囲んでおく



【2】光の反射を表現する画像を用意する。白色を中心におき、徐々に背景色へ変化する用にグラデーションをかける


XHTML

【3】div#naviに背景色と背景画像を指定し、画像は縦方向にリピートさせる。div#naviの下の＜ul＞要素の高さは、div#naviより小さくしておき、この＜ul＞要素にも背景を指定する。これにより、div#naviの背景が一部だけ見えるようになる


JavaScript

【4】JavaScriptのソース。id属性に「navi」という値をもつ＜div＞要素を操作するように記述している。何も修正しないで動作する。6行目の「5,000」という数字は「5秒おきに処理を行う」という意味なので、たとえば「10,000」に変更すれば10秒おきに処理されるようになる

▼使いどころ 企業サイトやニュースサイトなどのような、上部に横型のグローバルナビ ゲーションを設置しているサイトのデザインで使用するとよい。