HTMLとCSSでアコーディオンメニューを作りたい

Question

HTMLとCSSでアコーディオンメニューを作りました。
メニューをクリックすると表示し、再度クリックすると非表示になります。

修正したいところ、
特定のメニューをクリックすると開いていたメニューが自動的に閉じる。
クリックしたときの動きを滑らかにしたい。
この２点がどうしてもうまくいきません。
どのあたりを修正したらよいか、アドバイスをいただけると助かります。
また、できればクリックして表示ではなく、マウスオーバーして表示非表示の操作にしたいのですが、今の記述で可能でしょうか。

<div class="menu">
<label for="menu_bar07" class="label1"><a href="#top">TOP</a></label>

<label for="menu_bar01" class="label1">工事</label>
    <input type="checkbox" id="menu_bar01" class="accordion" />
    <ul id="links01">
        <li><a href="#kozi1">工事1</a></li>
        <li><a href="#kozi2">工事2</a></li>
    </ul>
    <label for="menu_bar02" class="label1">機器修理</label>
    <input type="checkbox" id="menu_bar02" class="accordion" />
    <ul id="links02">
        <li><a href="#shuri">修理</a></li>
        <li><a href="#shiyou">使用方法</a></li>
    </ul>
    <label for="menu_bar03" class="label1">未分類</label>
    <input type="checkbox" id="menu_bar03" class="accordion" />
    <ul id="links03">
        <li><a href="#kiki">機器</a></li>
        <li><a href="#mibunrui">未分類</a></li>
    </ul>
</div></div>

.menu li {
    max-height: 0;
    overflow-y: hidden;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li {
    max-height: 46px;
    opacity: 1;
}

.menu {
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
}

.menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
    line-height: 1;
}

.label1 {
    display: block;
    margin: 0 0 2px 0;
    padding :12px;
    line-height: 1;
    color :#fff;
    background :#007bbb;
    cursor :pointer;
}

input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
    background :#f4f4f4;
    list-style: none;
}

.menu li {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
    transition: height 0.3s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    max-height: 46px;
    opacity: 1;
}

Comments

[azuapricot]

javascriptは使いたくないんですか？

[mei666]

あまり、慣れていないもので・・・

[azuapricot]

javascriptを使えば簡単だけどCSSだけでやろうとすると逆に難しくなってしまうものもあるので時間があるなら挑戦してみてもいいのでは・・・？

[mei666]

難しくなってしまうのですね・・・。本日中に仕上げなくてはならないので、考え直しはちょっと難しいですが・・・調べてみます。

[Lhankor_Mhy]

.menu が存在しないようですが、これは無視してよろしいですか？

[mei666]

すみません。追加しました。

Answer 1

hoverでやるなら、inputはいらないですね。
Lhankor_Mhyさんがおっしゃる通り、マウスアウトすると閉じてしまいますが。

<div class="menu">
<div>
<label for="menu_bar07" class="label1"><a href="#top">TOP</a></label>
</div>

<div>
<label for="menu_bar01" class="label1">工事</label>
<ul id="links01">
  <li><a href="#kozi1">工事1</a></li>
  <li><a href="#kozi2">工事2</a></li>
</ul>
</div>

<div>
<label for="menu_bar02" class="label1">機器修理</label>
<ul id="links02">
  <li><a href="#shuri">修理</a></li>
  <li><a href="#shiyou">使用方法</a></li>
</ul>
</div>

<div>
<label for="menu_bar03" class="label1">未分類</label>
<ul id="links03">
  <li><a href="#kiki">機器</a></li>
  <li><a href="#mibunrui">未分類</a></li>
</ul>
</div>
</div>

そして、+セレクタ使った方が、idセレクタとか抜きですっきりするかと

.menu {
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #000;
  line-height: 1;
}

.menu li {
  height: 0;
  max-height: 0;
  overflow-y: hidden;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
}

.menu > div:hover ul > li {
  height: auto;
  max-height: 46px;
  opacity: 1;
}

.label1 {
  display: block;
  margin: 0 0 2px 0;
  padding :12px;
  line-height: 1;
  color :#fff;
  background :#007bbb;
  cursor :pointer;
}

/*
input {
  display: none;
}
*/

.menu ul {
  margin: 0;
  padding: 0;
  background :#f4f4f4;
  list-style: none;
}

Answer 2

まず、兄弟セレクタの使い方を間違っているため、動作しません。

~~同じ親要素の子同士であって、1つ目の要素の後にある2つ目の要素を選択します

一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN~~

#menu_bar01:checked ~ #links01 li

liの親要素はulですから、このセレクタに当てはまる要素はありません。同様の誤りが複数見られます。
解決方法は、ulにスタイルを当ててください。

そして、transition: heightですが、

トランジション効果を適用する CSS プロパティを指定します

transition-property - CSS: カスケーディングスタイルシート | MDN

とあるように、指定したheightプロパティだけに有効になります。
解決方法ですが、transition: allとするのが無難です。

最後に、「特定のメニューをクリックすると開いていたメニューが自動的に閉じる」ですが、「特定のメニュー」を#closeとすると#close:checked ~ ulのようなセレクタで記述できると思いますが、その状態を保持してしまうので、メニューを再度開く際には「特定のメニュー」をもう一度クリックする必要があります。

質問が追加されていたので追記

「マウスオーバーして表示非表示の操作にしたい」ですが、labelにidなどを持たせて:hover擬似クラスを使えばいいかと思います。
ただ、その場合マウスアウトすると非表示に戻ります。

回答に誤りがあったため一部削除しました

コメントを受けて追記

<input type="checkbox" id="menu_bar01" class="accordion" />

↓

<input type="radio" name="menu_bar" id="menu_bar01" class="accordion" />

のように変更すると、一つのアコーディオンニューだけが開いている状態になります。
ただし、一度開くと、（他のセレクタでコントロールしない限り）必ず一つは開いている状態になってしまいます。

Comments

[mei666]

現時点で、クリック操作で開いたり閉じたりはできるんです。li要素をulにすると動かなくなってしまうのですが・・・修正箇所が違うのでしょうか・・

[Lhankor_Mhy]

大変失礼しました。その部分は私の間違いでした。

[mei666]

いえいえすみません。
ほかのメニューをクリックすると開いているメニューを自動的に閉じたいと思うのですが、調べて当てはめてもなかなかうまくいきません。
この作り方自体がよくないのかもしれませんね。

[Lhankor_Mhy]

「ほかのメニューをクリックすると開いているメニューを自動的に閉じたい」とのことですが、ご質問では「特定のメニューをクリックすると開いていたメニューが自動的に閉じる」だったので、てっきり「全部閉じるボタン」のような特定のメニューがあるのかと思っていました。
そういうことではないのですね。

それでしたら type="radio" を使うのがいいかと思います。後ほど追記します。

[Lhankor_Mhy]

追記しました。

[mei666]

すみません。書き方がよくなかったですね。
特定のメニューをクリックし、開く⇒別のメニューをクリックすると、前のメニューが自動的に閉じる、という仕組みを作りたいのです。

[Lhankor_Mhy]

miyabi_takatsukさんのご回答が、お求めのコードにかなり近いと思います。
そちらをお試しになってみてください。