jquery | ドロップダウンメニュー| 画像スライド（アコーディオン）| 回転| book型
ドロップダウンメニュー
http://simple-honesty.mods.jp/0202/dropdownmenu/index.html
functionについて
- 1000が一秒
- 他のところからコピペした時は、セレクターとの正誤性を見る。
* html ul.menu li{
display:inline;
zoom:1;
}
*+html ul.menu li{
display:inline;
zoom:1;
}
http://www.koders.com/javascript/fidCE1413206AA8F10C4E92B42BCD2C3BFEDBE5FD51.aspx?s=upload
アニメーションなしのドロップダウンメニュー
お役立ちjqueryサイト！！
http://www.dynamicdrive.com/
http://jqueryui.com/
画像スライド（アコーディオン）
http://simple-honesty.mods.jp/0202/imageacodion/index.html
スタイルシートは分割されたcssを一つのものにリンクさせることができる。
import.cssはそれ。
《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;
padding: 0;
line-height: 1.0;
font-family:
"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"Hiragino Kaku Gothic Pro W3",
"メイリオ",
Meiryo,
Osaka,
"ＭＳ Ｐゴシック",
"MS P Gothic",
sans-serif;
}
ul li, ol li {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
img, input {
vertical-align: middle;
}
《base.css》
@charset "UTF-8";
body {
background: #FFFFFF;
}
ul {
font-weight: normal;
list-style: none;
}
#container {
width: 800px;
padding: 0;
background: #000;
margin: 50px auto;
background-color: #FFFFFF;
}
#images {
display: none;
}
《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;
}
回転イメージ
http://simple-honesty.mods.jp/0202/RotatingImageSlider/index.html
footerの可変は最高。
