HTML-формы - вложенные выпадающие списки?

Question

я не знаю, как это называется, так вот образ того, что я хочу сделать в HTML форме:

Я хочу, чтобы выбрать из выпадающего списка. Когда я прокручиваю список вниз, я хочу показать подчиненные выборы, как в этом примере из Windows. И используйте этот окончательный выбор в качестве ввода формы.

Можно ли это сделать?

Answer 1

Это можно сделать, но, скорее всего, вам придется использовать стороннюю библиотеку. Это меню называется контекстное меню.

Checkout библиотека ниже

http://swisnl.github.io/jQuery-contextMenu/index.html

Если вы просто хотите поставить вход в форме, то, вероятно, лучше использовать простой выпадающий список.

Answer 2

Я думаю, вы хотите реализовать что-то подобное. Вы получите много кодов в google, если вы просто ищете многоуровневое раскрывающееся меню навигации.

ul 
 
{ 
 
\t list-style:none; 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
ul a 
 
{ 
 
\t display:block; 
 
\t color:#333; 
 
\t text-decoration:none; 
 
\t font-weight:700; 
 
\t font-size:12px; 
 
\t line-height:32px; 
 
\t padding:0 15px; 
 
} 
 

 
ul li 
 
{ 
 
\t position:relative; 
 
\t float:left; 
 
\t margin:0; 
 
\t padding:0 
 
} 
 

 
ul li.active 
 
{ 
 
\t background:#ddd 
 
} 
 

 
ul li:hover 
 
{ 
 
\t background:#f6f6f6 
 
} 
 

 
ul ul 
 
{ 
 
\t display:none; 
 
\t position:absolute; 
 
\t top:100%; 
 
\t left:0; 
 
\t background:#fff; 
 
\t padding:0 
 
} 
 

 
ul ul li 
 
{ 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
ul ul a 
 
{ 
 
\t line-height:120%; 
 
\t padding:10px 15px 
 
} 
 

 
ul ul ul 
 
{ 
 
\t top:0; 
 
\t left:100% 
 
} 
 

 
ul li:hover > ul 
 
{ 
 
\t display:block 
 
}

<nav> 
 
<ul> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li><a href="#">Menu 1 &#9658;</a> 
 
    <ul> 
 
     <li><a href="#">Sub Menu 1</a></li> 
 
     <li><a href="#">Sub Menu 2 &#9658;</a> 
 
     <ul> 
 
      <li><a href="#">Sub Sub Menu 1</a></li> 
 
      <li><a href="#">Sub Sub Menu 2</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Sub Menu 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Menu 2 &#9658;</a> 
 
    <ul> 
 
     <li><a href="#">Sub Menu 1</a></li> 
 
     <li><a href="#">Sub Menu 2</a></li> 
 
     <li><a href="#">Sub Menu 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Menu 3</a></li> 
 
</ul> 
 
</nav>

Answer 3

Справедливо, предложение использовать плагин JQuery Контекстное действительно не плохо. Он может обрабатывать подменю для вас без проблем и действительно делает определение команды намного проще, чем писать ее самостоятельно.

http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html