Hogyan Lehet ilyen menüt készíteni?

Kirakod a listát, mindegyik elemnek egyedi azonosítója van, ezt valahogy hozzácsatolod a markuphoz, pl

<ul>

<li data-id="category-1">Főkategória 1</li>

<li data-id="category-2">Főkategória 2</li>

<li data-id="category-3">Főkategória 3</li>

<li data-id="category-4">Főkategória 4</li>

<li data-id="category-5">Főkategória 5</li>

...

</ul>

aztán click eventet rendelsz mindegyik li elemhez, ha rákattintanak xmlhttprequest-el elküldöd a szervernek pl get paraméterként azt, hogy mit szeretnél és a category_idt. A szerveren fut pl egy PHP script ami az azonosító alapján lekéri azokat az alkategóriákat ami az adott id-hez csatlakozik és pl JSON-ban visszaadja a listát (azonosító, név) aztán javascripttel feldolgozod ezt az adatot és beszúrod az elemeket egy másik listába.

Nagy vonalakban és a lehető legegyszerűbben ennyi.

HTML kell a markuphoz, CSS a formázáshoz, JS az interakciókhoz és adatcseréhez, PHP és valami adatbázis, pl MySQL az adatok tárolásához és kinyeréséhez.

Nézz körül [link] -on.

Ha teljesen fogalmatlan vagy a dologban, akkor javaslom ne próbáld az egész problémát egyszerre befalni, hanem dolgozz a listák megjelenítésén, aztán ha többé-kevésbé használhatóan néznek ki akkor a javascript eventeken, onclick lekezelésen, dom-manipuláción (létre kell hozni a listaelemeket az adatok alapján), json feldolgozáson (nagy lehet a csábítás, hogy a phpvel ne adatokat küldj vissza, hanem HTML markupot amit csak javascripttel betolsz az UL-ba de rettenetesen gagyi megoldás). Ha ezek működnek akkor backend oldalon csináld meg a scriptet meg az adatbázist, aztán kösd össze öket XMLHttpRequest-el.