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

Question

[sergey]

Подскажите, покажите или натолкните на мысль как это сделать на js. Каков алгоритм выполнения? В голову ничего не приходит, даже не представляю с чего начать и как написать код js.

А есть такое условие:
В header сайта динамически при помощи js с генерировать двухуровневое меню типа
ul>li>a, динамически добавить заголовок для меню - кнопка "Меню", и меню расположить горизонтально.

Answer 1

[VA_ic2b]

Попробуйте четко сформулировать свою задачу. На то, что Вы написали нужно сделать следующие шаги.
Подключите jquery (jquery.com).
Сделайте шаблон для вывода меню.
После загрузки страницы добавьте элемент меню в header
$(document).ready(function(){
$('header').append(ваш_элемент_с_меню);
...
});
Смотрите api.jquery.com/append

Comments

[sergey]

шаблон для вывода меню? это имеется ввиду верстка в HTML меню

[sergey]

и еще вопрос: шаблон делать пустым без ссылок?

[VA_ic2b]

Вы же хотите генерировать меню динамически? Тогда шаблон с разметкой под ссылки.
А что Вы понимаете под динамическим меню. Откуда будут ссылки для меню?

[sergey]

VA_ic2b: извините я только изучаю js, возможно не корректно сформулировал вопрос

[sergey]

VA_ic2b: если я правильно понял, то я верстаю обыкновенное меню, а потом с помощью js, меняю значения этого меню... как-то так да?

[VA_ic2b]

Можно и так. А можно непосредственно в коде js создать html-элемент меню. После загрузки страницы разместить его внутри header.
Постарайтесь разбить свою задачу на простые шаги и сформулировать результат для каждого шага. Для решения используйте api.jquery.com

[sergey]

VA_ic2b: спасибо, мне второй вариант кажется интереснее

Answer 2

[sergey]

Вот такое решение, но снова есть вопрос: как добавить .button например в меню

var menu = [
        {
        name: 'Menu 1',
        submenu: [
            {
                name: 'Submenu 1.1',
                href: 'http://test1.com',
                id: 'submenu1'
            },
            {
                name: 'Submenu 1.2',
                href: 'http://test2.com',
                id: 'submenu2'
            }
        ]
    },
    {
        name: 'Menu 2',
        submenu: [
            {
                name: 'Submenu 2 1',
                href: 'wwww.ccc.ru',
                id: 'submenu2.1'
            },
            {
                name: 'Submenu 2 2',
                href: 'wwww.vcxcvxv.ru',
                id: 'submenu2.2'
            }
        ]        
    },
    {
        name: 'Menu 3',
        submenu: [
            {
                name: 'Submenu 3.1',
                href: 'http://test1.com',
                id: 'submenu1'
            },
            {
                name: 'Submenu 3.2',
                href: 'http://test2.com',
                id: 'submenu2'
            }
        ]
    }
];

$(document).ready(function(){

    var html = '';
    html += '<ul class="menu">';

    $.each(menu, function(key,value) {

        html += '<li><a>'+value.name+'</a>';
        html += '<ul class="submenu">';

        $.each(value.submenu, function(skey,svalue) {
            html += '<li><a id="'+svalue.id+'" href="'+svalue.href+'">'+svalue.name+'</a></li>';
        });

        html += '</ul></li>';
    });

    html += '</ul>';
    $( "header" ).append(html);
});

Answer 3

[LittleFatNinja]

ul>li>a
это не двух уровневое меню
это просто меню ерстается на css

Comments

[sergey]

это понятно, тестовое задание говорит о том что на js надо делать, кроме того сделать меню это только первая часть, дальше надо вешать обработчики событий click на каждую ссылку... и т.д.

[LittleFatNinja]

zorro: тестовое задание для чего?

[sergey]

LittleFatNinja: курсы по js

[LittleFatNinja]

zorro: мож кинуть ссылку? хочу глянуть

[sergey]

1. Создать простой каркас html страницы - header+content
2. В header динамически при помощи js сгенерировать двухуровневое меню типа
ul>li>a
2.1. Динамически добавить заголовок для меню - кнопка "Меню"
3. Меню расположить горизонтально
4. Наиболее оптимально добавить добавить обработчик события click на каждую ссылку в меню. По клику в центральную часть(content) должен выводится текст ссылки
5. Добавить обработчик "при изменении размера окна"
-- при ширине менее 600px - прятать все меню и показывать только заголовок "Меню"
-- при ширине >= 600px - показывать все меню и прятать заголовок "Меню"
6. Добавить обработчик "По клику кнопку "Меню"" - отображать/скрывать меню

[LittleFatNinja]

zorro: та я хотел посмотреть программу курса? в каком городе находятся?

[sergey]

Киев

[LittleFatNinja]

zorro: оо, я тоже с киева
мож все такие дать ссылку?

[sergey]

LittleFatNinja: dio-soft.org/junior-frontend-developer