Форум программистов [Powered by Invision Power Board]

Код


var menuitem=0;
var submenustyle='None';
var click_=0;

//=================================== обработка событий главного меню ======================================

//1. отмена выделения пункта меню 
function msMenuOut(this_){this_.style.color='menutext';} 

//2. обработка события получения фокуса пунктом меню
function msMenuOver(this_)            
  {if (menuitem!=0) 
     { 
       menuitem.style.color='menutext';
       if ($(menuitem.id+'_'))$(menuitem.id+'_').className='None';
     }
  menuitem=this_;
  menuitem.style.color='Blue';
  if ($(menuitem.id+'_'))
  {
     $(menuitem.id+'_').className=submenustyle;
     $(menuitem.id+'_').style.top=20;
     $(menuitem.id+'_').style.left=menuitem.offsetLeft;
  }
}
  
//3. обработка события Mouse Down!
function msMenudown(this_)
{if (this_.className=='MainMenu') 
 {
     if ($(menuitem.id+'_').className=='None') submenustyle='SubMenu'; else submenustyle='None';
     $(menuitem.id+'_').className=submenustyle;
     click_++;
  }
 }
 
//4. щелчек по области 
function msMenuClick(this_)
{ if (this_.className!='MainMenu')
  if ($(menuitem.id+'_'))
     { 
       submenustyle='None';
       $(menuitem.id+'_').className=submenustyle; 
       click_=0;
     }
}
//======================================обработка событий подменю ==========================================

function  msMenuItemOver(this_){this_.className='MenuItemOn';} //выделение подпункта меню

function  msMenuItemOut(this_){this_.className='MenuItemOff';} //отмена выделение подпункта меню

Код


<html>
<LINK rel="stylesheet" href="menu.css" type="text/css">
<script src="menu.js"></script>
<script>
$= function(id){return document.getElementById(id)};
function msover(event) {
if (event)
  {if (navigator.appName=='Microsoft Internet Explorer')
    {    if (event.srcElement.className=='MainMenu') msMenuOver(event.srcElement);
     else if (event.srcElement.className=='MenuItemOff') msMenuItemOver(event.srcElement);
     }
  else {  if (event.target.className=='MainMenu') msMenuOver(event.target);
     else if (event.target.className=='MenuItemOff') msMenuItemOver(event.target);
     }
  }       
}
function msout(event) {
if (event)
  {if (navigator.appName=='Microsoft Internet Explorer')
    {    if (event.srcElement.className=='MainMenu') msMenuOut(event.srcElement);
     else if (event.srcElement.className=='MenuItemOn') msMenuItemOut(event.srcElement); 
    }
  else {  if (event.target.className=='MainMenu') msMenuOut(event.target);
    else if (event.target.className=='MenuItemOn') msMenuItemOut(event.target); 
     }
  }       
}
function msdown(event)
{if (event)
   {if (navigator.appName=='Microsoft Internet Explorer') msMenudown(event.srcElement);else msMenudown(event.target);}; 
}
function msclick(event)
{if (event)
   {if (navigator.appName=='Microsoft Internet Explorer') msMenuClick(event.srcElement);else msMenuClick(event.target);} 
}
function N_Click(text)
{alert('выбран пункт '+text);}
</script>

<body name='body' id='body' style="margin:0px;background-color:appworkspace;" 
    onmouseover = 'msover(event)'
    onmouseout  =  'msout(event)'
    onmousedown = 'msdown(event)'
    onclick     ='msclick(event)'
    >
<script>
if (navigator.appName!='Microsoft Internet Explorer')
{document.addEventListener("mouseover", msover , true);
 document.addEventListener("mouseout" , msout  , true);
 document.addEventListener("mousdown" , msdown , true); 
 document.addEventListener("click"    , msclick, true);}
</script>
<!------------------------------------------------------------  Главное меню ------------------------------------------------------------->
 <div class='Menu'>
 <span class='MainMenu' name='N1' id='N1'> Файл &nbsp   </span>
 <span class='MainMenu' name='N2' id='N2'> Правка &nbsp </span>
 <span class='MainMenu' name='N3' id='N3'> Поиск &nbsp  </span>
 <span class='MainMenu' name='N4' id='N4'> ? &nbsp    </span>
 </div>
 <div  class='None' name='N1_' id='N1_' style='width:100px'>
     <div class='MenuItemOff' name='N1_1' id='N1_1' onclick='N_Click(this.id)'>&nbsp Открыть      </div>
     <div class='MenuItemOff' name='N1_2' id='N1_2' onclick='N_Click(this.id)'>&nbsp Сохранить    </div>
     <hr  class='line'>
     <div class='MenuItemOff' name='N1_3' id='N1_3' onclick='N_Click(this.id)'>&nbsp Выход        </div>
 </div>
 <div class='None'  name='N2_' id='N2_' style='width:100px'>
     <div class='MenuItemOff' name='N2_1' id='N2_1' onclick='N_Click(this.id)'>&nbsp Отмена       </div>
     <div class='MenuItemOff' name='N2_2' id='N2_2' onclick='N_Click(this.id)'>&nbsp Повтор       </div>
     <hr  class='line'>
     <div class='MenuItemOff' name='N2_3' id='N2_3' onclick='N_Click(this.id)'>&nbsp Вырезать     </div>
     <div class='MenuItemOff' name='N2_4' id='N2_4' onclick='N_Click(this.id)'>&nbsp Копировать   </div>
     <div class='MenuItemOff' name='N2_5' id='N2_5' onclick='N_Click(this.id)'>&nbsp Вставить     </div>
 </div>
 <div class='None'  name='N3_' id='N3_' style='width:100px'>
     <div class='MenuItemOff' name='N3_1' id='N3_1' onclick='N_Click(this.id)'>&nbsp Поиск...     </div>
     <div class='MenuItemOff' name='N3_2' id='N3_2' onclick='N_Click(this.id)'>&nbsp Замена...    </div>
     <hr class='line'>
     <div class='MenuItemOff' name='N3_3' id='N3_3' onclick='N_Click(this.id)'>&nbsp Переход к... </div>
 </div>
 <div class='None'  name='N4_' id='N4_' style='width:100px'>
    <div class='MenuItemOff' name='N4_1' id='N4_1' onclick='N_Click(this.id)'>&nbsp Помощь        </div>
     <hr class='line'>
     <div class='MenuItemOff' name='N4_2' id='N4_3' onclick='N_Click(this.id)'>&nbsp О программе...</div>
</div>
<!------------------------------------------------------------  Главное меню ------------------------------------------------------------->
<!----------------------------- далее  тело сайта --------------------------->
</body>
</html>