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秒おきに処理されるようになる


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

twitter facebook このエントリーをはてなブックマークに追加 RSS

▷こんな記事も読まれています

Recommended by