Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2015, 16:06
Новичок на форуме
Отправить личное сообщение для lemoral Посмотреть профиль Найти все сообщения от lemoral
 
Регистрация: 26.03.2015
Сообщений: 5

Выделение активного пункта меню
Имеется такого вида меню:
<div class="nav" id="mnu">		
		<ul class="menu">
			<li><a href="#" onClick="hideShowDiv1();return false;"><h4>Beauty</h4></a></li>
			<li><a href="#" onClick="hideShowDiv2();return false;"><h4>Room</h4></a></li>
			<li><a href="#" onClick="hideShowDiv3();return false;"><h4>Kitchen</h4></a></li>
		</ul>
	</div>

и такие стили:
Код:
.nav{ 
	display: block; 
	float: right; 
	z-index: 10000;
	margin-right: 50px;
}

.nav, .menu, .menu > li, .menu > li > a{ 
	height: 100%; 
	color: #FFFFFF;
	z-index: 10000;
}


.menu > li > a{
	display: block;
	padding: 42px 20px;
	text-decoration: none;
	font-weight: normal;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

.menu > li > a:hover, .menu > li > a:focus{
	background: #3e3e3e;
	color: #b4193b;	
	box-shadow: inset 0px 5px #b4193b;
	padding: 50px 20px 34px;
}


@media only screen and (max-width: 768px){
	.menu{
		background: #262626;;
		border-top: 2px solid #4e131c;
	}
	
	.menu, .menu > li, .menu > li > a{
		height: auto;
	}
	
	.logo{
		display: none;
	}

	.menu > li > a{
		padding: 15px 15px;
	}
	
	.title { 
		text-align: center;
			display: block;
	}

	.menu > li > a:hover, .menu > li > a:focus{
		background: #3e3e3e;
		box-shadow: inset 5px 0px #b4193b;
		padding: 15px 15px 15px 25px;
	}
	

@media only screen and (max-width: 768px){
	
	 #gallery{margin-top: 170px;}

	.menu { 
		display: block; 
		opacity: 1; 
		width: 100%; 
		position: absolute; 
		right: 0; 
		top:100px; 
	}
	.title { 
		text-align: center;
		display: block;
	}
	.menu > li { 
		display: block; 
		width: 100%; 
		margin: 0; 
}
	.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
}

@media only screen and (max-width: 479px){
	.title { 
		text-align: center;
		display: block;
	}

	.logo{
		display: none;
	}


footer {   
  height: 100px;
}
Каким образом можно сделать выделение активного пункта меню не через focus, а с помощью скрипта? Читал разнообразные примеры, не выходит....помогите, пожалуйста!
Ответить с цитированием
  #2 (permalink)  
Старый 13.04.2015, 08:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от lemoral
Каким образом можно сделать выделение активного пункта меню не через focus, а с помощью скрипта?
Например добавлять и убирать некий класс...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 19:14
Выделение активного пункта меню. Нужен совет! kirian222 Элементы интерфейса 14 17.10.2013 02:50
анимация активного пункта меню rustleofstars Элементы интерфейса 0 27.04.2013 17:56
Выделение активного пункта меню blyskawka Javascript под браузер 2 28.10.2012 12:48