●スクリプト
<script type="text/javascript"><!--
function hiraku(tgt){ // 開く
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}
function toziru(tgt){ // 閉じる
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}
//--></script>
●HTML
<div onMouseover="hiraku('i_kantou')" onMouseout="toziru('i_kantou')" class="c_kantou">
関東
<div id="i_kantou" style="display: none;">
<a class="c_tokyo" href="#">東京</a>
<a class="c_kanagawa" href="#">神奈川</a>
<a class="c_saitama" href="#">埼玉</a>
</div><!-- end of i_kantou -->
</div><!-- end of c_kantou -->
<div onMouseover="hiraku('i_kansai')" onMouseout="toziru('i_kansai')" class="c_kansai">
関西
<div id="i_kansai" style="display: none;">
<a class="c_osaka" href="#">大阪</a>
<a class="c_kyoto" href="#">京都</a>
<a class="c_wakayama" href="#">和歌山</a>
</div><!-- end of i_kansai -->
</div><!-- end of c_kansai -->
<div class="clear"></div>
<p>あかさたな。</p>
●CSS
div.clear{
clear:both;
}
.c_kantou{
background-color:lightskyblue;
border: 0px solid #FF0000;
width:200px;
float:left;
}
.c_tokyo{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:lightgreen;
}
.c_kanagawa{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:springgreen;
}
.c_saitama{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:greenyellow;
}
.c_kansai{
background-color:sandybrown;
border: 0px solid #FF0000;
width:200px;
float:left;
}
.c_osaka{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:tomato;
}
.c_kyoto{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:plum;
}
.c_wakayama{
display: block; /* インラインボックスをブロックボックスに変更する */
text-decoration: none; /* リンクの下線を消す */
border:0px solid #FFFFFF;
background-color:hotpink;
}
●解説
基本的な構造は１列版と同じ。新たに関西を加えることで、横２列にしている。
その際、CSSで float:left; を指定することで、関東と関西を横並びにしている。
なお「あかさたな。」を関東の下に持ってくるために、
<div class="clear"></div>
を入れている。
サンプルソース
コメント
コメントを書く