横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
メニューを縦に並べてドロップダウン形式で表示し、マウスオーバーでデザインを変更する
縦型の配列は
li要素の回り込み指定(float:
none;)の解除を行なう。
文字の色は通常色(color: white;)とマウスオーバー色(color: red;)を指定する。
ドロップダウンメニューも同様の指定を行なう。
cssの書き方 |
/*------------------------------------------------------- 03-08 ナビゲーションのスタイル -------------------------------------------------------- */ #navi_5x0 { width: 690px; } #navi_5x0 ul { position: relative; } #navi_5x0 li { float: none; /* 縦型の配置 */ border: 3px solid #CCCCCC; padding: 10px 0 0 10px; width: 150px; font-size: 13px; list-style-type: none; /* ドットはいらない */ height: 30px; /* 親メニューの高さ */ background: #808000; /* 子メニューの背景色:黒色 */ } #navi_5x0 li a{ color: white; /* 白色指定 */ } #navi_5x0 li:hover a{ color: red; /* ホバー時に赤色指定 */ } #navi_5x0 li ul{ display: none; position: absolute; /* 表示が親メニューの位置とする */ z-index: 2; /* 表示の優先順番 */ padding: 10px 5px 0; /* 文字の上部の空白 */ width: 167px; /* 子メニューの幅 */ left: 150px; /* 子メニューの表示をずらす*/ background: #002162; } #navi_5x0 li:hover ul{ display: block; /* 一括表示指示 */ text-indent:1em; /* 文字は開始に空白を1文字 */ background: #002162; /* 子メニューの背景色:黒色 */ } #navi_5x0 li:hover ul li a{ color: white; /* 通常時に白色指定 */ } #navi_5x0 li:hover ul li:hover a{ color: red; /* ホバー時に赤色指定 */ } |
---|---|
HTMLの使用例 |
<div id="navi_5x0"> <ul> <li id="menu1"><a href="#">経営</a> <ul> <li><a href="#">情報戦略/業務革新</a></li> <li><a href="#">業界動向</a></li> <li><a href="#">電子行政</a></li> <li><a href="#">BCP</a></li> <li><a href="#">IFRS(国際会計基準)</a></li> </ul> </li> <li id="menu2" class="now"><a href="h#">情報システム</a> <ul> <li><a href="#">業務アプリケーション</a></li> <li><a href="#">開発プロセス</a></li> <li><a href="#">Windows/Office</a></li> <li><a href="#">オープンソース/Linux</a></li> <li><a href="#">ITアーキテクトの視点</a></li> <li><a href="#">仮想化</a></li> </ul> </li> <li id="menu3"><a href="#">ネットワーク</a> <ul> <li><a href="#">モバイル</a></li> <li><a href="#">放送</a></li> <li><a href="#">エンジニア倶楽部</a></li> </ul> </li> <li id="menu4"><a href="#">セキュリティ</a> </li> <li id="menu5"><a href="#">ソフト開発</a> <ul> <li><a href="#">Android Developers' Inn</a></li> <li><a href="#">i-appli Developers' Inn</a></li> </ul> </li> </ul> </div> |