How to bind Menus and submenus apply css using Jquery?


Tags: javascript,linq,jquery-ui,css3,asp.net-web-api

Problem :

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..



Solution :

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


    CSS Howto..

    Show s horizontally in a div
    table { display: inline-block; } This should work just fine for you....
    Read more

    How to stop loading pdf on mobile device?

    How to reduce spacing between navigation links CSS

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How to keep table headers fixed while scrolling down a table

    How to place a div at top center position of a page using css…?

    How to delete first pseudo after

    How to load .css file from parent directory with .htaccess rule?

    How do I get form-groups to overlap?

    Behavior/Styling Separation - How to use IDs, classes and custom attributes for CSS and JavaScript?

    How can I get facing html elements to left-align and right-align, respectively, preferably using CSS?

    How can I push to the top an element using slideUp?

    How do I put a box around my Flot graph?

    How to prevent an empty img element from shrinkage?

    How to set element in css at fixed position

    How does one override the JQuery UI styles?

    How is `outline: inherit 0` interpreted?

    Show Item when Hover Over Parent

    How to vertically center links in a menu?

    Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

    How to set background color for a boxed link?

    How to make a picture hover over others without moving the other pictures?

    How to set background color in border in CSS

    How to have the cutout of a div at the bottom right with shadow to the left

    How to style this triangle on a circular image?

    How to organize user's shares to easily add comments to that particular post?

    How to remove an element without id

    CSS: How to change class style if another style is hover

    How to properly pad an HTML link?