Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2013, 14:12
Новичок на форуме
Отправить личное сообщение для seoguru Посмотреть профиль Найти все сообщения от seoguru
 
Регистрация: 27.02.2012
Сообщений: 8

Подсветка родительского пункта меню
Всем привет,

Ребята подскажите пожалуйста.

Есть меню и при выборе дочернего пункта, текст родительского пункта перестает подсвечиваться (именно сам текст который меняется с помощью "a:hover"). Хотелось бы чтобы когда дочерние пункты активны, то и родительский пункт оставался подсвеченным.

Вот сам код html:

<ul id="menu">
 	<li>
 		<a href="#">About us<span>Learn more about BestHost</span></a>
 		<ul>
			<li><a href="#">Our team</a></li>
            <li><a href="#">Our datacenter</a></li>
            <li><a href="#">Our Blog</a></li>
		</ul>
	</li>
</ul>



Вод код css:

#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
}
	
#menu li {
	list-style: none;
	float: left;
	height: 84px;
	padding: 0;
	margin: 0 0 0 10px;
	width: 206px;
	text-align: center;
	background: #78c2e6;
	position: relative;
}
	
#menu li:hover {
	background: #91c46d;
}

#menu li a {
	display: table-cell;
	width: 206px;
	height: 84px;
	color: #212121;
 	text-decoration: none;
	text-transform:uppercase;
	text-align:center;
	vertical-align:middle;
 		
	font-size: 16px;
}

#menu li a:hover {
	color: #fff;
}

#menu li span {
	position: relative;
    display: block;
	text-align: center;
	vertical-align:middle;
	text-decoration: none;
	text-transform:none;
	font-size: 13px;
  
}
	
#menu li ul {
	list-style: none;
	padding: 10px 0 0 0;
	margin: 0;
	width: 206px;
	display: none;
	position: absolute;
	left: 0;
	top: 84px;
}
	
#menu li ul li {
	float: none;
	width: 206px;
	height: 44px;
	margin: 0;
	text-align: center;
	background: #91c46d;
	}
	
#menu li ul li:hover {
	background: #6ab636;
}
	
#menu li ul li a {
	display: table-cell;
	width: 206px;
	height: 44px;
	color: #fff;
	text-decoration: none;
    text-transform: none;
	text-align:center;
    vertical-align:middle;
	font-size: 16px;
}
	
#menu li:hover ul {
	display: block;
}


Можно ли как-то яваскриптом это подправить?
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2013, 14:18
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от seoguru
то и родительский пункт оставался подсвеченным.
Нет, ток в старых браузерах или в Опера
Создайте для a:hover background-color (или border) - подсвечивайте его при наведении

Есть еще идея, запоминать все переходы в Куки(если в меню все ссылки на текущий сайт)
И, при загрузке страницы тестим куки и добавляем класс активности к нужным пунктам

Последний раз редактировалось Deff, 23.01.2013 в 14:36.
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2013, 14:26
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,310

Сообщение от seoguru
именно сам текст который меняется с помощью "a:hover"
А для кого, извиняюсь, он является "родительским"?
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2013, 14:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,310

Сообщение от seoguru
Хотелось бы чтобы когда дочерние пункты активны, то и родительский пункт оставался подсвеченным.
Тогда нужно выбирать "правильного" родителя!
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#menu {
	padding: 0;
	margin: 0;
	font-size: 100%;
}
	
#menu li {
	list-style: none;
	float: left;
	height: 84px;
	padding: 0;
	margin: 0 0 0 10px;
	width: 206px;
	text-align: center;
	background: #78c2e6;
	position: relative;
}
	
#menu li:hover {
	background: #91c46d;
}

#menu li a {
	display: table-cell;
	width: 206px;
	height: 84px;
	color: #212121;
 	text-decoration: none;
	text-transform:uppercase;
	text-align:center;
	vertical-align:middle;
 		
	font-size: 16px;
}

