Saturday 7 February 2015

html multilevel ul li menu

c# code to create necessary html on run time 
 private void CreateMenu()
        {
            string conString = ConfigurationManager.ConnectionStrings["Yourconnection"].ToString();

            using (SqlConnection myConnection = new SqlConnection(conString))
            {
                string query = "select * from tbl_Menu";
                SqlCommand oCmd = new SqlCommand(query, myConnection);
                myConnection.Open();
                using (SqlDataReader oReader = oCmd.ExecuteReader())
                {
                    while (oReader.Read())
                    {
                        MenuEntity menuObj = new MenuEntity();
                        menuObj.ID = Convert.ToInt32(oReader["ID"].ToString());
                        menuObj.Text = oReader["MenuText"].ToString();
                        menuObj.URL = oReader["MenuUrl"].ToString();
                        if (!oReader.IsDBNull(oReader.GetOrdinal("ParentID")))
                        {
                            menuObj.PID = (int)oReader["ParentID"];
                        }
                        else
                        {
                            menuObj.PID = 0;
                        }
                        menucol.Add(menuObj);
                    }
                    myConnection.Close();
                }

            }
            StringBuilder sb = new StringBuilder();
            sb.Append("
    ");
            foreach (var s in menucol)
            {
                if (s.PID == 0)
                {
                    sb.Append("


  • " + s.Text + "");

  •                     sb.Append(this.getChildren(s.ID));
                        sb.Append("
    ");                }
                }
                sb.Append("
    ");            listContainer.InnerHtml = sb.ToString();
            }

            private string getChildren(int parenid)
            {
                StringBuilder sb = new StringBuilder();
                var childmenus = from m in menucol
                                 where m.PID == parenid
                                 orderby m.Text
                                 select m;
                if (childmenus.Count() > 0)
                {
                    sb.Append("
      ");
                    foreach (var s in childmenus)
                    {
                        sb.Append("


  • " + s.Text + "");

  •                     sb.Append(getChildren(s.ID));
                        sb.Append("
    ");                }
                    sb.Append("
    ");            }
                return sb.ToString();
            }

    To render menu and have a toggle effect:
     <script>
            $(document).ready(function () {
                $('#listContainer li:has(ul)').addClass("has-sub");
                $('#listContainer').find('.has-sub').find('a:first').addClass("sub");
                $('#listContainer ul ul').addClass("sub-menu");
                $(".sub-menu").hide();
                // $('#listContainer').find('li:has(ul)').addClass('collapsed');
                $('#listContainer').find('li:not(:has(ul))').find('img').remove();           
                $('#listContainer').find('li:has(ul)').find('img').attr('src', 'down.png'); 
                $('#listContainer li img').click(function (e) {
                   
                    var checkElement = $(this).siblings('ul');  

                    if ($(this).closest('li').siblings('li:has(ul)').not(':visible')) {
                        $(this).closest('li').siblings('li:has(ul)').find('img').removeAttr('src');
                        $(this).closest('li').siblings('li:has(ul)').find('img').attr('src', 'down.png');
                    }

                    $.each($(this).closest('li').children('ul').find('li'), function (i, v) {

                        if ($(this).find('img').attr('src') == 'up.jpg') {
                            $(this).find('img').removeAttr('src');
                            $(this).find('img').attr('src', 'down.png');
                            $(this).find('ul').slideUp();

                        }
                    });


                    if ($(this).closest('li').siblings('li:has(ul)').find('ul>li:has(ul)').find('img').attr('src') == 'up.jpg') {
                        $(this).closest('li').siblings('li:has(ul)').find('ul>li:has(ul)').find('img').removeAttr('src');
                        $(this).closest('li').siblings('li:has(ul)').find('ul>li:has(ul)').find('img').attr('src', 'down.png');
                        $(this).closest('li').siblings('li:has(ul)').find('ul').slideUp('normal');

                    }
                    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {


                        $(this).closest('img').removeAttr('src');      //new code
                        $(this).closest('img').attr('src', 'down.png');   //new code

                        if ($(this).closest('li').find('ul>li:has(ul)').find('img').attr('src') == 'up.jpg') {
                            $(this).closest('li').find('ul>li:has(ul)').find('img').removeAttr('src');
                            $(this).closest('li').find('ul>li:has(ul)').find('img').attr('src', 'down.png');
                            $(this).closest('li').find('ul').slideUp('normal');

                        }
                        if ($(this).closest('li').siblings('li:has(ul)').children('ul').is(':visible')) {
                            $(this).closest('li').siblings('li:has(ul)').children('ul').slideUp('normal');
                            $(this).closest('li').siblings('li:has(ul)').find('ul.li').find('img').removeAttr('src');
                            $(this).closest('li').siblings('li:has(ul)').find('ul.li').find('img').attr('src', 'down.png');

                        }
                        checkElement.slideUp('normal');

                    }

                    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

                        $(this).closest('img').removeAttr('src');      //new code
                        $(this).closest('img').attr('src', 'up.jpg');   //new code
                        $('#listContainer ul:visible').not(checkElement.parentsUntil('#listContainer')).slideUp('normal');
                        checkElement.slideDown('normal');

                    }

                });
            });
        </script>
     

    Menu will look like: