Помощь с многоуровневым меню с помощью json и jquery

Я пытаюсь создать многоуровневое меню, которое скользит при нажатии ">". Первая проблема заключается в том, что CSS не работает должным образом,

    не перемещаются влево.

    Что мне нужно, так это показать только одну ul, и если щелкнуть ">", покажите "дочернее" меню, сдвинув или отобразив его, любой метод полезен.

    Полный код, готовый к тестированию, находится здесь

    Я пытаюсь сделать это: меню

    JavaScript

$(document).ready(function(){
    var json = [{"id":"1","parent":"0","slug":"digitalart","name":"Digital Art"},{"id":"2","parent":"1","slug":"3d","name":"3-Dimensional Art"},{"id":"39","parent":"1","slug":"drawings","name":"Drawings"},{"id":"3","parent":"2","slug":"abstract","name":"Abstract"},{"id":"4","parent":"2","slug":"characters","name":"Characters"},{"id":"12","parent":"2","slug":"objects","name":"Objects"},{"id":"23","parent":"2","slug":"scenes","name":"Scenes"},{"id":"32","parent":"2","slug":"unsorted","name":"Unsorted"},{"id":"33","parent":"2","slug":"vehicles","name":"Vehicles"},{"id":"5","parent":"4","slug":"creatures","name":"Animals & Creatures"},{"id":"6","parent":"4","slug":"cartoon","name":"Cartoon"},{"id":"7","parent":"4","slug":"female","name":"Female"},{"id":"8","parent":"4","slug":"groups","name":"Groups"},{"id":"9","parent":"4","slug":"machines","name":"Machines & Robots"},{"id":"10","parent":"4","slug":"male","name":"Male"},{"id":"11","parent":"4","slug":"misc","name":"Miscellaneus"}];
    build_menu(json, 0);
});

function build_menu(json, parent){
    var menu;
    var item = "";
    var counter = 0;
    if(parent != '0'){
        item += '
  • Back
  • '; } $.each(json, function(i, category) { if(category.parent == parent){ var more = '>'; item = item + '
  • ' + category.name + more + '
  • '; build_menu(json, category.id); counter++; } }); if(counter > 0){ menu = ''; $('#menu').prepend(menu); } } function show(id){ $(".menu").hide(); $("#category"+id).show(); }

    css

    #menu{
        width: 180px;
        overflow: hidden;
    }
    
    #menu ul{
        width: 180px;
        float: left;
        list-style: none;
    }
    
    #menu ul li{
        border: solid 1px black;
        margin-bottom: 5px;
    }
    
    #menu li .more{
        //float: right;
        text-decoration: none;
        margin-right: 5px;
    }
    

    html

    
    

    12
    задан mrk 24 May 2011 в 22:00
    поделиться