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

    CSS - How to break long words in a table td?

    How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to restore CSS style to its super class

    How to build a hover effect with css only, or css+jquery

    How to control size of list-style-type disc in CSS?

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    How to change CSS to the same class but another input name

    How to reuse styles?

    How to get custom css to load after richfaces?

    How to create CSS-based (big) quotation marks?

    How to make emails responsive?

    how can i center the footer text in the bottom of the page regardless of screen size

    Including loads of css files and Javascript file - how do I optimize

    How to REALLY control font size in an eBay listing [closed]

    How to correctly override inaccessible HTML content with CSS?

    How to apply asynchronously fetched CSS into view

    How to Style Social Media Links Correctly

    How to force margins to be ready from js before document ready

    How to change label using CSS?

    How to style Menu border/outline in JavaFX8 using CSS?

    How to hide Fileupload with simple span by using css

    CSS - How to move an absolutely positioned item relatively to its current position

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    How to display half of a character(html entity) using css (and if required jquery)

    CSS How to make div 100% despite 80% div

    Intellij IDEA 11: how can I compile .css from .less?

    How to replace borders around modal window in Fancybox 2.1.5?

    how to design like this form in html

    How can I dynamically assign css line-height to nested objects using jQuery?