#menu li:hover a {
	color: #fff;
}

#menu li span {
	position: relative;
    display: block;
	text-align: center;
	vertical-align:middle;
	text-decoration: none;
	text-transform:none;
	font-size: 13px;
  
}
	
#menu li ul {
	list-style: none;
	padding: 10px 0 0 0;
	margin: 0;
	width: 206px;
	display: none;
	position: absolute;
	left: 0;
	top: 84px;
}
	
#menu li ul li {
	float: none;
	width: 206px;
	height: 44px;
	margin: 0;
	text-align: center;
	background: #91c46d;
	}
	
#menu li ul li:hover {
	background: #6ab636;
}
	
#menu li ul li a {
	display: table-cell;
	width: 206px;
	height: 44px;
	color: #fff;
	text-decoration: none;
    text-transform: none;
	text-align:center;
    vertical-align:middle;
	font-size: 16px;
}
	
#menu li:hover ul {
	display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul id="menu">
 	<li>
 		<a href="#">About us<span>Learn more about BestHost</span></a>
 		<ul>
			<li><a href="#">Our team</a></li>
            <li><a href="#">Our datacenter</a></li>
            <li><a href="#">Our Blog</a></li>
		</ul>
	</li>
</ul>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2013, 14:32
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,310

Deff, ссылка сама себе родитель и дочь?
Ответить с цитированием
  #6 (permalink)  
Старый 23.01.2013, 14:33
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,310

Сообщение от seoguru
<a href="#">About us<span>Learn more about BestHost</span></a>
Эта ссылка родитель только для span...
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2013, 14:36
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Я чот на :link циклонулсо (с hover
Ответить с цитированием
  #8 (permalink)  
Старый 23.01.2013, 15:03
Новичок на форуме
Отправить личное сообщение для seoguru Посмотреть профиль Найти все сообщения от seoguru
 
Регистрация: 27.02.2012
Сообщений: 8

посмеялся ...

Вот есть у нас родительский пункт "<a href="#">About us</a>"

Когда опускаешся на дочерние пункты, то естественно курсор сдвигаеш вниз и a:hover перестает работать, таким образом текст в родительском блоке принимает исходный цвет (черный). Можно ли как-то это обойти, чтобы пока работаеш с дочерними пунктами цвет текста в родительском пункте оставался белый (как при наведении)?

Спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 24.01.2013, 09:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,310

Сообщение от seoguru
Вот есть у нас родительский пункт
Это какое-то новое понятие "родительский пункт", "дочерний пункт"?
Почитай про ДОМ - там четко расписано про родительские и дочерние элементы.

Сообщение от seoguru
Можно ли как-то это обойти
Как это сделать я уже показал в своем примере выше...
Ответить с цитированием
  #10 (permalink)  
Старый 24.01.2013, 12:15
Новичок на форуме
Отправить личное сообщение для seoguru Посмотреть профиль Найти все сообщения от seoguru
 
Регистрация: 27.02.2012
Сообщений: 8

Сообщение от ksa Посмотреть сообщение
Это какое-то новое понятие "родительский пункт", "дочерний пункт"?
Почитай про ДОМ - там четко расписано про родительские и дочерние элементы.


Как это сделать я уже показал в своем примере выше...
Сори, провтыкал. Ошибку в стилях понял. Спасибо шеф
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открыть слайд (раздел) текущего пункта меню Demath Элементы интерфейса 8 18.07.2012 01:49
Подсветка выделенного элемента меню ajax-сайта crayday AJAX и COMET 0 11.05.2012 11:25
Подсветка того пункта меню, где мы сейчас находимся. Как? pro_xaoc Элементы интерфейса 11 24.08.2011 12:45
Как в общем меню для всех страниц поменять класс определенного пункта в зависимости о phenom Элементы интерфейса 2 08.04.2011 10:09
Событие onClick при нажатии пункта меню Lex4e Общие вопросы Javascript 1 25.06.2010 17:31