画像を使ったスライドメニュー、imagemenuを作ってみた。

また間隔が空いてしまいました。

今回は、imagemenuを作ってみたいと思います。

imagemenuは、mootoolsライブラリを使用して、auのトップページで使われてるみたいな伸縮してスライドするメニューを作る事ができます。こんなやつです。

imagemenuサンプル

じゃあ、やってみます！

* 準備 *
まず、imagemenuのファイルを、こちらのphatfusionさんのサイトからダウンロードします。そして、mootools.jsをこちらのmootoolsのサイトから、ダウンロード(全項目にチェックを入れました)します。これで準備は完了です。

* imagemenuの設置 *

ファイルの構成は、

index.html
css
- style.css
js
- imageMenu.js
- mootools.js
img
- menu1.gif
- menu2.gif
- menu3.gif
- menu4.gif
- menu5.gif

となっています。

次に、<head>～</head>タグの中に、次のソースを書きます。

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/imageMenu.js" type="text/javascript"></script>

そして、<body>タグ内に次のソースを書きます。

<ul id="imgMenu">
<li id="menu01"><a href="#"><img src="img/menu1.gif" alt="panel01" width="240" height="160" /></a></li>
<li id="menu02"><a href="#"><img src="img/menu2.gif" alt="panel02" width="240" height="160" /></a></li>
<li id="menu03"><a href="#"><img src="img/menu3.gif" alt="panel03" width="240" height="160" /></a></li>
<li id="menu04"><a href="#"><img src="img/menu4.gif" alt="panel04" width="240" height="160" /></a></li>
<li id="menu05"><a href="#"><img src="img/menu5.gif" alt="panel05" width="240" height="160" /></a></li>
</ul>

<script type="text/javascript">
var myMenu = new ImageMenu($$('#imgMenu li'),{openWidth:240});
</script>

この部分での、それぞれの画像に指定されている"width"がロールオーバーした時に開く、画像のサイズになります。

最後に、CSSに次のソースを書きます。

img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    font-size: 0%;
    line-height: 0%;
}
ul,ol {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

/* ---------- */
#imgMenu {
    overflow: hidden;
}
#imgMenu li {
    float: left;
    height: 160px;
    width: 120px;
    overflow: hidden;
}

このCSSの、#imgMenu liで指定されている"width"のサイズが、ロールオーバーする前の状態のメニュー画像のサイズになります。

これで、imagemenuの完成です。

* 参考サイト *
javascriptで伸縮するメニューができる
JavaScriptでアコーディオンメニュー画像を利用したスライドメニュー｜imageMenu.js

Ho-KAGO After School

画像を使ったスライドメニュー、imagemenuを作ってみた。

タグ:

関連記事

このブログ記事と同じカテゴリのブログ

トラックバックURL

コメントする