Home > JavaScript > javascriptで伸縮するメニューができる

javascriptで伸縮するメニューができる

auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。

<script type="text/javascript"  xsrc="imagemenu.js" mce_src="imagemenu.js"  ></script>

<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" xhref="" mce_href=""  ><span>TOP</span></a></li>
<li><a class="kwick opt2" xhref="" mce_href=""  ><span>CSS</span></a></li>
<li><a class="kwick opt3" xhref="" mce_href=""  ><span>HTML</span></a></li>
<li><a class="kwick opt4" xhref="" mce_href=""  ><span>ABOUT</span></a></li>
</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:185});
</script>

phatfusionの元のsampleはそれぞれ違う画像を動かしてますが、まあこの方がメニューっぽいかなと。クリックするとその部分の幅が固定されるようですが、リンクをつける場合はあまり必要がない機能のような気もします。

また、Image Menuは動作中に右端がぶるぶる震えてしまうので、<ul class=”kwicks”>の幅を固定して、背景に同じパターンの画像を配置するときれいに見えます。自分のsampleでは端を角丸にしたかったので、角丸の画像を1枚作って、左と右に表示してます。

←角丸
←各背景

#kwick {
position:relative;
width:515px;
background:url(menu_bg_gra_lr.gif) no-repeat top left;
}
#kwick ul.kwicks {
display:block;
margin:0 0 0 5px;
height:50px;
background:url(menu_bg_gra_lr.gif) no-repeat top right;
list-style:none;
}

あとこれをちょっと応用して縦に伸縮するメニューを作ってみました。

縦バージョンはimagemenu.jsのソースを「width,Width」→「height,Height」に変換しただけのものを使ってます。しかしこんなことまでできるとは…。

(追記:2007/03/28)
Operaで縦バージョンがおかしい件ですが、CSSの読み込みでエラーが出ていた模様です。
その箇所を直したらOpera9.10では動作するようになりました。ご指摘ありがとうございます。

add to hatena hatena.comment (510) add to del.icio.us (157) add to livedoor.clip (70) add to Yahoo!Bookmark (0) Total: 737

Comments:3

07-03-26 (月) 1:22

縦版ですが、Opera9.02ではつぶれてしまうようですね。
横は動くのですが。

loconet 07-03-28 (水) 0:54

あ、すいません。Operaでの不具合も治りました。どうやらCSSのファイル指定でエラーが起きてるようでした。ご指摘ありがとうございます。

Testerhqh 07-07-12 (木) 12:54

Helloxye – this is just a testing, dont worry about it

Comment Form
Remember personal info

Trackbacks:7

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2007/03/javascript.html/trackback
Listed below are links to weblogs that reference
javascriptで伸縮するメニューができる from webデザイナーのナナメガキ
trackback from miya2000の日記 07-03-26 (月) 10:52

[css] 伸縮するメニュー

元ネタ javascriptで伸縮するメニューができる http://loconet.web2.jp/blog/archives/2007/03/jav

trackback from INTER-WEB 07-03-26 (月) 18:10

第97回目はネットのお役立ち情報~就職のホンネ

「INTER-GATE運営事務局」です。 □君、採用。 ※写真はイメージです。 …

trackback from review 07-03-26 (月) 20:43

伸縮自在なメニューとか

■たまに国内のものから面白いのをピックアップしました▼Javascriptで伸縮

trackback from [foool]丘の上 07-04-21 (土) 22:15

[CSS][JavaScript][まとめ]CSSとJavaScriptで作るサイトメニュー

探したついでにまとめのまとめ。 知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 – GIGAZINE でかなり使えそうなhe…

trackback from hands in hands 07-06-13 (水) 9:47

links for 2007-06-13

カッコよすぎるFlashサイト集:phpspot開発日誌 (tag…

trackback from 仕事の効率を上げる blog 07-08-06 (月) 11:28

Javascriptライブラリ&Tips紹介記事のまとめ

以下の記事にて、グラフィック関連、グラフ関連、カレンダー関連、エフェクト関連な…

trackback from sluban speelgoed 10-09-30 (木) 21:00

sluban speelgoed…

Sluban is een goed alternatief voor Lego (more…)

Home > JavaScript > javascriptで伸縮するメニューができる

Search
Feeds
Meta

Return to page top