はじめまして。 | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

Web制作や付随することを何でも質問できるコーナーです。

未経験からWebデザイナーになる!! > 質問掲示板 > カテゴリ: HTML/CSS > はじめまして。

はじめまして。

当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
はじめまして。メニューのことについて質問させていただきます。

ttp://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/のメニュー目次を5つにする方法と縦に区切り線をつける方法を教えていただけないでしょうか？

よろしくお願いします。
タカハシ さん 10月25日 14時28分
初めまして。以前質問の方で投稿させていただいたものです。今回は回答者として投稿させていただきます。

○メニュー目次を５つにする方法ですが
<li class="aaa"><a href="#">Menu 04</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
<li><a href="#">Sub menu 03</a></li>
</ul>
</li>

のすぐ下に
<li><a href="#">Menu 05</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
</ul>
</li>

を追加することでメニュー目次が５つになります。


完成例として
<li class="aaa"><a href="#">Menu 04</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
<li><a href="#">Sub menu 03</a></li>
</ul>
</li>
<li><a href="#">Menu 05</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
</ul>
</li>

となります。


●縦に区切り線をつける方法ですが
menuの<li>にborder-rightをかけるだけで右に区切り線がつきます。

もっと具体的に書きますと各メニューの<li>タグに（menu01～menu04）にクラス属性をつけて右側だけにボーダーをかけます。ここで注意するのが一番右のmenu05にはボーダーをかけないようにします。


サンプルの完成例ですが

HTML側は
<div class="menu">
<ul>
<li class="aaa"><a href="#">Menu 01</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
<li><a href="#">Sub menu 03</a></li>
</ul>
</li>
<li class="aaa"><a href="#">Menu 02</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
<li><a href="#">Sub menu 03</a></li>
<li><a href="#">Sub menu 04</a></li>
<li><a href="#">Sub menu 05</a></li>
</ul>
</li>
<li class="aaa"><a href="#">Menu 03</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
</ul>
</li>
<li class="aaa"><a href="#">Menu 04</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
<li><a href="#">Sub menu 03</a></li>
</ul>
</li>
<li><a href="#">Menu 05</a>
<ul>
<li><a href="#">Sub menu 01</a></li>
<li><a href="#">Sub menu 02</a></li>
</ul>
</li>



CSS側に
.aaa{
border-right:1px solid;
}



このコードHTMLとCSSのコードをコピペするだけでタカハシ様がおっしゃっている内容が反映されると思います。
長々と申し訳ありません。私の答えられる範囲であればお答えしますのでこの質問でわかりずらかったら再度投稿の方をよろしくお願いします。
kei さん 10月26日 03時25分
ありがとうございました！
タカハシ さん 10月27日 23時39分
区切り線の色と太さを変えようしましたが出来ませんでした。もし変える方法をご存知でしたら教えていただけないでしょうか？
タカハシ さん 11月07日 16時58分
タカハシさん、こんばんは。

上のCSSの部分
.aaa{
border-right:1px solid;
}

で、任意のピクセルに変更＆色指定もすればできるはずです。

（例　線を3ピクセルに、色をグレーにする場合
.aaa{
border-right:3px solid #999;
}
馬場誠 さん 11月07日 18時20分
出来ました。ありがとうございました！
タカハシ さん 11月07日 23時38分