Link to home
Start Free TrialLog in
Avatar of 1Cougar
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:

{
    "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"
                }
            ]
        }
    ]
}

Open in new window


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  >|&nbsp;<a id="'+result1.rows[m].data[n].textboxID+'Menuitem" class="langmenu">'+result1.rows[m].data[n].text+'</a>&nbsp;|</div>';
	} else {
	 thismenu = '<div   >&nbsp;<a id="'+result1.rows[m].data[n].textboxID+'Menuitem" class="langmenu">'+result1.rows[m].data[n].text+'</a>&nbsp;|</div>';
	}
    thesemenus.push(thismenu);
		});

$(thesemenus.join("")).appendTo("#menuitem"+result1.rows[m].id);	
		});	
	 	
						 
});

Open in new window


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;
	
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of 1Cougar
1Cougar

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial