Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2015, 07:29
Интересующийся
Отправить личное сообщение для Snezhana Посмотреть профиль Найти все сообщения от Snezhana
 
Регистрация: 01.04.2015
Сообщений: 27

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

Вот код меню:

<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;
							}
Изображения:
Тип файла: jpg Безымянный.JPG (9.0 Кб, 2 просмотров)
Тип файла: jpg Безымянный 1.JPG (2.5 Кб, 1 просмотров)

Последний раз редактировалось Snezhana, 01.04.2015 в 14:12.
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2015, 12:29
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

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

Во вторых - куда оно должно открываться? В право, как например меню хабры? Сверху?
Опиши вопрос так чтоб другие люди могли понять.
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2015, 14:11
Интересующийся
Отправить личное сообщение для Snezhana Посмотреть профиль Найти все сообщения от Snezhana
 
Регистрация: 01.04.2015
Сообщений: 27

krasovsky,
Ошибку допустила при копировании. Скрываться влево) Сейчас исправлю)
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2015, 08:48
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Ищу меню, помогите кто знает. McLotos Элементы интерфейса 2 18.11.2010 06:48