ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / растянуть ховер на весь пукнт меню
8 сообщений из 8, страница 1 из 1
растянуть ховер на весь пукнт меню
    #38128129
forward12
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
forward12
Участник
Всем привет.
Хочу чтобы при наведении на пункт меню который реализован через список ul li.
Сработовало событие онховер. Т.е. менялся текст линка и можно было залить другой фон в список.
http://colchonight.com/ - вот тут работает.
Нашел код в ксс
Код: css
1.
2.
3.
4.
5.
6.
7.
ul.menu li ul  a:hover{
background:url(nav-a.active.png) left top repeat;
	text-decoration:none;
	color:#fff;


}


Перенес на свой сайт не подхватывает этот код.
Товарищу звякнул он говорит надо на ява скрипте это событие присваивать динамически.
...
Рейтинг: 0 / 0
29.01.2013, 01:33
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38128236
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
forward12надо на ява скрипте это событие присваивать динамически. Большой выбор меню на сайте по JavaScript
 
Оттуда я скачал вот такой вариантик (текст кажется большим, но там все просто)
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<!DOCTYPE html>
<html>
<HEAD>
<script language="JavaScript">
// big() makes selected layer longer (height property)
function big(lyr) {
document.all[lyr].style.height='180px'; }

/* small() makes selected layer shorter (height property)*/
function small(lyr) {
document.all[lyr].style.height='32px'; }

/* start() makes all layers short to start with (height property)*/
function start() {
document.all.Layer1.style.height='32px';
document.all.Layer2.style.height='32px';
document.all.Layer3.style.height='32px'; }
</script>
</HEAD>

<BODY onLoad="start()">

<div id="Layer1" style="position:absolute; width:155px; height:180px; z-index:1; left: 74px; top: 38px; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')"> 
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
    <a href="menu1.html">Menu 1</a>
    <br>
    <br>
    <a href="link1.html">Link 1</a><br>
    <br>
    <a href="link2.html">Link 2</a><br>
    <br>
    <a href="link3.html">Link 3</a><br>
    <br>
    <a href="link4.html">Link 4</a></font>
  </div>
</div>

<div id="Layer2" style="position:absolute; width:155px; height:180px; z-index:1; left: 236px; top: 38px; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')"> 
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
    <a href="menu2.html">Menu 2</a>
    <br>
    <br>
    <a href="link5.html">Link 5</a><br>
    <br>
    <a href="link6.html">Link 6</a><br>
    <br>
    <a href="link7.html">Link 7</a><br>
    <br>
    <a href="link8.html">Link 8</a></font>
  </div>
</div>

<div id="Layer3" style="position:absolute; width:155px; height:180px; z-index:1; left: 398px; top: 38px; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')"> 
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
    <a href="menu3.html">Menu 3</a>
    <br>
	<br>
    <a href="link9.html">Link 9</a><br>
    <br>
    <a href="link10.html">Link 10</a><br>
    <br>
    <a href="link11.html">Link 11</a><br>
    <br>
    <a href="link12.html">Link 12</a></font>
  </div>
</div>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body>
</html>


На всякий случай
 
Без JavaScript - 1
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>hover</title>
  <style type="text/css">
   UL {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   LI UL {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
   }
   LI A {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;	/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
   }
   LI A:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */
   }
   LI:hover UL { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   .brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>

  <ul id="menu">
   <li><a href="russian.html">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.html">Бефстроганов</a></li> 
     <li><a href="linkr2.html">Гусь с яблоками</a></li> 
     <li><a href="linkr3.html">Крупеник новгородский</a></li> 
     <li><a href="linkr4.html" class="brd">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.html">Вареники</a></li> 
     <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.html">Капустняк черниговский</a></li> 
     <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li> 
  </ul>

 </body>
</html>

 
Без JavaScript - 2
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
ul#hmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
  	list-style: none;
	background: #565766;
  	height: 28px;
	font: bold 12px/28px Verdana, Arial;
}

ul#hmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline;
	list-style: none;
	position: relative;
	height: 28px;
}

ul#hmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 28px;
	left: 0;
}

ul#hmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#hmenu ul li {
	width: 160px;
	float: left;
	display: block !important;
	display: inline;
}

