[Snezhana]

laimas,
Вот подробный код. Большое спасибо за помощь.

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

				<div class="top">

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

					<!-- Nav -->

						<div class="menu_group">
							<div class="menu_group_block"><a rel="sources" href="#"><span style="margin-left: 30px;">ИСТОЧНИКИ</span></a></div>
									<div class="popup_sources sources popup">
										<a class="close" href="#">Close</a>
											<h2>ИСТОЧНИКИ</h2>
										<a href="#" class="button_save"/>СОХРАНИТЬ</a>
							</div>							
							
							<div class="menu_group_block"><a rel="music" href="#"><span style="margin-left: 30px;">МУЗЫКА</span></a></div>
							<div class="menu_group_block"><a rel="films" href="#"><span style="margin-left: 30px;">ФИЛЬМЫ</span></a></div>
							<div class="menu_group_block"><a rel="authors" href="#"><span style="margin-left: 30px;">АВТОРЫ</span></a></div>
							<div class="menu_group_block"><a rel="download" href="#"><span style="margin-left: 30px;">СКАЧАТЬ</span></a></div>
							<div class="menu_group_block"><a rel="back" href="#"><span style="margin-left: 30px;">НАЗАД</span></a></div>
							<div class="menu_group_block_normal"><a href="#tobeginsearch"><span style="color: #e58627; margin-left: 30px;">НАЧАТЬ ПОИСК</span></a></div>
							<div class="menu_group_block_normal"><a href="#comments"><span style="margin-left: 30px;">КОММЕНТАРИИ</span></a></div>
							<div class="menu_group_block"><a rel="digest" href="#"><span style="margin-left: 30px;">ДАЙДЖЕСТ</span></a></div>
						</div>
						
				</div>
				
				<div class="bottom">
				
				</div>
			
			</div>
			
		<script>
			jQuery(function($){
				$(document).on('click','.btn_close', function(){
					$(this).closest("#header").animate({ width: "90" },300);
					$('.menu').fadeOut();
					$(this).removeClass('btn_close').addClass('btn_open');
				return false;
				});
				$(document).on('click','.btn_open', function(){
					$(this).closest("#header").animate({ width: "20%" },300);
					$('.menu').fadeIn();
					$(this).removeClass('btn_open').addClass('btn_close');
				return false;
				});
			});
   
		</script>

		<!-- Header Right -->

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

				<div class="block-messages">
				</div>
			
			</div>

		<!-- Top -->
			<div id="top">
				<div class="toper">
				</div>
			</div>

		<!-- Main -->
	
		<div id="main">
					
				<!-- Time -->
					<section id="info" class="info">
					</section>

				<!-- Content -->
					<section id="content" class="content">
						<div class="container">

							<div class="main-border">
							</div>

						</div>
					</section>

.menu_group {
	}

	.menu_group_block {
	display: block;
	font-family: Scada, sans-serif;
	font-size: 16pt;
	color: #6f7074;
	}

	.menu_group_block a {
	display: inline-block;
	width:100%;
	padding-top: 15px;
	padding-bottom: 15px;
	}

	.menu_group_block a:hover, .menu_group_block a:focus, .menu_group_block a:active {
	width:100%;
	background: #595a5d;
	color: #cbcdd3;
	padding-top: 15px;
	padding-bottom: 15px;
	}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/
	
	#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;
				}

/*********************************************************************************/
/* Header-Right                                                                  */
/*********************************************************************************/

	#header-right
	{
		position: fixed;
		margin-top: 74px;
		top: 0;
		right: 0;
		width: 375px;
		height: 100%;
		background: #e9ebee;
		border-left: 1px solid #d8dadd;
		text-align: left;
		z-index: 1;
	}
	
		#header-right .bottom
		{
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100%;
		}

		#header-right .icons
		{
			font-size: 0.8em;
			margin: 0 0 1em 0;
			text-align: center;
		}
		
			#header-right .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-right .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;
							}

/*********************************************************************************/
/* Top                                                                          */
/*********************************************************************************/

	#top
	{
		width: 100%;
		height: 74px;
		background-color: #dbdddf;
		border-bottom: 1px solid #acaeb0;
		position: fixed;
		top: 0;
		z-index: 2;
	}

	.toper
	{
		float: right;
		width: 80%;
	}

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/

	#main
	{
		margin-top: 74px;
		margin-left: 420px;
		margin-right: 420px;
		height: 810px;
	}
	
		#main > section
		{
			margin: 0;
			overflow: hidden;
			padding: 0.5em 0;
			text-align: left;
		}

			#main > section.dark
			{
				color: #ddd;
				color: rgba(255,255,255,0.75);
			}

				#main > section.dark h2,
				#main > section.dark h3,
				#main > section.dark h4,
				#main > section.dark h5,
				#main > section.dark h6
				{
					color: inherit;
				}

				#main > section.dark strong,
				#main > section.dark a
				{
					color: #fff;
					border-color: inherit;
				}

					#main > section.dark a:hover
					{
						border-bottom-color: rgba(255,255,255,0);
					}

			#main > section.cover
			{
				padding: 0;
				background-size: cover;
				background-position: center center;
			}
		
			#main > section.info
			{
				background-color: #e9ebee;
			}

			#main > section.content
			{
				background-color: #e9ebee;
			}
			
			.main-border {
				border-bottom: 1px solid #d8dadd;
				padding-top: 10px;
			}