html - Web サイトを下にスライドする CSS ベースのメニュー

Question

メニューの下の Web サイトを下にスライドし (開いている場合)、メニューを閉じると Web サイトを上にスライドする CSS ベースのメガ メニューを提案できますか。または、このタイプのメニューを構築する方法。

前もって感謝します

Answer 1

cssトランジションを使用できます。ただし、JavaScriptがないと、マウスクリックでアニメーションをトリガーすることはできません。

.slidemenu
{
    height: 0;
    background: red;
    transition: height 1s ease 0s;
    overflow: hidden;
}

.slidedown
{
    height: 20px;
}

メニューにクラスを追加する.slidedownと、下にスライドします。取り外すとき-上にスライドします

http://jsfiddle.net/TXkWB/

更新（2014年3月20日）：

css（http://jsfiddle.net/RMfSB/）のみを使用してメニューを開く可能性があります。フォーカスを緩めるとメニューが閉じるのでおそらく役に立たないでしょうが、それは機能します。