[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Красивое меню наподобие MAC OS
gamerДата: Вторник, 24.03.2009, 23:25 | Сообщение # 1
Admin
Группа: Администраторы
Сообщений: 404
Награды: 2
Репутация: 2
Статус: Offline

Итак. Перед </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>
Прикрепления: 4357795.jpg (10.5 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: