Как сделать многоуровневое меню при некоторых условиях?

Question

[Алексей]

Добрый день!

Подскажите реально ли такое -

Есть массив из значений

-Кузовные детали-
Зеркало
Стекло
-Запчасти для двигателя-
Поршни
Свечи

Данный массив выводится очень хитрым образом.
Можно его обернуть в li, в select, можно каждому из значений установить уникальный class.

Но мне необходимо этот список разделить и превратить в многоуровневую навигацию.

Чтобы например - при наведении на "Раздел" открывались подменю - -Кузовные детали- и -Запчасти для двигателя- а в каждом из них соответственно были свои итемы.


Никак не могу придумать - как это реализовать.
Заранее благодарен за попытки помочь!

Answer 1

[askhat]

У вас недостаточно информации, по этому я допустил, что пары заголовок-ссылка лежат в хешах, которые в свою очередь в массиве. Если так, то можно вот так:

var menu = [
  { 'foo': 'foo.org',
    'bar': 'bar.net' },
  { 'baz': 'baz.com',
   'quux': 'quux.gov' }
]

function menuBuilder(obj) {
  var html = [];
  for (var i = 0; i < obj.length; i++) {
    html.push('<ul>');
    for (var prop in obj[i]) {
      html.push('<li><a href="' + obj[i][prop] + '">' + prop + '</a></li>');
    };
    html.push('</ul>');
  };
  html.join('');
  return html;
};
menuBuilder(menu);

Функция вернет:

<ul><li><a href="foo.org">foo</a></li><li><a href="bar.net">bar</a></li></ul><ul><li><a href="baz.com">baz</a></li><li><a href="quux.gov">quux</a></li></ul>

Comments

[YemSalat]

Любопытно, почему именно массив и джоин, а не просто конкатенация?

[askhat]

@YemSalat: ума не приложу как без массива сделать

[Алексей]

А нельзя ли список li с уникальными классами разделить именно по классам?

[askhat]

Алексей: можно, но это будет уже совсем другая функция...
// Много классов - несемантично, для этого идентификаторы есть

[YemSalat]

Askhat Bikmetov: В смысле?
Точно так же, только без массива :)

var html = '';
  for (var i = 0; i < obj.length; i++) {
    html += '<ul>';
    for (var prop in obj[i]) {
      html += '<li><a href="' + obj[i][prop] + '">' + prop + '</a></li>';
    };
    html += '</ul>';
  };
  return html;

[askhat]

@YemSalat: точняк, все время забываю про эти "ленивые" операторы

[YemSalat]

Askhat Bikmetov:

Конкатенацией еще и быстрее почти в 2 раза:

jsperf.com/push-vs-join-mycase

[YemSalat]

Askhat Bikmetov: в хроме, в фаерфоксе одинаково получается

Answer 2

[Light 777]

Просто скачайте с этого сайта