CSS

【CSS】レスポンシブ対応のCSSオフキャンバス/フライアウトメニューFlyout Menu

January 27, 2018
Pure CSS Responsive Flyout Menu

Flyout Menuはモバイルビューポートでオフキャンバスメニューとして動作し、デスクトップ上はフライアウトとして動作するCSSメニュー。

Usage

inputcheckboxmenu-triggerクラスを加える。これがハンバーガーアイコンのトリガーになります。

Example

<input type="checkbox" class="menu-trigger">
<ul class="menu" role="menu">
    <li class="start">
        <a href="#">
            <svg preserveAspectRatio="xMidYMid meet" focusable="false" viewBox="-5 -5 34 34">
                <g><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"></path></g>
            </svg>
        </a>
    </li>
    <li>
        <a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a>
                        <ul>
                            <li><a href="#">Level 4</a></li>
                            <li><a href="#">Level 4</a></li>
                            <li><a href="#">Level 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    [...]
</ul>
<div class="overlay"></div>

MIT