WANtaroHP
これは CSS による ul 要素を用いた menu 作成のテストです．
このページの CSS は，疑似 2 段組レイアウトの CSS を読み込んだものに，リストの「縦並びリンク」・「横並びリンク」を加えたものです．
疑似 2 段組レイアウトの CSS の読み込みは，このページの CSS の先頭に以下の 1 文を加えることにより行っています．
@import url("test-css.css");
|
以下はテストリンク用の見出しです．
/******************************************/
/* 縦メニュー設定書式 */
/******************************************/
ul.menu-vart{margin:0;padding:0;width:150px;}
ul.menu-vart li{
list-style:none;
border-top:1px solid #2F4F4F;
border-bottom:1px solid #2F4F4F;
}
ul.menu-vart li a{
display:block;
padding:1px;
text-decoration:none;
text-align:center;
background-color:#ffff99;
}
ul.menu-vart li a:link{color:#000080;}
ul.menu-vart li a:visited{color:#000080;}
ul.menu-vart li a:active{color:#000080;}
ul.menu-vart li a:hover{background-color:#ffcc33;color:#0000ff;}
|
<ul class="menu-vart"> <li><a href="#header">header</a></li> <li><a href="#go_to_No_1">go to No.1</a></li> <li><a href="#go_to_No_2">go to No.2</a></li> <li><a href="#go_to_No_3">go to No.3</a></li> <li><a href="#footer">footer</a></li> </ul> |
/******************************************/
/* 横メニュー設定書式 */
/******************************************/
ul.menu-late{margin:0;padding:0;}
ul.menu-late li{
list-style:none;
float:left;
border-left:1px solid #2F4F4F;
border-right:1px solid #2F4F4F;
}
ul.menu-late li a{
display:block;
width:100px;
padding:1px;
text-decoration:none;
text-align:center;
background-color:#ffff99;
}
ul.menu-late li a:link{color:#000080;}
ul.menu-late li a:visited{color:#000080;}
ul.menu-late li a:active{color:#000080;}
ul.menu-late li a:hover{background-color:#ffcc33;color:#0000ff;}
|
<ul class="menu-late"> <li><a href="#header">header</a></li> <li><a href="#go_to_No_1">go to No.1</a></li> <li><a href="#go_to_No_2">go to No.2</a></li> <li><a href="#go_to_No_3">go to No.3</a></li> <li><a href="#footer">footer</a></li> </ul> |