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

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

Прошу закрыть одну из тем, заглючил интернет, случайно копию сделала.
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2015, 08:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Может сначала верстку меню и его стиль сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2015, 10:08
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

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

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

laimas,
Верстка готова, скинула только основной код, это же вроде осуществимо средствами js?
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2015, 10:10
Интересующийся
Отправить личное сообщение для Snezhana Посмотреть профиль Найти все сообщения от Snezhana
 
Регистрация: 01.04.2015
Сообщений: 27

Infinity178,
Да, именно такого, большое спасибо!!))
Ответить с цитированием
  #7 (permalink)  
Старый 01.04.2015, 10:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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>
Ответить с цитированием
  #8 (permalink)  
Старый 01.04.2015, 10:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

Snezhana,
http://multi-level-push-menu.make.rs...covermode.html
Ответить с цитированием
  #9 (permalink)  
Старый 01.04.2015, 11:14
Интересующийся
Отправить личное сообщение для Snezhana Посмотреть профиль Найти все сообщения от Snezhana
 
Регистрация: 01.04.2015
Сообщений: 27

Реализовала, большое спасибо, только при скрытии меню, контент остается неподвижен, в чем может быть беда?
Ответить с цитированием
  #10 (permalink)  
Старый 01.04.2015, 11:39
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на 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