Это уже было но в той записи было написано не подробно и я решил написать всё подробно:). Итак. Перед </head> Ставим это: Code <style> a img.MenuImg {border: 0px none; } </style> <script src="http://free-manga.net.ru/scripts/jquery-1.2.6.js"></script> Там где будет меню Перед <body>: Code <div id="TheMenu"></div> И наконец меню. Меню будет в самом верху страницы. Это вы можете вставить куда угодно (всё равно будет вверху). Но для лучшей работы ставьте сразу после шапки: Code <script> Icons = ['http://allru.ucoz.net/menu/189.png', 'http://allru.ucoz.net/menu/165.png', 'http://allru.ucoz.net/menu/003.png', 'http://allru.ucoz.net/menu/picture_clipping.png', 'http://allru.ucoz.net/menu/34.png', 'http://allru.ucoz.net/menu/56.png', 'http://allru.ucoz.net/menu/567.png']; URLs = ['http://www.allru.ucoz.net/', 'http://www.allru.ucoz.net/dir/', 'http://www.allru.ucoz.net/forum/', 'http://www.allru.ucoz.net/photo/', 'http://www.allru.ucoz.net/index/0-20', 'http://www.allru.ucoz.net/index/0-7/', 'http://www.apofig.ru/index.php?ind=topsite&op=submit_rate&ide=481']; Orientation = 'h'; Heights = [128, 100, 80, 60]; Opacities = [1.0, 0.8, 0.4, 0.15]; MenuAlign = 'center'; VAlign = 'top'; HAlign = 'center'; Speed = 250;
MenuCode = '<table id="MenuTable" style="height: ' + (Heights[0] - - 10) + 'px; ">'; if (Orientation === 'h') { MenuCode += '<tr>'; for (i = 0; i < Icons.length; i++) { MenuCode += '<td valign="' + VAlign + '"><a href="' + URLs[i] + '"><img style="height: ' + Heights[Heights.length - 1] + 'px; " src="' + Icons[i] + '" class="MenuImg"></a></td>'; } MenuCode += '</tr>'; } else { for (i = 0; i < Icons.length; i++) { MenuCode += '<tr><td align="' + HAlign + '"><a href="' + URLs[i] + '"><img style="height: ' + Heights[Heights.length - 1] + 'px; " src="' + Icons[i] + '" class="MenuImg"></td></a></tr>'; } } MenuCode += '</table>'; $('#TheMenu').html(MenuCode).attr('align', MenuAlign);
$('img.MenuImg').animate({height: Heights[Heights.length - 1] + "px", opacity: Opacities[Opacities.length - 1]}, 1).each(function (j) { jQuery(this).hover(function () { $('img.MenuImg').stop(); for (i = 0; i < $('img.MenuImg').length; i++) { jQuery('img.MenuImg:eq(' + i + ')').animate({height: (Math.abs(i - j) < Heights.length ? Heights[Math.abs(i - j)] + "px" : Heights[Heights.length - 1] + "px"), opacity: (Math.abs(i - j) < Opacities.length ? Opacities[Math.abs(i - j)] : Opacities[Opacities.length - 1])}, Speed); } }, function () { }); });
$('#MenuTable').hover(function () {
}, function () { $('img.MenuImg').stop().animate({height: Heights [Heights.length - 1] + "px", opacity: Opacities[Opacities.length - 1]}, Speed); }); </script> Ну что и где менять я думаю вы поймёте. Если нет, то пишите тут.
|