株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

04-07)  1. プルダウンメニューの文字列

 

背景の画像データの上に、プルダウンメニューの文字列を追加して装飾する。


プルダウウンメニューの指定は 【cssの基本】のメニュー項目

cssの書き方 /*-------------------------------------------------------
04-07 ナビゲーションの文字スタイル
-------------------------------------------------------- */
#navi0407{
 clear: both;
 width: 690px;
 height: 240px;
 margin: 0 0 5px 0;
 padding: 0 0 6px 0;
 background-repeat: repeat-x;
 background-position: left bottom;
 background-image: url("../images/head-005.jpg");
 border-top: 1px solid #CCCCCC;
}
#navi0407 li{
 float: left;
 width: 170px;
 padding: 0;
 border-right: 1px solid #CCCCCC;
 text-align: center;
 list-style-type: none;
 font-size: small;
}
#navi0407 li.mainNavi01{
 border-left: 1px solid #CCCCCC;
}
#navi0407 li.active{
padding: 5px 0;
color: #B6461D;
}
#navi0407 li a{
 display: block;
 padding: 5px 0;
 color: #000080;
 font-size: 14px;
 font-weight:bold;
}
#navi0407 li ul.childNavi03{
 display: none;
}
#navi0407 li.mainNavi03{
 position: relative;
}
#navi0407 li.mainNavi03:hover ul.childNavi03{
 display: block;
 position: absolute;
 z-index: 50;
 background: none;
 left: 30px;
 width: 100px;
 height: auto;
 background: #002162 no-repeat;
 border-top: 1px solid #CCCCCC;
 border-left: 1px solid #CCCCCC;
 border-right: 1px solid #CCCCCC;
}
#navi0407 li.mainNavi03 ul.childNavi03 li{
 float: none;
 width: 120px;
 font-size: small;
 background-color: #FFFFFF;
 border-bottom: 1px solid #CCCCCC;
}
HTMLの使用例 <div id="navi0407">
<ul>
<li class="mainNavi01"><a href="../galleria1/index.html">ホーム</a></li>
<li class="mainNavi02"><a href="index.html">css勉強室メニュー</a></li>
<li class="mainNavi03"><a href="index.html">cssの基本</a>
<ul class="childNavi03">
<li><a href="index.html">XHTMLとHTML</a></li>
<li><a href="gari01-02.html">cssの配置</a></li>
<li><a href="gari01-03.html">セレクター</a></li>
<li><a href="gari01-04.html">センタリング</a></li>
</ul>
</li>
<li class="mainNavi04"><a href="gari03-01.html">リンクの拡張</a></li>
</ul>
</div>