1Cougar
asked on
JSON, JQuery inline menu
Hello,
I am trying to building different menus from a database and attach them to different divs in a webpage. I have the data being added correctly except that it is not inline. I would like it to look like this: "Overview | The One | " etc.
I just can't see what I am doing wrong....
Thanks in advance...
My json is this:
My javascript is:
And my CSS:
I am trying to building different menus from a database and attach them to different divs in a webpage. I have the data being added correctly except that it is not inline. I would like it to look like this: "Overview | The One | " etc.
I just can't see what I am doing wrong....
Thanks in advance...
My json is this:
{
"rows": [
{
"id": "1",
"abbr": "en",
"data": [
{
"textboxID": "1",
"text": "Overview"
},
{
"textboxID": "2",
"text": "The One"
},
{
"textboxID": "3",
"text": "Viewing"
},
{
"textboxID": "4",
"text": "Sorting"
},
{
"textboxID": "5",
"text": "What"
},
{
"textboxID": "6",
"text": "Contact"
},
{
"textboxID": "7",
"text": "About"
}
]
},
{
"id": "2",
"abbr": "fr",
"data": [
{
"textboxID": "1",
"text": "Sommaire"
},
{
"textboxID": "2",
"text": "Le carreaux"
},
{
"textboxID": "3",
"text": "Visualiser"
},
{
"textboxID": "4",
"text": "Filtrage"
},
{
"textboxID": "5",
"text": "'My Profile'"
},
{
"textboxID": "6",
"text": "'Contacte'"
},
{
"textboxID": "7",
"text": "Autour"
}
]
}
]
}
My javascript is:
var url1 = "GetJson.php?what=2";
$.getJSON( url1, function(result1) {
$.each(result1.rows, function(m,val){
var thesemenus =[];
var $div2 = $('<div/>').appendTo("."+$.trim(result1.rows[m].abbr));
$div2.attr('id', 'menuitem'+result1.rows[m].id);
$div2.attr('class', 'menuitem');
$.each(result1.rows[m].data, function(n,val){
if(m==0){
thismenu = '<div >| <a id="'+result1.rows[m].data[n].textboxID+'Menuitem" class="langmenu">'+result1.rows[m].data[n].text+'</a> |</div>';
} else {
thismenu = '<div > <a id="'+result1.rows[m].data[n].textboxID+'Menuitem" class="langmenu">'+result1.rows[m].data[n].text+'</a> |</div>';
}
thesemenus.push(thismenu);
});
$(thesemenus.join("")).appendTo("#menuitem"+result1.rows[m].id);
});
});
And my CSS:
#menuitem div#menuitem {
display: inline-block;
cursor:pointer;
}
.menuitem{ position:absolute;
top:80px;
width:100%;
margin-left:auto;
margin-right:auto;
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
color:gray;
z-index:9999;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.