| |
|
|
| | Помогите плиз с меню, чтоб при наведении на ссылку появлялся фон у меню, картинку прикрепил как должно быть при наведении
Код меню
<td class="menu">
<ul>
<li><a href="">О департаменте грузовых автошин</a><div></div></li>
<li><a href="">Продукция</a><div></div></li>
<li class="active"><a href="">Сервисное обслуживание</a><div></div></li>
<li><a href="">Спецпредложение</a><div></div></li>
<li><a href="">Газета "22,5 дюйма"</a><div></div></li>
</ul>
|
| |
| |
|
|
| |
|
|
| |
для: Spyder
(02.11.2007 в 10:07)
| | | Картинка странная - ничего не видно :) | |
| |
|
|
| |
|
|
| |
для: sim5
(02.11.2007 в 10:16)
| | | Ой забыл прикрепить!:) | |
| |
|
|
| |
|
|
| |
для: Spyder
(02.11.2007 в 10:25)
| | | onmouseover="document.getElementById('link_1').className='active';" onmouseout="document.getElementById('link_1').className='';" | |
| |
|
|
| |
|
|
| |
для: elenaki
(02.11.2007 в 10:34)
| | | Что то неработает
<script type="text/javascript">
onmouseover="document.getElementById('link_1').className='active';" onmouseout="document.getElementById('link_1').className='out';"
</script>
<body>
<ul style="list-style:none;" id="nav">
<li class="active"><a href="">Menu</a><div class="divr"></div></li>
<li><a href="">Menu</a><div></div></li>
</ul>
|
Я правильно сделал? | |
| |
|
|
| |
|
|
| |
для: Spyder
(02.11.2007 в 10:52)
| | | неправильно. каждому li надо присвоить id и код вставлять в каждый li, меняя соответственно id | |
| |
|
|
| |
|
|
| |
для: elenaki
(02.11.2007 в 11:00)
| | | Сделал как вы сказали. Получилось спасибо!
Но заметел баг в IE, ссылка сдвигается вправо, после наведения на нее мышки. В остальных все нормально. Что может так влиять на IE
Вот код
<!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>
<title>Шининвест</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<style>
/* Меню */
.menu ul .mover {background:url("i/bg_menu.gif") left top repeat-y; height:100%; width:100%;}
.menu ul .mover li {padding:10px 0 0 0; overflow:hidden; background:url("i/bottom_menu.gif") left bottom no-repeat;}
.menu ul .mover li a {color:#1F5393;}
.menu ul .mover li a:hover {margin:0; padding:0 0 5px 30px;}
.menu {border:0; width:250px; padding:0 20px 0 0;}
.menu ul {margin:40px 0 0 10px; padding:0; width:100%; list-style:none;}
.menu ul li {font:bold 9pt Verdana; padding-top:10px; margin:0; line-height:150%; }
.menu ul li a {color:#21297B; background:url("i/list_style.gif") left top no-repeat; padding:0 0 5px 30px; display:block;}
.menu ul li ul {margin:5px 0 0 -5px; list-style:none; line-height:100%; padding:0;}
.menu ul li ul li {line-height:100%; margin:1px 0; padding:0 0 0 15px; background:url("i/list_style_up_act.gif") left center no-repeat; }
.menu ul li ul li a {font:9pt Verdana; color:#293129; line-height:150%; padding:0; margin:0;}
.menu ul .active a {background:url("i/list_style_act.gif") left top no-repeat;}
</style>
<body>
<table>
<tr>
<td class="menu">
<ul>
<div id="link_1" onmouseover="document.getElementById('link_1').className='mover';" onmouseout="document.getElementById('link_1').className='';"><li><a href="">О департаменте грузовых автошин</a></li></div>
<div id="link_2" onmouseover="document.getElementById('link_2').className='mover';" onmouseout="document.getElementById('link_2').className='';"><li><a href="">Продукция</a></li></div>
<div id="link_3" onmouseover="document.getElementById('link_3').className='mover';" onmouseout="document.getElementById('link_3').className='';"><li class="active"><a href="">Сервисное обслуживание</a></li></div>
<div id="link_4" onmouseover="document.getElementById('link_4').className='mover';" onmouseout="document.getElementById('link_4').className='';"><li><a href="">Спецпредложение</a></li></div>
<div id="link_5" onmouseover="document.getElementById('link_5').className='mover';" onmouseout="document.getElementById('link_5').className='';"><li><a href="">Газета "22,5 дюйма"</a></li></div>
</ul>
</td>
<tr>
</table>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Spyder
(07.11.2007 в 11:20)
| | | жуть. фон при наведение делается через :hover | |
| |
|
|
|
| |
|
|
| |
для: AlexSol
(02.11.2007 в 11:42)
| | | Непонял! А как ещё, то что Вы дали ссылку, там делают целой картинкой. А у меня в итоге получается две и должны растягиваться по height, потому что в ссылке может быть 2 строки. Так что просто картинкой фиксированной высоты неполучится | |
| |
|
|
| |
|
|
| |
для: Spyder
(07.11.2007 в 11:50)
| | | посмотрите, там есть пример "изменение картинки при наведении"
+ http://e-lusion.com/design/menu/ | |
| |
|
|
| |
|
|
| |
для: AlexSol
(07.11.2007 в 12:30)
| | | Посмотрел, но там целой картинкой меню фон меню делают, у меня меню совсем другое, одна ссылка может иметь разную высоту. | |
| |
|
|
| |
|
|
| |
для: Spyder
(07.11.2007 в 12:39)
| | | ну так сдлайте две картинки
<ul>
<li><a href="">О департаменте грузовых автошин</a></li>
...
</ul>
ul li a{display:block;padding-left:20px; backgound:url(обычная картинка) no-repeat 0 0;}
ul li a:hover{display:block;padding-left:20px; backgound:url(другая картинка) no-repeat 0 0;} | |
| |
|
|
