News

プルメニュー

メニューリンクにカーソルを合わせると下層メニュー（3階層めまで）がプルダウンするメニュー。

ビューポートの横幅が広い時は横並びメニューで、メニュー下にプルダウンする。ビューポートの横幅が狭い時は縦並びメニューで、親リンク下にメニューに重なってプルダウンする。

ul/li要素でマークアップしたメニューの、ul要素にクラスc-pullmenuを付与。
下層メニューがあるli要素にクラスparentを付与し、a要素ではなくbutton要素でリンクを置く。.parent要素の直下に、クラスchildrenを付与したul要素で下層メニューを置く。

<ul class="c-pullmenu"> <li><a href="/about/">About</a></li> <li class="parent"> <button type="button">News</button> <ul class="children"> <li><a href="/news/button/">ボタン</a></li> <li><a href="/news/link/">リンク</a></li> <li class="parent"> <button type="button">アーカイブ一覧</button> <ul class="children"> <li><a href="/news/archivelist/#bloglist">ブログの記事一覧</a></li> <li><a href="/news/archivelist/#menulist">商品一覧</a></li> <li><a href="/news/archivelist/#newslist">ニュース一覧</a></li> </ul> </li> <li><a href="/news/faq/">よくあるご質問</a></li> <li><a href="/news/crumb/">パンくずリスト</a></li> </ul> </li> ︙ </ul>