【HTML5, JavaScript】画像スライドメニュー
DEMO_PAGE 画像横スライド
HTML5, JavaScriptを利用して画像スライドメニューを作成しました。
Webページを華やかにする技術として利用できると思います。
jsファイルはDEMO_PAGEのページのソースから取得して下さい。
イメージを変えるだけで、簡単に実装できると思います。
【index.html】
<! DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像横スライド</title> <link rel="stylesheet" href="css/style.css" media="all"> <script src="js/mootools.js"></script> <script src="js/imageMenu.js"></script> <script src="js/images.js"></script> <script> window.addEvent( 'domready', function( ){ var myMenu = new ImageMenu( $$( '#imageMenu .imgM' ), { openWidth: 640 } ); } ); </script> </head> <body> <div id="container"> <header> <h1>画像横スライド</h1> <nav id="imageMenu"> <ul> <li class="imgM opt1"><em><a href="#">カテゴリ1</a></em></li> <li class="imgM opt2"><em><a href="#">カテゴリ2</a></em></li> <li class="imgM opt3"><em><a href="#">カテゴリ3</a></em></li> <li class="imgM opt4"><em><a href="#">カテゴリ4</a></em></li> <li class="imgM opt5"><em><a href="#">カテゴリ5</a></em></li> <li class="imgM opt6"><em><a href="#">カテゴリ6</a></em></li> <li class="imgM opt7"><em><a href="#">カテゴリ7</a></em></li> <li class="imgM opt8"><em><a href="#">カテゴリ8</a></em></li> </ul> </nav> </header> </div> </body> </html>
【style.css】
@charset "UTF-8"; /* reset */ body, div, ul, i, img, header { margin: 0; padding: 0; } ul { list-style: none; } img { border: none; vertical-align: middle } a { text-decoration: none; } /* layout */ #container { width: 800px; background: #000; margin: 50px auto; background-color: #FFF; } #imageMenu li { float: left; width: 97px; } #imageMenu li a { display: block; } #imageMenu .imgM { display: block; cursor: pointer; overflow: hidden; height: 200px; width: 97px; background: #FFF; border-right: 2px solid #FFF; } #imageMenu .imgM em { visibility: hidden; } #imageMenu .opt1 { background: #FFF url(../img/01.jpg) no-repeat; } #imageMenu .opt2 { background: #FFF url(../img/02.jpg) no-repeat; } #imageMenu .opt3 { background: #FFF url(../img/03.jpg) no-repeat; } #imageMenu .opt4 { background: #FFF url(../img/04.jpg) no-repeat; } #imageMenu .opt5 { background: #FFF url(../img/05.jpg) no-repeat; } #imageMenu .opt6 { background: #FFF url(../img/06.jpg) no-repeat; } #imageMenu .opt7 { background: #FFF url(../img/07.jpg) no-repeat; } #imageMenu .opt8 { background: #FFF url(../img/08.jpg) no-repeat; }