How to bind Menus and submenus apply css using Jquery?

Question

i have data in sting values in html format how to apply css and jquery styles

 public class Menus
      {
        public List<Menus> GetALL { get; set; }  
            public int menuId { get; set; }
            public string menuName { get; set; }
            public string menuURL { get; set; }
            public int parentId { get; set; }
       }    
    public class MenuModel
    {
        public MenuItemsEntities objEntities = new MenuItemsEntities();

        public string GetMenu()
        {
            //Get MainMenu Menus       
            Menus menuobj = new Menus();            
            var objmenu = from menus in objEntities.MenuItems
                          where menus.ParentId == 0
                          select menus;

            string strMenuBuild = string.Empty;
            strMenuBuild += "<ul>";
            foreach (var i in objmenu)
            {
                menuobj.menuName = i.ItemName;
                menuobj.menuId = i.MenuItemsID;
                menuobj.menuURL = i.URL;
                if (i.ParentId == 0)
                {                  
                    //GetSubMenu();
                    strMenuBuild = strMenuBuild + "<li><a href='" + menuobj.menuURL + "'>" + menuobj.menuName + "</a><ul>";
                    strMenuBuild += GetSubMenu(Convert.ToInt32(menuobj.menuId)) + "</ul></li>";
                    //strMenuBuild  += "</ul></li>";
                }
            }
            strMenuBuild += "</ul>";
            return strMenuBuild;
        }
        public string GetSubMenu(int submenuid)
        {
            string strSubBuild = string.Empty;
            Menus menuobj = new Menus();    
            var submenu=   from menus in objEntities.MenuItems
                          where menus.ParentId == submenuid
                          select menus;           
            if (submenu.Count() > 0)
            {
                foreach (var sbmnu in submenu)                
                {
                    menuobj.menuURL = sbmnu.URL;
                    menuobj.menuName = sbmnu.ItemName;
                    menuobj.menuId = sbmnu.MenuItemsID;

                    strSubBuild = strSubBuild + "<li ><a href='" + menuobj.menuURL + "'>" + menuobj.menuName + "</a>";

                    var submneu1 = from menus in objEntities.MenuItems
                                   where menus.ParentId == menuobj.menuId 
                                   select menus;

                    if (submneu1.Count() > 0)
                    {
                        strSubBuild += "<ul>";
                        strSubBuild += GetSubMenu(Convert.ToInt32(menuobj.menuId));
                        strSubBuild += "</ul>";  
                    }
                    strSubBuild += "</li>";
                }               
            }
            return strSubBuild;
        }
    }

I have return to String In Html formate like that

Menu's Apperals
- Shirts
- T Shirts
  - H3SubMenu1
- Jeans
  - P1Submenu1
  - P2SubMenu2
- Trousers
- SportsWear
Women'sMenu' Apperals
- Sarees
- Dress
- Trousers
Mobiles
- MobilePhones
- Tablets
- Memorycards
- Bluetooths
Jewellerry
- Earrings
- Rings
- Chains
- KidsJwellery

But am bind the Menus and submenus .i want appy the css and jquery.how to apply Css and jquery i dont know .can any one help me please..

score 1 · Accepted Answer · answered Oct 17 '12 at 13:20

1

This is the function I use to build up my menu structure:

var buildMenu = function(menu, el) {
    var ul = $('<ul></ul>');
    ul.appendTo(el);
        for(var i in menu) {
            var menuItem = $('<li><a href="' + menu[i].url + '">' + menu[i].title + '</a></li>');
            menuItem.appendTo(ul);
            if(menu[i].subMenu) {
                buildMenu(menu[i].subMenu, menuItem);
            };
        };
}

menu being th JSON object that contains the menu and el being the div or containing element to insert the menu into.

My Menu object has the following format:

var menu : [{
    title   : 'Home',
    url     : 'Default.html'
}, {
    title   : 'Groups',
    url     : '#',
    subMenu : [{
        title   : 'Group1',
        url     : 'Group1.html'
    },{
        title   : 'Group2',
        url     : 'group2.html'
    }]
}];

Hope that helps

answered Oct 17 '12 at 13:20

Koenyn

694
4
16

You can try this link for menu styles: http://javascript-array.com/scripts/multi_level_drop_down_menu/?st or this one: http://www.noupe.com/css/100-great-css-menu-tutorials.html – Koenyn Oct 17 '12 at 13:26
@koenyn..Actually return Html format right.so want write jquery function apply values...i saw the link http://stackoverflow.com/questions/6688963/jquery-recursive-function-combine-nested-li-into-one... still am confuse how to convert into jquery.. plas help me plase – Dotnet ReSource Oct 17 '12 at 13:38
Well if you have the HTML in the right format and you know what styles you want to use and all you want to do is apply css classes to your HTML using jQuery, that's pretty simple. You use css selectors to grab jQuery objects. i.e. to get your li elements you can use `$("li")` then to add a css class to that you would use something like `$("li").addClass("menuItem");` – Koenyn Oct 19 '12 at 06:44
@Koenyn... Ya i know Styels but am return to only one css Appy .i am return dynamically one format but i want different css also appy. – Dotnet ReSource Oct 19 '12 at 07:13

How to bind Menus and submenus apply css using Jquery?

1 Answers1