Выделение пункта меню при наведении

Сообщение сайта

(Сообщение закроется через 3 секунды)

Здравствуйте, гость (

| Вход | Регистрация )

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Выделение пункта меню при наведении

Опции

astromed

Topic Starter сообщение

23.7.2012, 12:58; Ответить: astromed

Сообщение #1

Группа: User
Сообщений: 34
Регистрация: 20.6.2012
Поблагодарили: 0 раз
Репутация:

Добрый день!

Есть менюшка, которая раскрывается подпунктами, так вот у подпунктов получается сделать выделение (смена цвета и подчёркивание) при наведении, а вот у главного пункта не получается, всё уже перепробовал, в чём может быть проблема?

т.е вот так, если навёл на пункт1 он должен выделится, раскроется подменю и пока мы находимся в этом подменю, пункт1 должен быть выделен.

Подскажите, пожалуйста.

Вот ссылка на меню: [attachment=39065:menu.rar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
h1 {
font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
color: #333;
margin: 0;
padding: 5px 0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.5em;
display: block;
color: #fff;
}
.container {width: 970px; margin: 0 auto;}

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative;
font-size: 1.2em;
background: #ccc;

}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #000;
text-decoration: none;
}

ul#topnav li:hover { color: #fff; }

ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
background: none;
color: #000;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline; color: #920000;}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'color': '#1376c9' }); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});
</script>
</head>

<body>

<div class="container">

<br><br><br><br><Br>
<ul id="topnav">
<li style="background: none repeat scroll 0% 0% transparent;">
<a href="#">Пункт1</a>
<span style="display: none;">
<a href="#">Подменю 1</a> |
<a href="#">Подменю 2</a> |
<a href="#">Подменю 3</a>
</span>
</li>

<li style="background: none repeat scroll 0% 0% transparent;">

<a href="#">Пункт2</a>
<span style="left: 72px; display: none;">
<a href="#">Подменю 1</a> |
<a href="#">Подменю 2</a> |
<a href="#">Подменю 3</a>
</span>
</li>

<li style="background: none repeat scroll 0% 0% transparent;">
<a href="#">Пункт3</a>
<span style="left: 145px; display: none;">
<a href="#">Подменю 4</a> |
<a href="#">Подменю 5</a> |
<a href="#">Подменю 6</a>
</span>

</li>
<li style="background: none repeat scroll 0% 0% transparent;">
<a href="#">Пункт4</a>
<span style="left: 218px; display: none;">
<a href="#">Подменю 1</a> |
<a href="#">Подменю 2</a> |
<a href="#">Подменю 3</a>

</span>
</li>
<li style="background: none repeat scroll 0% 0% transparent;"><a href="#">Пункт5</a></li>
</ul>

</div>
</body>
</html>

Ответить с цитированием данного сообщения

Winns Winns 23.7.2012, 13:26; Сообщений: 172 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	23.7.2012, 13:26; Ответить: Winns Сообщение #2
0 Группа: User Сообщений: 172 Регистрация: 7.10.2010 Поблагодарили: 0 раз Репутация: 0	Попробуйте так [JS]$("ul#topnav li").hover(function() { //Hover over event on list item $(this).css('color', '#1376c9'); //Add background color + image on hovered list item $(this).find("span").show(); //Show the subnav $(this).find("a").first().css('color', 'green'); } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav $(this).find("a").first().css('color', 'black'); });[/JS]

astromed Topic Starter astromedTopic Starter 23.7.2012, 13:56; Сообщений: 34 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	Topic Starter 23.7.2012, 13:56; Ответить: astromed Сообщение #3
0 Группа: User Сообщений: 34 Регистрация: 20.6.2012 Поблагодарили: 0 раз Репутация: 0	Winns, не помогло, ничего не изменилось...

Winns Winns 23.7.2012, 16:14; Сообщений: 172 Поблагодарили: 0 раз Репутация: 0 Просмотр профиля	23.7.2012, 16:14; Ответить: Winns Сообщение #4
0 Группа: User Сообщений: 172 Регистрация: 7.10.2010 Поблагодарили: 0 раз Репутация: 0	Должно работать если вы хотели изменить цвет заголовка. Если цвет фона то у вас там ошибка , сразу не заметил. Либо банально jquery не был подключен. http://jsfiddle.net/p2gyR/1/

astromed

Topic Starter сообщение

27.7.2012, 10:39; Ответить: astromed

Сообщение #5

Группа: User
Сообщений: 34
Регистрация: 20.6.2012
Поблагодарили: 0 раз
Репутация:

Winns, спасибо за предложенный вариант, но уже не надо, сделал сам! :)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ. Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п	7	stu999	1758	31.3.2024, 11:19 автор: stu999
Получил странную ссылку при линкбилдинге Как поведет себя поиск при обнаружении странной ссылке?	10	r0mZet	2206	24.10.2022, 19:23 автор: Wachowski
300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!	65	inkon	30395	19.7.2022, 13:41 автор: Funoman
тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе. Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО	71	VIMstat	78513	21.6.2022, 9:38 автор: VIMstat
Отображение нужного блока при клике.	0	bhtml	1675	10.7.2020, 15:18 автор: -bhtml-

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

Текстовая версия

Сейчас: 25.4.2024, 17:58

Дизайн