CSSのみでトグル式メニューを作る。

JavaScript(jQuery)は使わずにトグル式メニューを作りました。
動作は、http://jsfiddle.net/junya_5102/tL4j9zmo/2/ で確認できます。

html

<div id="side-menu">
  <input id="side-menu-toggle" type="checkbox">
  <label class="toggle-switch" for="side-menu-toggle">side-menu</label>
  <ul class="menu-list">
    <li class="list-item"><a href="#">アイテム1</a></li>
    <li class="list-item"><a href="#">アイテム2</a></li>
    <li class="list-item"><a href="#">アイテム3</a></li>
    <li class="list-item"><a href="#">アイテム4</a></li>
  </ul>
</div>

CSS

/* トグルスイッチのデザイン */
.toggle-switch{
  display: block;
  width: 12em;
  font-size: 1em;
  background: #55BEFC;
  box-shadow: 1px 0 3px 0 #000;
  text-align: center;
}

#side-menu-toggle{
  display: none;
}

/* 非チェック時の.menu-list */
#side-menu-toggle:not(:checked) ~ .menu-list{
  width: 0;
}

/* チェック時の.menu-list */
#side-menu-toggle:checked ~ .menu-list{
  width: 12em;
}

.menu-list{
  display: inline-block;
  padding: 0;
  margin: 0;
  background: #F0F0F0;
  box-shadow: 1px 1px 3px 0 #000;
  overflow: hidden;

  /* menu表示時のアニメーション */
  transition: 1s;
}

.menu-list > .list-item{
  list-style: none;
}

.menu-list > .list-item a{
  display: block;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  /* 単一行で表示 */
  white-space: nowrap;
  /* リンク下線非表示 */
  text-decoration: none;
  outline: none;
}

/* css4  */
.menu-list > .list-item a:-webkit-any-link{
  color: #000;
}

.menu-list > .list-item a:-moz-any-link{
  color: #000;
}

/* any-link 未対応ブラウザ用 */
.menu-list > .list-item a:link,
.menu-list > .list-item a:visited{
  color: #000;
}

/* リンクホバー時 */
.menu-list > .list-item a:hover{
  background: #303030;
  color: #fff;
}

メニュー表示アニメーション

メニューを閉じる際のアニメーションは省略しています。

左から右へ

/* 非チェック時の.menu-list */
#side-menu-toggle:not(:checked) ~ .menu-list{
  width: 0;
}

/* チェック時の.menu-list */
#side-menu-toggle:checked ~ .menu-list{
  width: 12em;
}

.menu-list{
  display: inline-block;
  padding: 0;
  margin: 0;
  background: #F0F0F0;
  box-shadow: 1px 1px 3px 0 #000;
  overflow: hidden;

  /* menu表示時のアニメーション */
  transition: 1s;
}

上から下へ

/* 非チェック時の.menu-list */
#side-menu-toggle:not(:checked) ~ .menu-list{
  height: 0;
}

/* チェック時の.menu-list */
#side-menu-toggle:checked ~ .menu-list{
  /* コンテンツ数によって調整 */
  height: 12em;
}

.menu-list{
  display: inline-block;
  width: 12em;
  padding: 0;
  margin: 0;
  background: #F0F0F0;
  box-shadow: 1px 1px 3px 0 #000;
  overflow: hidden;

  /* menu表示時のアニメーション */
  transition: 1s;
}

対応ブラウザ

Chrome , Firefox , Safari