studio-benkei

画像を使ったアコーディオンメニュー「phatfusion」を紹介します。

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

参考・ダウンロードサイト → phatfusion

設定 ▼

						<script src="mootools.js" type="text/javascript" charset="utf-8"></script>
						<script src="imageMenu.js" type="text/javascript" charset="utf-8"></script>
          

HTML ▼

            <div id="imageMenu">
              <ul>
                <li class="landscapes"><a href="#">淡路島</a></li>
                <li class="people"><a href="#">王子動物園</a></li>
                <li class="nature"><a href="#">愛猫写真</a></li>
                <li class="urban"><a href="#">和田山</a></li>
                <li class="abstract"><a href="#">書写山</a></li>
                <li class="abc"><a href="#">和田山</a></li>
              </ul>
            </div>
          

css ▼

            #imageMenu {
              position: relative;
              width: 600px;
              height: 300px;
              overflow: hidden;
              margin-right: auto;
              margin-left: auto;
              margin-bottom: 30px;
            }
            #imageMenu ul {
              list-style: none;
              margin: 0px;
              display: block;
              height: 300px;
              width: 1000px;
              }
            #imageMenu ul li {
              float: left;
            }
            #imageMenu ul li a {
              text-indent: -1000px;
              background:#FFFFFF none repeat scroll 0%;
              border-right: 2px solid #000;
              cursor:pointer;
              display:block;
              overflow:hidden;
              width:100px;
              height: 300px;
            }
            #imageMenu ul li.landscapes a {
              background-attachment: scroll;
              background-image: url(img/0.jpg);
              background-repeat: repeat;
              background-position: 0%;
            }
            #imageMenu ul li.people a {
              background-attachment: scroll;
              background-image: url(img/1.jpg);
              background-repeat: repeat;
              background-position: 0%;
            }
            #imageMenu ul li.nature a {
              background-attachment: scroll;
              background-image: url(img/2.jpg);
              background-repeat: repeat;
              background-position: 0%;
            }
            #imageMenu ul li.urban a {
              background-attachment: scroll;
              background-image: url(img/3.jpg);
              background-repeat: repeat;
              background-position: 0%;
            }
            #imageMenu ul li.abstract a {
              background-attachment: scroll;
              background-image: url(img/4.jpg);
              background-repeat: repeat;
              background-position: 0%;
            }
            #imageMenu ul li.abc a {
              width: 200px;
              background-attachment: scroll;
              background-image: url(img/5.jpg);
              background-repeat: repeat;
              background-position: 0%;
            }
          

JavaScript ▼

            window.addEvent('domready', function(){
              var myMenu = new ImageMenu($$('#imageMenu a'),
                {openWidth:400, onOpen:function(e,i){console.log(e)}
              });					
            });