CSSだけでメニューなどのopen/closeを制御する

ちょっと目からうろこだったのでご紹介しようと思います。
セレクタが若干複雑ですが、Javascriptよりは簡単に作ることができると思います。

まずはサンプルから。（[open]をクリックするとメニューが表示されます）

HTMLとCSSはこんな感じです。open/closeに関係のないスタイル設定はタグに直接入れてます。

HTML

<div>
  <!-- 「閉じる」ボタン -->
  <a id="my-menu-close" href="#my-menu-open" style="background-color:lightpink">[close]</a>

  <!-- 「開く」ボタン -->
  <a id="my-menu-open" href="#my-menu-close" style="background-color:lightgreen">[open]</a>

  <!-- メニューエリア -->
  <div id="my-menu-list">
    <ul style="width:100px; background-color:lightgray">
      <li>メニュー１</li>
      <li>メニュー２</li>
      <li>メニュー３</li>
    </ul>
  </div>
</div>

CSS

#my-menu-close:not(:target) {
 display:none;
}

#my-menu-close:target {
 display:inline;
}

#my-menu-close:target + #my-menu-list {
 display:inline;
}

#my-menu-close:target + #my-menu-open {
 display:none;
}

#my-menu-close:not(:target) ~ #my-menu-list {
 display:none;
}

 補足
注目すべきはopen/closeリンクのhrefに指定されたページ内リンクと、擬似要素:targetです。
[open]をクリックすると、idがmy-menu-closeの要素へページ内遷移します。
擬似要素:targetは「リンクのジャンプ先要素」を表すものなので、このとき初めて#my-menu-close:target...のようなセレクタを指定したスタイルが適用されることになります。

※CSSのセレクタや擬似要素については
http://wp-e.org/2014/05/20/2420/

ただし、基本的にはページ内遷移の動きなので、スクロール位置が変わったりする副作用があります。

・・・万能ではないですね。