• かちびと.net

    CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニューのご紹介。JavaScriptを使用せず、ドロップダウンとアコーディオンでスイッチします。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSS3で作る、ドロップダウン⇔アコーディオンの切り替えをするレスポンシブWebデザイン対応のグローバルメニュー

スポンサーリンク

JSを使わず、CSSのみでドロップダウン
メニューとアコーディオンメニューを
特定のブレークポイントで切り替える
レスポンシブWebデザイン対応のグロー
バルメニューのサンプルです。これは
なかなか良いのでは。

JS不要で、ドロップダウン⇔アコーディオンをスマフォ閲覧時などに切り替えるグローバルメニューのサンプル。

Responsive CSS3 Drop-Down to Accordion


大きい画面だとマウスホバーによるドロップダウンに、小さい画面だとタップ(クリック)で開くアコーディオンにスイッチします。

Responsive CSS3 Drop-Down to Accordion(表示の確認はresponsivepxが便利です。)

マークアップ

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

  .drop-down:hover .sub-menu {
    max-height: 260px;
  }  

通常時(ドロップダウン)は:hoverとmax-heightで処理

  .sub-menu {
    max-height: 0;
    overflow: hidden;
  }
  .drop-down :focus + .sub-menu {
    max-height: 260px;
  }

スマフォ等ではMedia Queriesと:focus、max-heightで処理してるみたいです。

<ul class="dropcordion">
	<li class="first"><a href="#">List 01</a></li>
		<li class="drop-down">
			<span tabindex="1">List 02</span>
		<ul class="sub-menu">
			<li><a href="#">List 02-01</a>
			<li><a href="#">List 02-02</a>
			<li class="last"><a href="#">List 02-03</a>
		</ul>
		</li>
	<li class="drop-down">
		<span tabindex="2">List 03</span>
		<ul class="sub-menu">
			<li><a href="#">List 03-01</a>
			<li class="last"><a href="#">List 03-02</a>
		</ul>
	</li>
	<li><a href="#">List 04</a></li>
	<li class="last"><a href="#">List 05</a></li>
</ul>

マークアップは普通ですが、スマフォ時はタップでアコーディオンを開く形となりますので親要素にリンクは貼れません。

あとはIE対策にJSでドロップダウンを作ってあげたり、リンクの無い親要素にその旨を明示してあげる等をしてあげればいい感じに仕上がりそうですね。これはこれでアイデアの一つとして覚えておくと良いかもです。

URL :
TRB :

Ads

Posts

Contact

Services