Javascript для простого расширения меню

Question

Привет, я новичок в JavaScript и хочу написать очень простое расширяющееся подменю.

<div id="submenu">
  <ul>
   <li>
     Something
   </li>
   <li>
     Another
   </li>
 </ul>
 <div id="submenu-1" class="submenu-options">
  <ul>
   <li>Something-sub</li>
   <li>Something-sub</li>
   <li>Something-sub</li>
  </ul>
 </div>
 <div id="submenu-2" class="submenu-options">
  <ul>
   <li>Another-sub</li>
   <li>Another-sub</li>
   <li>Another-sub</li>
  </ul>
 </div>
</div>

Точнее говоря, если я наведу курсор на что-то, я хочу, чтобы появилось подменю чего-то, если мышь уходит, я хочу, чтобы оно снова было скрыто ... Я знаю, что об этом спрашивали много, и есть много способов сделать это, но Google выдвинул слишком много неудовлетворительных ответов. Я надеюсь, что вы можете потратить 10 минут, чтобы помочь мне избавиться от моих страданий

С уважением и спасибо!

Answer 1

<div id="submenu">
  <ul>
   <li id="1">
     Something
   </li>
   <li id="2">
     Another
   </li>
 </ul>
 <div id="submenu-1" class="submenu-options">
  <ul>
   <li>Something-sub</li>
   <li>Something-sub</li>
   <li>Something-sub</li>
  </ul>
 </div>
 <div id="submenu-2" class="submenu-options">
  <ul>
   <li>Another-sub</li>
   <li>Another-sub</li>
   <li>Another-sub</li>
  </ul>
 </div>
</div>

если вы не используете какую-либо библиотеку, вам нужно привязать ее примерно так:

 var menuText;

  window.onload = function()
  {

     menuText= document.getElementById("1");
     menuText.onfocus = menuFocusHandler;
     menuText.onblur = menuBlurHandler;
  }

function menuFocusHandler()
{
document.getElementById("submenu-1").style.display="inline";
}

function menuBlurHandler()
{
document.getElementById("submenu-1").style.display="none";
}

или вы можете сделать это легко и просто, используя определенные библиотеки javascript, у которых есть API для этого ... некоторые из этих библиотек - Jquery (самая популярная), Sencha и т. Д.

Некоторые из этих библиотек имеют расширения, которые имеют реализацию меню и т. Д.

Answer 2

Вам не нужна Java для этого просто CSS сделает:

li#submenu:hover div {
    display: block;
}

Answer 3

Вы можете легко делать подобные вещи с помощью jQuery, возьмите следующий выпадающий пример:

HTML:

<ul>
   <li>Nav Item 1</li>
   <li class="dropdown">
       Nav Item 2
       <ul style="display:none">
           <li>Sub Menu Item 1</li> 
           <li>Sub Menu Item 2</li>
           <li>Sub Menu Item 3</li>
       </ul> 
   </li>
   <li>Nav Item 3</li>
</ul>

jQuery:

$('.dropdown').hover(function() {
   $('ul', $(this)).show();
}, function() {
   $('ul', $(this)).hide();
});

Answer 4

Я использовал Додзё для таких вещей с большим успехом. Возможно, Menu или MenuBar пригодится вам.