アコーディオンと横スライド

jQuery UI

jQuery UIからAccordionのソースをDL
UI Core: Core, Widget, Mouseにチェック
Interactions: Draggable、Widgets: Accordionにチェックでok

アコーディオン2

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アコーディオンメニュー</title>
<link rel="stylesheet" href="style.css" type="text/css" media="print, screen">
<script src="jquery-1.7.2.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script>
$(function() {
	$( 'ul.menu' ).hide();
	$( 'div.category' ).click(function() {
		$( 'ul.menu' ).slideUp();
		if($( '+ul', this).css( 'display') == 'none') {
			$( '+ul', this).slideDown();
		}
	});
});
</script>
</head>
<body>
　<div id="container">
  <ul class="navi">
  <li>
  <div class="category">食事</div>
  <ul class="menu">
  <li><a href="#">ピラフ</a></li>
  <li><a href="#">カレー</a></li>
  <li><a href="#">パスタ</a></li>
  <li><a href="#">オムライス</a></li> 
  <li><a href="#">サンドウィッチ</a></li>
  <li><a href="#">日替わりランチ</a></li>
  </ul>
  </li>
  <li>
  <div class="category">デザート</div>
  <ul class="menu">
  <li><a href="#">アイス</a></li>
  <li><a href="#">クレープ</a></li>
  <li><a href="#">ケーキ</a></li>
  <li><a href="#">マフィン</a></li>
  <li><a href="#">パフェ</a></li>
  </ul>
  </li>
  <li>
  <div class="category">ソフトドリンク</div>
  <ul class="menu">
  <li><a href="#">コーヒー</a></li>
  <li><a href="#">紅茶</a></li>
  <li><a href="#">オレンジジュース</a></li>
  <li><a href="#">ソーダ</a></li> 
  <li><a href="#">ココア</a></li>
  <li><a href="#">ミルク</a></li>
  </ul>
  </li>
  <li>
  <div class="category">アルコール</div>
  <ul class="menu">
  <li><a href="#">ビール</a></li>
  <li><a href="#">日本酒</a></li>
  <li><a href="#">焼酎</a></li>
  <li><a href="#">ウィスキー</a></li> 
  <li><a href="#">ワイン</a></li>
  <li><a href="#">梅酒</a></li>
  </ul>
  </li>
  </ul>
  </div>
</body>
</html>

CSS

@charset "UTF-8";

body {
	background-color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container {
	margin: 50px;
}
ul.navi {
	width: 220px;
	margin: 0;
}
ul.navi, ul.menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
div.category {
	color: #fff;
	margin: 2px;
	padding: 0 1em;
	height: 40px;
	line-height: 40px;
	background-color: #FC6;
	cursor: pointer;
}
ul.menu a {
	display: block;
	height: 35px;
	line-height: 35px;
	color: #164158;
	padding: 0 1em;
}
ul.menu li {
	background-color: #FFC;
}
a {
	text-decoration: none;
}

横スライド

学校でできなかったので、先生に頂いたデータに写真を入れてCSSを微調整しました。
ここで実物が見られます