Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / растянуть ховер на весь пукнт меню / 8 сообщений из 8, страница 1 из 1
29.01.2013, 01:33
    #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, 09:21
    #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, 10:08
    #38128311
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
растянуть ховер на весь пукнт меню
forward12Хочу чтобы при наведении на пункт меню который реализован через список ul li.
Хотение нужно подкреплять тестовым примером...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
29.01.2013, 12:10
    #38128528
forward12
forward12
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
растянуть ховер на весь пукнт меню
krvsa,

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


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