Скрывающееся меню. Ищу помощи!
 

Всем привет. Почти написала сайт и столкнулась с проблемой, решение которой не нашла в интернете. Суть задачи состоит в том, чтобы при нажатии на верхнюю кнопку у меню, оно скрывалось до определенного размера. Ничего подобного так и не встретила в уроках. Помогите! :cray:

Вот код меню:

<div id="header" class="skel-layers-fixed">

				<div class="top">

					<!-- Logo -->
						<div id="logo">
							<div class="image avatar"><img src="images/avatar.png" alt="" /></div>
						</div>

					<!-- Nav -->

						<div class="menu">
							<div class="menu_block"><a rel="menu1" href="#">КНОПКА МЕНЮ</span></a></div>
						</div>							
							
							<div class="menu_block"><a rel="menu2" href="#"><span>КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu3" href="#"><span>КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu4" href="#"><span>КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu5" href="#"><span>КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu6" href="#"><span>КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu7" href="#"><span>КНОПКА МЕНЮ</span></a></div>
						</div>
						
				</div>
				
				<div class="bottom">
				
				</div>
			
			</div>

#header
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 375px;
		height: 100%;
		background: #313235;
		text-align: left;
		-webkit-box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
		-moz-box-shadow:    5px 0px 10px 0px rgba(50, 50, 50, 0.25);
		box-shadow:         5px 0px 10px 0px rgba(50, 50, 50, 0.25);
		z-index: 3;
	}
	
		#header .top
		{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
	
		#header .bottom
		{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}

		#header .icons
		{
			font-size: 0.8em;
			margin: 0 0 1em 0;
			text-align: center;
		}
		
			#header .icons a
			{
				color: #41484c;
				-moz-transition: color 0.35s ease-in-out;
				-webkit-transition: color 0.35s ease-in-out;
				-o-transition: color 0.35s ease-in-out;
				-ms-transition: color 0.35s ease-in-out;
				transition: color 0.35s ease-in-out;
			}
			
				#header .icons a:hover
				{
					color: #fff;
				}

	#logo
	{
		position: relative;
		margin: 1.25em 1.25em 1.25em 1.25em;
		min-height: 76px;
		cursor: default;
	}
	
		#logo h1
		{
			position: relative;
			color: #fff;
			font-weight: 600;
			font-size: 1em;
			line-height: 1em;
		}
	
		#logo p
		{
			position: relative;
			display: block;
			font-size: 0.6em;
			color: rgba(255,255,255,0.5);
			line-height: 1.25em;
			margin: 0.5em 0 0 0;
		}
		
		#logo .image
		{
			position: absolute;
			left: 0;
			top: 0;
		}
	
	#nav
	{
		font-family: 'Scada', sans-serif;
		font-size: 16pt;
	}
	
		#nav ul
		{
		}
		
			#nav ul li
			{
			}
			
				#nav ul li a
				{
					display: block;
					padding: 0.5em 1.5em 0.5em 1.5em;
					color: #6f7074;
					text-decoration: none;
					outline: 0;
					border: 0;
					-moz-transition: none;
					-webkit-transition: none;
					-o-transition: none;
					-ms-transition: none;
					transition: none;
				}
				
					#nav ul li a span
					{
						position: relative;
						border-bottom: 1px dashed #6f7074;
						font-size: 16pt;
					}
					
						#nav ul li a span:before
						{
							position: absolute;
							left: 0;
							color: #41484c;
							text-align: center;
							width: 1.25em;
							line-height: 1.75em;
						}

					#nav ul li a.active
					{
						background: #595a5d;
						color: #cbcdd3;
					}

						#nav ul li a.active span
						{
							border-bottom: 1px dashed #595a5d !important;
						}

							#nav ul li a.active span:before
							{
								color: #e27689;
							}

Для начала было бы тебе неплохо корректную разметку сделать:

<div class="menu_block"><a rel="menu2" href="#">КНОПКА МЕНЮ</span></a></div> //внутри дива закрывающий тег спан. А где открывающий???? Я что не в курсе новых модных тенденций в верстке?

Во вторых - куда оно должно открываться? В право, как например меню хабры? Сверху?
Опиши вопрос так чтоб другие люди могли понять.

krasovsky,
Ошибку допустила при копировании. Скрываться влево) Сейчас исправлю)

К примеру вот так по простенькому: http://jsfiddle.net/