/* Main Menu */
ul#hmenu a {
	border: 0px;
	padding: 0 6px;
	float: none !important;
	float: left;
	display: block;
	background: #565766;
	color: #FFFFFF;
	font: bold 12px/28px Verdana, Arial;
	text-decoration: none;
	height: auto !important;
	height: 1%;
}

/* Main Menu Hover */
ul#hmenu a:hover,
ul#hmenu li:hover a,
ul#hmenu li.iehover a {
	background: #808298;
	color: #FFFFFF;
}

/* Second Menu */
ul#hmenu li:hover li a,
ul#hmenu li.iehover li a {
	border-top: 1px solid #FFFFFF;
	float: none;
	background: #565766;
	color: #FFFFFF;
}

/* Second Menu Hover */
ul#hmenu li:hover li a:hover,
ul#hmenu li:hover li:hover a,
ul#hmenu li.iehover li a:hover,
ul#hmenu li.iehover li.iehover a {
	border-top: 1px solid #FFFFFF;
	background: #808298;
	color: #FFFFFF;
}

ul#hmenu ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}

ul#hmenu li:hover ul ul,
ul#hmenu li.iehover ul ul {
	display: none;
}

ul#hmenu li:hover ul,
ul#hmenu ul li:hover ul,
ul#hmenu li.iehover ul,
ul#hmenu ul li.iehover ul {
	display: block;
} 
</style>
<title></title>
</head>

<body topmargin="10" leftmargin="10">

<ul id="hmenu" style="width:400px;">
	<li><a href="#">About</a>
		<ul>
			<li><a href="#">Contacts</a></li>
			<li><a href="#">Sitemap</a></li>
		</ul>
	</li>
	<li><a href="#">News</a></li>
	<li><a href="#">Products</a>
		<ul>
			<li><a href="#">Group #1</a></li>
			<li><a href="#">Group #2</a></li>
			<li><a href="#">Group #3</a></li>
			<li><a href="#">Group #4</a></li>
			<li><a href="#">Group #5</a></li>
		</ul>
	</li>
	<li><a href="#">Support</a>
		<ul>
			<li><a href="#">Download center</a></li>
			<li><a href="#">FAQ</a></li>
		</ul>
	</li>
</ul>
</body>

</html>

...
Рейтинг: 0 / 0
29.01.2013, 09:21
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38128311
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
forward12Хочу чтобы при наведении на пункт меню который реализован через список ul li.
Хотение нужно подкреплять тестовым примером...
...
Рейтинг: 0 / 0
29.01.2013, 10:08
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38128528
forward12
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
forward12
Участник
krvsa,

Дело частично усугубляется применением джумлы. Т.е. там не чистый хтмл код. А код сгенеренный джумлой. Там есть своя менюшка на джей квери. А я уже фиксю стили самого шаблона. Тестогвый пример залью на фалообменник или на хостинг.
...
Рейтинг: 0 / 0
29.01.2013, 12:10
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38128626
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
forward12там не чистый хтмл код
Браузеру пофиг кто гененрт хтмл... Он как раз работает с "чистым" хтмл.
...
Рейтинг: 0 / 0
29.01.2013, 13:06
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38128631
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
forward12Тестогвый пример залью на фалообменник или на хостинг.
А это только за барабульки...
Хотя может и найдутся альтруисты.
...
Рейтинг: 0 / 0
29.01.2013, 13:07
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38129424
forward12
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
forward12
Участник
http://rb2.vvbooks.net/ - залил пример вот сюда.
...
Рейтинг: 0 / 0
29.01.2013, 18:12
| Ответить | Цитировать | Написать  
растянуть ховер на весь пукнт меню
    #38129726
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
forward12 http://rb2.vvbooks.net/ - залил пример вот сюда.
Это по твоему тестовый пример?
1000р на телефон, тогда можно начать смотреть и разговаривать...
...
Рейтинг: 0 / 0
29.01.2013, 21:57
| Ответить | Цитировать | Написать  
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / растянуть ховер на весь пукнт меню
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&tid=1448793]:
 0ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 31ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 230ms
total:  347ms
созд. / загр.: 347ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]