Подскажите пожалуйста как сделать ефект с меню такой как на http://www.avito.ru/ (на сайте слева) Я смотрел сорс ихний но что-то не могу понять как ефект синей полоски получается на всю длинну (у меня только заполняется синим текст)
Достаточно засунуть элементы меню в SPAN или DIV и уже к ним применить JS-код, который будет заменять в элементе *.style.bgColor при событии onmouseover/onmouseout.
Code: ...id=mmenu0 onmouseover="mmenu_over(0)" onMouseOut="mmenu_out(0)... Code: ...id=mmenu1 onmouseover="mmenu_over(1)" onMouseOut="mmenu_out(1)... Вот эти куски частично отвечают за этот Эффект. А вообще поищи прогу которая называется типа menumaker, как раз предназначена для создания меню.
+1 Например: PHP: <table width="100" border="0" align="center" cellpadding="2" cellspacing="1" style="border:1px solid #666666;"> <tr> <td align="center" bgcolor="#001E32" onmouseover="this.style.backgroundColor='#FFFFFF';" onmouseout="this.style.backgroundColor='#001E32'"><a href="/">HOME</a></td> </tr> </table> А как у них если то: CSS: PHP: /* Categories */ .Cats { width:190px; } .Cats th { text-align:left; color:#000000; padding:20 0 10 20; font-size:11px; font-weight:bold; background-color:#f8f8f8;} .Cats td { line-height:27px; padding: 0 10 0 10; background-color:#f8f8f8;} .Cats img#cimg { vertical-align:middle; margin:10 10 10 3; } .Cats div#box { background-color:#ffffff; border:#f1f1f1 solid 1px; margin:10 0; } .Cats td#addon { width:180px; border:#f1f1f1 solid 1px; padding: 5 5 5 5; background-color:#ffffff; margin-top:15px; } .Cats a { float:left; color:#555555; border-top:#f5f5f5 solid 1px; padding-left:10px; font-size:11px; text-decoration:none; width:180px;} .Cats a:hover { color:#ffffff; background-color:#81b4e9; text-decoration:none;} .Cats a#ad { float:left; color:#81b4e9; border:0; padding-left:10px; font-size:11px; text-decoration:none; width:100%; } .Cats a#ad:hover { color:#ffffff; background-color:#81b4e9; text-decoration:none;} .Cats td#info { color:#777777; font-size:9px; padding:10 10 0 20; }
Code: <!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=windows-1251" /> <title>Untitled Document</title> </head> <style> body{font-family: Tahoma; font-size: 12px;} .tbl{background: #F8F8F8; width: 220px; text-align: center;} .tbl td{padding: 10px;} .tbl a{color: #555555; text-decoration: none;} .tbl a:hover{color: #FFFFFF; text-decoration: none; background: #81B4E9; padding-top: 5px; padding-bottom: 5px; padding-left: 35px; padding-right: 35px;} </style> <body> <table border="0" cellspacing="0" cellpadding="0" class="tbl"> <tr> <td><a href="#">Пункт 1</a></td> </tr> <tr> <td><a href="#">Пункт 2</a></td> </tr> <tr> <td><a href="#">Пункт 3</a></td> </tr> </table> </body> </html> Почти тоже самое , только с паддингами поиграть нада и еще чет вроде)
Isis, твой способ подействует на всю строку... А нужно по границе слова... Или тогда в каждой ячейке создавать по таблице из одной строки, чтобы он не отбивал по ширине самой длинной колонки...