2月2日の学習
◆jQuery アコーディオンメニュー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>アコーディオンメニュー</title> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="application/javascript"> $(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").slideUp(); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown(); } }); }); </script> </head> <body> <div id="container"> <ul class="navi"> <li> <div class="category">ファッション</div> <ul class="menu"> <li><a href="#">アウター</a></li> <li><a href="#">インナー</a></li> <li><a href="#">ボトム</a></li> <li><a href="#">バッグ</a></li> <li><a href="#">靴</a></li> <li><a href="#">アクセサリー</a></li> </ul> </li> <li> <div class="category">家具・インテリア</div> <ul class="menu"> <li><a href="#">収納家具</a></li> <li><a href="#">ソファ</a></li> <li><a href="#">ベッド</a></li> <li><a href="#">テーブル</a></li> <li><a href="#">チェア</a></li> <li><a href="#">照明</a></li> </ul> </li> <li> <div class="category">ステーショナリー</div> <ul class="menu"> <li><a href="#">ペン・鉛筆</a></li> <li><a href="#">ノート</a></li> <li><a href="#">ファイル</a></li> <li><a href="#">付箋</a></li> </ul> </li> <li> <div class="category">生活雑貨</div> <ul class="menu"> <li><a href="#">キッチン用品</a></li> <li><a href="#">掃除・洗濯用品</a></li> <li><a href="#">バス・トイレ用品</a></li> <li><a href="#">その他</a></li> </ul> </li> </ul> </div> </body> </html> 【CSS】 @charset "utf-8"; /* CSS Document */ *{ margin: 0; padding: 0; } a{ text-decoration: none; } ul{ list-style-type: none; } body{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #container{ margin: 50px 0 0 50px; } .category{ width: 200px; height: 40px; line-height: 40px; padding-left: 10px; background-color: #B9DDE8; margin-bottom: 1px; color: #006; cursor: pointer; } ul.menu li{ width: 200px; height: 35px; line-height: 35px; padding-left: 10px; background-color: #F2F9FB; } ul.menu li a{ display: block; color: #006; }
【その他アコーディオンメニュー参考サイト】
◆jQUery ドロップダウンメニュー
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ドロップダウンメニュー</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function(){ $("ul.menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }); }); </script> <style type="text/css"> *{ margin: 0; padding: 0; list-style-type: none; } html{ overflow-y: scroll; //常にスクロールバーを表示する } #container{ margin: 100px auto; width: 537px; } ul.menu li{ float: left; width: 179px; height: 48px; background: url(images/btn.png); position: relative; } * html ul.menu li{ //「*html」はIE6対策のハック display: inline; zoom: 1; //IEの不具合を防ぐ } *+html ul.menu li{ //「*+html」はIE7対策のハック display: inline; zoom: 1; //IEの不具合を防ぐ } ul.menu li a{ display: block; width: 100%; height: 100%; line-height: 48px; text-indent: 30px; font-weight: bold; clolor: #CFDFB5; text-decoration: none; position: relative; } ul.menu li a:hover{ background: url(images/btn_over.png); } ul.sub{ display: none; } *html ul.sub{ zoom: 1; position: relative; } *html ul.sub{ zoom: 1; position: relative; } ul.sub li{ float: none; } ul.sub li ul.sub{ position: absolute; left: 179px; top: 0; } ul.menu{ zoom: 1; } ul.menu: after{ height: 0; visibility: hidden; content: "."; direction: block; clear: both; } </style> </head> <body> <div id="container"> <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a href="#">サブメニューA</a></li> <li><a href="#">サブメニューA</a> <ul class="sub"> <li><a href="#">サブメニューA2</a></li> <li><a href="#">サブメニューA2</a></li> <li><a href="#">サブメニューA2</a></li> </ul> </li> </ul> </li> <li><a href="#">メニューB</a> <ul class="sub"> <li><a href="#">サブメニューB</a></li> <li><a href="#">サブメニューB</a> <ul class="sub"> <li><a href="#">サブメニューB2</a></li> <li><a href="#">サブメニューB2</a></li> <li><a href="#">サブメニューB２</a> <ul class="sub"> <li><a href="#">サブメニューB３</a></li> <li><a href="#">サブメニューB3</a></li> <li><a href="#">サブメニューB3</a></li> </ul> </li> </ul> </li> <li><a href="#">サブメニューB</a></li> </ul> </li> <li><a href="#">メニューC</a> <ul class="sub"> <li><a href="#">サブメニューB</a> <ul class="sub"> <li><a href="#">サブメニューC</a></li> <li><a href="#">サブメニューC</a></li> <li><a href="#">サブメニューC</a></li> </ul> </li> <li><a href="#">サブメニューB</a></li> <li><a href="#">サブメニューB</a></li> </ul> </li> </ul> </div> </body> </html>
【IE対策ハック】
＊html ⇒ IE6対策ハック
＊＋html ⇒ IE7対策ハック
zoom: 1;でレイアウト崩れを防ぐ
【その他ドロップダウンメニュー参考サイト】
◆jQuery 画像スライド（mootools）
※スタイルシートが3点あるため、link relで先ず『import.css』を読み込ませ、さらに3点を読み込ませる。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>画像スライドメニュー</title> <link href="css/import.css" rel="stylesheet" type="text/css" media="screen,print"> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/imageMenu.js"></script> <script type="text/javascript" src="js/images.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ var myMenu = new ImageMenu($$('#imageMenu .imgM'), {openWidth:640}); }); </script> </head> <body> <div 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> </div> </body> </html>
【import.css】
|@charset "utf-8"; @import "reset.css"; @import "base.css"; @import "imageMenu.css";
【reset.css】
@charset "utf-8";
html,body,div,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,address,
ul,ol,li,dl,dt,dd,
table,th,td,form,fieldset{
margin: 0;
paddng: 0;
line-height: 1.0;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
ul li,ol li{
list-style-type: none;
}
a{
text-decoration: none;
}
img{
border: 0;
}
img,input{
vertical-align: middle;
}
【imageMenu.css】
@charset "utf-8";
#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(../images/01.jpg) no-repeat;
}
#imageMenu .opt2{
background: #FFF url(../images/02.jpg) no-repeat;
}
#imageMenu .opt3{
background: #FFF url(../images/03.jpg) no-repeat;
}
#imageMenu .opt4{
background: #FFF url(../images/04.jpg) no-repeat;
}
#imageMenu .opt5{
background: #FFF url(../images/05.jpg) no-repeat;
}
#imageMenu .opt6{
background: #FFF url(../images/06.jpg) no-repeat;
}
#imageMenu .opt7{
background: #FFF url(../images/07.jpg) no-repeat;
}
#imageMenu .opt8{
background: #FFF url(../images/08.jpg) no-repeat;
}
【base.css】
@charset "utf-8";
body{
background: #FFF;
}
ul{
font-weight: normal;
list-style: none;
}
#container{
width: 800px;
padding: 0;
background: #000;
margin: 50px auto;
background-color: #FFF;
}
#images{
display: none;
}
