CODEWITHSUNDEEP
jquerycss
Nithin Viswanathan
Nithin Viswanathan

Reputation: 3283

How to add a picture in javascript for menu

I have a horizontal menu. This menu has child and these child has sub child. These menu is getting from a json file. Here I want to add an arrow image for child for showing, these child has sub child. How can I add this image? My javascript page is 

$(function() {
for(var i = 0, j = data[0].menu.length; i<j; i++) {
    var root_menu = data[0].menu[i];
    if(root_menu.hasOwnProperty("MenuId")) {
        $("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>');
        if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
            $("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>");
            for(var n = 0, m = root_menu.Menus.length; n<m; n++) {
                var sub_menu = root_menu.Menus[n]; 
                if(sub_menu.hasOwnProperty("MenuId")) {
                    $("#menu_" + root_menu.MenuId).append("<li class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>");
                    if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
                        $("#menu_" + root_menu.MenuId + " li").last().append("<ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
                        for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){
                            var subsub_menu = sub_menu.Menus[oo];
                            $("#menu_" + sub_menu.MenuId).append('<li class="nav-subchild"><a href="#">' + subsub_menu.MenuName + '</a>');
                        }
                        $("#menu_" + root_menu.MenuId + " li").last().append("</ul>");
                    }
                }
            }

        }
 $("#menu").append("</ul></li>");

    }
}
});

Upvotes: 3

Views: 319

Answers (4)

Martin Turjak
Martin Turjak

Reputation: 21214

Do it simply in css. Elements of a special class sub-menu get an arrow icon in the background.

Edit: When you are building the menu from json, you can already add a special class to menu item that have a submenu, since you are already checking that there

 ...   
   if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
     $("#menu_" + root_menu.MenuId + " li").last().addClass('hassub');
 ...

Then you add the icon to the css for elements with class hassub. I added this to your fiddle:http://jsfiddle.net/ucpcA/18/

Edit: Or, you can just append a character to the string in the exact same step when you are adding the ul element (this step you would be doing any way). As I already wrote in the comments to roXon's answer, but I will just add it here too:

 ...   
   if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
     $("#menu_" + root_menu.MenuId + " li").last().append(" ▼ <ul class='subchild-list' id='menu_" + sub_menu.MenuId + "'>");
 ...

And then there is no additional css code =)

Upvotes: 4

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

You can do like: LIVE DEMO

$("#menu li:has(ul) > a").append('▼');

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

You can add an image in your code after testing if it has sub-menu

By adding an arrow image in anchor tag in li class menu-child

Like in your code: <a href="#">Masters <img src="arrow.png" align="right" width:10px /></a>

Upvotes: 1

zdesam
zdesam

Reputation: 2976

I am not clear where you want the arrow but you can do something like

 #nav > ul > li:hover {
 background: url(images/dropdown_arrow.png) no-repeat scroll 0 0 #FFFFFF;
 border-color: #ccc #ccc #FFFFFF;
 border-style: solid;
 border-width: 1px;
 padding-bottom: 0;
 border-radius:1px;
 }

See fiddle update here http://jsfiddle.net/ucpcA/15/

Upvotes: 1

Related Questions