Сначала с CSS
Code
/* ====== Меню====== */
#dropmenudiv {filter: alpha(opacity=95, enabled=1) progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=3);}
#newpm {filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);}
div.div_busy_layer {filter: alpha(opacity=10);}
table.quick_search {width: 100%;margin: 2px 0px 2px 0px;border: 0px;}
table.quick_search td.left {width: 6px;height: 29px;background: url('/menu/modern_search_left_bg.gif') right top no-repeat;padding: 0px;margin: 0px;}
table.quick_search td.center {background: url('/menu/images/modern_search_bg.gif') left top repeat-x;padding: 0px;margin: 0px;vertical-align: top;}
table.quick_search td.center input {width: 100%;height: 16px;font-family: tahoma;font-size: 11px;border: 0px;background: #ffffff;margin: 5px 0px 0px 0px;text-align: center;color: #cccccc;}
table.quick_search td.right {width: 30px;background: url('/menu/modern_search_bg_right.gif') left top no-repeat;padding: 0px;margin: 0px;cursor: pointer;}
table.menu_category {width: 100%;background: url('/menu/modern_menu_category_bg_nonactive.gif') left top repeat-x;border: 0px;margin: 2px 0px 2px 0px;}
table.menu_category:hover {background: url('http://polezn-ucoz.3dn.ru/menu/modern_menu_category_bg_active.gif') left top repeat-x;cursor: pointer;}
table.menu_category td.left {width: 5px;height: 29px;background: url('/menu/modern_menu_category_bg_left.gif') right top no-repeat;padding: 0px;}
table.menu_category td.roll {width: 44px;background: url('/menu/modern_menu_category_bg_roll.gif') left top no-repeat;padding: 0px;}
table.menu_category td.roll:hover {background: url('/menu/modern_menu_category_bg_roll_active.gif') left top no-repeat;}
table.menu_category td.right {width: 5px;background: url('/menu/modern_menu_category_bg_right.gif') left top no-repeat;padding: 0px;}
table.menu_category td.image {width: 16px;text-align: center;vertical-align: middle;background: url('/menu/modern_menu_category_bg_center.gif') left top repeat-x;padding: 0px;}
table.menu_category td.image img {border: 0px;padding: 0px 0px 2px 0px;}
table.menu_category td.center {text-align: left;vertical-align: middle;background: url('/menu/modern_menu_category_bg_center.gif') left top repeat-x;padding: 0px 0px 3px 4px;font-family: tahoma, verdana, arial;color: #ffffff;font-weight: bold;font-size: 11px;letter-spacing: 0.5px;line-height: 12px;}
table.menu_category_opened {width: 100%;background: url('/menu/modern_menu_category_bg_active.gif') left top repeat-x;border: 0px;margin: 2px 0px 2px 0px;}
table.menu_category_opened td.left {width: 5px;height: 29px;background: url('/menu/modern_block_top.gif') left top no-repeat;padding: 0px;cursor: pointer;}
table.menu_category_opened td.collapse {width: 44px;background: url('/menu/modern_menu_category_bg_collapse.gif') left top no-repeat;padding: 0px;cursor: pointer;}
table.menu_category_opened td.collapse_hover {width: 44px;background: url('/menu/modern_menu_category_bg_collapse_active.gif') left top no-repeat;padding: 0px;cursor: pointer;}
table.menu_category_opened td.image {width: 16px;text-align: center;vertical-align: middle;background: url('/menu/modern_block_top.gif') center top repeat-x;padding: 0px;cursor: pointer;}
table.menu_category_opened td.image img {border: 0px;padding: 0px 0px 2px 0px;}
table.menu_category_opened td.center {text-align: left;vertical-align: middle;background: url('/menu/modern_block_top.gif') center top repeat-x;padding: 0px 0px 3px 4px;font-family: tahoma, verdana, arial;font-size: 11px;color: #ffffff;font-weight: bold;line-height: 12px;letter-spacing: 0.5px;cursor: pointer;}
table.menu_category_opened td.container {background: url('/menu/modern_block_right.gif') right top repeat-y;padding: 2px 7px 2px 0px;}
table.menu_category_opened td.left_border {background: url('/menu/modern_menu_border_pixel.gif') left top repeat-y;padding: 0px;}
table.menu_category_opened td.bottom_left {width: 5px;height: 5px;background: url('http://polezn-ucoz.3dn.ru/menu/modern_block_bottom.gif') left top no-repeat;padding: 0px;}
table.menu_category_opened td.bottom_right {width: 5px;background: url('/menu/modern_block_bottom.gif') right top no-repeat;padding: 0px;}
table.subcategories_table {width: 100%;padding: 0px;margin: 0px;}
table.subcategories_table td.subcat_left {text-align: center;vertical-align: middle;width: 4px;padding: 0px;margin: 0px;}
table.subcategories_table td.link {height: 20px;background: #ffffff;text-align: left;vertical-align: middle;padding: 0px 0px 0px 2px;font-family: tahoma, verdana, arial;font-size: 11px;color: #364683;font-weight: bold;line-height: 12px;letter-spacing: 0.5px;cursor: pointer;border: 1px solid #ffffff;}
table.subcategories_table td.link_hover {height: 20px;text-align: left;vertical-align: middle;padding: 0px 0px 0px 2px;font-family: tahoma, verdana, arial;font-size: 11px;color: #364683;font-weight: bold;line-height: 12px;letter-spacing: 0.5px;cursor: pointer;background: #d9e8fa;border: 1px solid #364683;}
table.subcategories_table td.link img,table.subcategories_table td.link_hover img {width: 16px;height: 16px;border: 0px;cursor: pointer;padding: 0px 4px 0px 0px;float: left;}
img.icon {border: 0px;float: left;padding-right: 6px;width: 16px;height: 16px;}
table.subheader_area {width: 100%;height: 24px;background: #4b97ce;border-width: 0px 1px 1px 1px;border-style: solid;border-color: #364683;text-align: left;vertical-align: middle;padding: 0px;margin: 0px;}
table.subheader_area td {border-width: 0px 0px 0px 0px;border-style: solid;border-color: #364683;}
td.main_menu {padding: 0px;vertical-align: top;border: 0px;}
td.main_menu a:link ,td.main_menu a:active,td.main_menu a:visited {font-family: sans-serif, verdana, tahoma, arial; font-size: 10px;border-left: 1px solid #d9e8fa;border-right: 1px solid #d9e8fa;background: transparent;padding: 4px 5px 0px 4px;display: block;height: 22px;vertical-align: bottom;color: #575e60;line-height: 16px;text-decoration: none;font-weight: bold;}
td.main_menu a:hover {font-family: sans-serif, verdana, tahoma, arial;font-size: 10px;border-left: 1px solid #364683;border-right: 1px solid #364683;background: #ffffff;padding: 4px 5px 0px 4px;cursor: pointer;display: block;height: 22px;vertical-align: bottom;color: #575e60;line-height: 16px;text-decoration: none;font-weight: bold;}
td.main_menu img {text-align: left;}
td.copyright {background: url('/menu/modern_footer_main_border_right.gif') bottom right no-repeat;text-align: left;vertical-align: middle;font-size: 11px;font-family: tahoma, verdana, arial;padding: 0px 0px 10px 0px;color: #ffffff;}
td.copyright a:link ,td.copyright a:active,td.copyright a:visited {font-family: tahoma, verdana, arial;font-size: 11px;color: #19181a;text-decoration: none;font-size: 11px;}
td.copyright a:hover {text-decoration: underline;}
a.udleinf:link {text-decoration:none; color:#ffffff; font-weight:bold; font-family:Tahoma;}
a.udleinf:active {text-decoration:none; color:#ffffff; font-weight:bold;}
a.udleinf:visited {text-decoration:none; color:#ffffff; font-weight:bold;}
a.udleinf:hover {text-decoration:underline; color:#ffffff; font-weight:bold;}
/* ============ */
просто вставляем в CSS
дам вам два архива с картинками разных цветов
[indent]зелёный[/indent]
[indent]синий[/indent]
все эти файлы надо залить а папку menu
при желании можно подобрать свою цветовую схему это сам вид меню
Code
<div id="menu_cat_40_closed">
<table cellpadding="0" cellspacing="0" class="menu_category">
<td class="left"></td>
<td class="image" onclick="location.href='http://polezn-ucoz.3dn.ru/';"><img src="/favicon.ico" border="0"></td>
<td class="center" onclick="location.href='http://polezn-ucoz.3dn.ru/';">Polezn-Ucoz</td>
<td class="roll" onclick="menu_cat_open( '40' );" title="Развернуть меню подкатегорий"></td>
</table>
</div>
<div id="menu_cat_40_show" style="display: none;">
<table cellpadding="0" cellspacing="0" class="menu_category_opened">
<tr>
<td class="left"></td>
<td class="image" onclick="location.href='http://polezn-ucoz.3dn.ru/';"><img src="/favicon.ico" border="0"></td>
<td class="center" onclick="location.href='http://polezn-ucoz.3dn.ru/';">Polezn-Ucoz</td>
<td class="collapse" onclick="close_menu_item( );" title="Свернуть меню подкатегорий" onmouseover="this.className='collapse_hover';" onmouseout="this.className='collapse';"> </td>
</tr>
<tr>
<td class="left_border"></td>
<td colspan="3" class="container">
<table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/forum';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/favicon.ico" border="0">Форум</td>
</tr>
<table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/index/0-2';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/favicon.ico" border="0">Наши Баннеры</td>
</tr>
</table> <table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='http://file-and-photo.3dn.ru/';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/favicon.ico" border="0">Файлообменник</td>
</tr>
<table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/gb';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/favicon.ico" border="0">Гостевая Книга</td>
</table> </td>
</tr>
<tr>
<td class="bottom_left"></td>
<td class="bottom_right" colspan="3"></td>
</tr>
</table>
</div>
<div id="menu_cat_41_closed">
<table cellpadding="0" cellspacing="0" class="menu_category">
<td class="left"></td>
<td class="image" onclick="location.href='/forum/16';"><img src="/menu/modern_friends.gif" border="0"></td>
<td class="center" onclick="location.href='/forum/16';">Конкурсы</td>
<td class="roll" onclick="menu_cat_open( '41' );" title="Развернуть меню подкатегорий"></td>
</table>
</div>
<div id="menu_cat_41_show" style="display: none;">
<table cellpadding="0" cellspacing="0" class="menu_category_opened">
<tr>
<td class="left"></td>
<td class="image" onclick="location.href='/forum/16';"><img src="/menu/modern_friends.gif" border="0"></td>
<td class="center" onclick="location.href='/forum/16';">Конкурсы</td>
<td class="collapse" onclick="close_menu_item( );" title="Свернуть меню подкатегорий" onmouseover="this.className='collapse_hover';" onmouseout="this.className='collapse';"> </td>
</tr>
<tr>
<td class="left_border"></td>
<td colspan="3" class="container">
<table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/forum/16-69-1';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/menu/modern_friends.gif" border="0">Раздача Асек</td>
</tr>
<table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/forum/16-218-1';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/menu/modern_friends.gif" border="0">Бонус "Группы Пользователей"</td>
</tr>
</table> <table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/forum/16-55-1';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/menu/modern_friends.gif" border="0">Раздача Хостов</td>
</tr>
<table cellpadding="0" celspacing="0" border="0" class="subcategories_table"> <tr>
<td class="link" onclick="location.href='/forum/16-51-1';" onmouseover="this.className='link_hover';" onmouseout="this.className='link';"><img src="/menu/modern_friends.gif" border="0">Предложить свой Конкурс</td>
</table> </td>
</tr>
<tr>
<td class="bottom_left"></td>
<td class="bottom_right" colspan="3"></td>
</tr>
</table>
</div>
<script language="javascript">
<!--
var menu_cats_ids = new Array( "41","40" );
function menu_cats_close( )
{
for( var i = 0; i < menu_cats_ids.length; i++ )
{
element = mp_get_by_id( "menu_cat_" + menu_cats_ids[i] + "_closed" );
//alert( "menu_cat_" + menu_cats_ids[i] + "_closed" );
if( element.style.display == "none" )
{
element.style.display = "block";
}
element = mp_get_by_id( "menu_cat_" + menu_cats_ids[i] + "_show" );
if( element.style.display != "none" )
{
element.style.display = "none";
}
}
return true;
}
function menu_cat_open( id )
{
menu_cats_close( );
var element = mp_get_by_id( "menu_cat_" + id + "_show" );
//alert( element );
if( element.style.display == "none" )
{
element.style.display = "block";
}
element = mp_get_by_id( "menu_cat_" + id + "_closed" );
//alert( element );
if( element.style.display != "none" )
{
element.style.display = "none";
}
set_menu_cookie( id )
return true;
}
function set_menu_cookie( id )
{
if( id == 0 )
{
document.cookie = "menu_category_active=0; path=/";
return true;
}
var date = new Date();
date.setTime( date.getTime( ) + ( 2 * 60 * 1000 ) );
var expires = date.toGMTString( );
document.cookie = "menu_category_active=" + id + "; expires=" + expires + "; path=/";
}
function close_menu_item( )
{
menu_cats_close( );
var date = new Date();
date.setTime( date.getTime( ) );
var expires = date.toGMTString( );
document.cookie = "menu_category_active=0; expires=" + expires + "; path=/";
}
function preload_menu_images( images )
{
var images_path = "/images/";
if( images instanceof Array )
{
var virtual_images = new Array( images.length );
for( var i = 0; i < images.length; i++ )
{
if( document.images )
{
virtual_images[i] = new Image( 1, 1 );
virtual_images[i].src = images_path + images[i];
}
}
return true;
}
return false;
}
preload_menu_images( new Array( "modern_menu_category_bg_collapse_active.gif", "modern_menu_category_bg_collapse.gif", "modern_menu_category_bg_active.gif", "images/modern_menu_category_bg_roll_active.gif" ) );
-->
</script>
находим строчки
Code
<div id="menu_cat_40_closed"> и <div id="menu_cat_40_show" style="display: none;">
видим там цифру 40
её необходимо прописать в скрипте ниже
Code
var menu_cats_ids = new Array( "41","40" );
то есть,если вы создадите новый пункт меню то вам надо будет сделать так
Code
<div id="menu_cat_42_closed"> и <div id="menu_cat_42_show" style="display: none;">
и здесь
Code
<td class="roll" onclick="menu_cat_open( '42' );" title="Развернуть меню подкатегорий"></td>
и дописать в скрипт
Code
var menu_cats_ids = new Array( "41","42","40" );
и в head ставим
Code
<script language="javascript" type="text/javascript" src="/js/mediaportal_website.js"></script>
<script language="javascript" type="text/javascript" src="/js/modern_smartmenu_config.js"></script>
<script language="javascript" type="text/javascript" src="/js/modern_smartmenus.js"></script>
качаем и заливаем в папку js следующие файлы
mediaportal_website.js
modern_smartmenu_config.js
modern_smartmenus.js