I'm trying to do a multilevel menu that slides when ">" is clicked. The first issue is that the CSS is not working properly, the < ul >'s aren't getting floated to the left.
What I'm needing is show only one ul, and if ">" is clicked show the "children" menu sliding it or showing it, any method is useful.
The complete code ready to test is here
I'm trying to do this: menu
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 += '<li><a class="more" onClick="show(); return false;" href="#">Back</a></li>';
}
$.each(json, function(i, category) {
if(category.parent == parent){
var more = '<a class="more" onClick="show('+parent+'); return false;" href="#">></a>';
item = item + '<li>' + category.name + more + '</li>';
build_menu(json, category.id);
counter++;
}
});
if(counter > 0){
menu = '<ul class="menu" id="category' + parent + '">' + item + '</ul>';
$('#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
<div id="menu">
</div>
Source: Tips4all
Solved.
ReplyDeleteUse jQuery:
build_menu(json, 0);
$('.back').hide();
$('ul').not('.parent').hide();
});
function build_menu(json, parent, parentID) {
var menu, li;
var item = $('<ul class="menu ' + (parent == '0' ? 'parent' : '') + '" id="category' + parent + '"></ul>');
var counter = 0;
if (parent != '0') {
li = $('<li><a class="back" href="#">Back</a></li>');
li.click(function() {
$('.back').hide();
$("#category" + parentID).show();
$("#category" + parent).hide();
$('.back', $("#category" + parentID)).show();
return false;
})
li.appendTo(item);
}
$.each(json, function(i, category) {
if (category.parent == parent) {
var more = $('<a class="more" href="#">></a>');
more.click(function(e) {
e.preventDefault();
$('.back', $("#category" + category.id)).show();
$("#category" + category.id).show();
$("#category" + parent).hide();
console.log("#category" + category.id, $("#category" + category.id));
if ($("#category" + category.id).length <= 0) { //NO CHILDREN
$('.back').hide();
$("#category" + parent).show();
$('.back', $("#category" + parent)).show();
}
return false;
})
li = $('<li>' + category.name + '</li>');
more.appendTo(li);
li.appendTo(item);
build_menu(json, category.id, parent);
counter++;
}
});
if (counter > 0) {
menu = item;
$('#menu').prepend(menu);
}
}
Fiddle: http://jsfiddle.net/maniator/CxBrW/25/
Fiddle with slide animations: http://jsfiddle.net/maniator/CxBrW/26/
UPDATE:
Here is fiddle with no carrots if no children: http://jsfiddle.net/maniator/CxBrW/36/