株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。
横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
03-06) 1. 縦方向リストのリンク選択によってﾃｷｽﾄの色のデザインを変える
メニューを縦方向に並べて表示し、マウスオーバーでデザインを変更する
縦方向に並べるには #side-barの幅(width: 170px;)、li項目の幅(width: 130px;)を指定する。
| ｃｓｓの書き方 |
/*------------------------------------------------------- 03-06 ｻﾌﾞナビゲーションのリストスタイル -------------------------------------------------------- */ #side-bar { position: relative; width: 170px; float: left; padding: 10px 0; } #side-bar p{ margin-bottom: 10px; } #side-bar ul{ padding: 10px 0; } #side-bar li{ width: 130px; /* margin-top: 5px; 行間のサイズ */ padding: 0 0 0 11px; line-height: 15px; font-size:small; font-weight: normal; color: #252525; /* background-color: #dfcfbf; 1行の空きを含む */ list-style: none; } #side-bar li a{ /* 通常の色指定 */ background-color: #dfcfbf; /* 文字の部分 */ display: block; } #side-bar li a:hover{ /* カーソル指定の色指定 */ background-color: #F7D9D9; background-position: 13px 50%; } |
|---|---|
| HTMLの使用例 |
<div id="navi-list" class="marLft150"> <ul> <li><a href="../index.html"> <img src="../images/bu01-off.gif" width="130" height="60" alt="Information"/></a></li> <li><a href="#"> <img src="../images/bu02-off.gif" width="130" height="60" alt="Information"/></a></li> <li><a href="#"><img src="../images/bu03-off.gif" width="130" height="60" alt="Information"/></a></li> </ul> <div id="side-bar"> <ul> <li><a href="#">ホーム44</a></li> <li><a href="#">紹介44</a></li> <li><a href="#">ニュース44</a></li> <li><a href="#">商品44</a></li> <li><a href="#">サービス44</a></li> <li><a href="#">予定44</a></li> <li><a href="#">連絡先44</a></li> </ul> </div><!-- /#side-navi --> <ul> <li><a href="#"><img src="../images/bu04-off.gif" width="130" height="60" alt="Information"/></a></li> </ul> <div id="side-menu" > <ul> <li><a href="#">会社概要</a></li> <li class="home"><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> </div><!-- /#side-navi --> <ul> <li><a href="#"><img src="../images/bu05-off.gif" width="130" height="60" alt="Information"/></a></li> <li><a href="#"><img src="../images/bu06-off.gif" width="130" height="60" alt="Information"/></a></li> </ul> <!-- Begin Submenu --> <div id="side-navi"> <ul> <li class="home"><a href="#">ホーム55</a></li> <li><a href="#">紹介55</a></li> <li><a href="#">ニュース55</a></li> <li><a href="#">商品55</a></li> <li><a href="#">サービス55</a></li> <li><a href="#">予定55</a></li> <li><a href="#">連絡先55</a></li> </ul> </div><!-- /#side-navi --> <ul> <li><a href="#"><img src="../images/bu07-off.gif" width="130" height="60" alt="Information"/></a></li> </ul> <!-- End Navigation --> </div> |
