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

Всем привет. Почти написала сайт и столкнулась с проблемой, решение которой не нашла в интернете. Суть задачи состоит в том, чтобы при нажатии на верхнюю кнопку у меню, оно скрывалось до определенного размера. Ничего подобного так и не встретила в уроках. Помогите! :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></a></div>
							<div class="menu_block"><a rel="menu3" href="#">КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu4" href="#">КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu5" href="#">КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu6" href="#">КНОПКА МЕНЮ</span></a></div>
							<div class="menu_block"><a rel="menu7" href="#">КНОПКА МЕНЮ</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;
							}

Прошу закрыть одну из тем, заглючил интернет, случайно копию сделала.

Может сначала верстку меню и его стиль сделать?

demo: http://learn.javascript.ru/play/O0SlFb

Такого формата:?

laimas,
Верстка готова, скинула только основной код, это же вроде осуществимо средствами js?

Infinity178,
Да, именно такого, большое спасибо!!))

Snezhana, сделать можно все или почти все, но вы показываете html-структуру (причем со странностями) на div, а стили совсем для иного. И что прикажете? А управлять шириной родителя посредством JS можно просто:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
div {
    width: 300px;
    height: 100px;
    border: 1px solid #f00;
}
</style>
<script> 
$(function() {
    var o = $('#nav').find('li').click(function(){  
        o.animate({width : o.width()<300 ? 300 : 100});
    }).end();
});
</script>
</head> 
<body>
<div id="nav">
<ul>
<li>111</li>
<li>222</li>
</ul>
</div>
</body> 
</html>

Snezhana,
http://multi-level-push-menu.make.rs...covermode.html

Реализовала, большое спасибо, только при скрытии меню, контент остается неподвижен, в чем может быть беда?

1. Смотря как реализована анимация
2. HTML структура
3. Контент где?