创建动态菜单

Question

我想创建一个垂直动态菜单，其中包含在需要时弹出的菜单项。例如，菜单包含所有国家/地区名称，当您滚动一个国家/地区时，子菜单城市名称变得可见。我选择了 UL 方法来执行此操作。到目前为止，我可以制作菜单列表等，但我不知道如何使子菜单可见并在国家翻转时隐藏。这是我得到的代码。

        qString = "SELECT t.cID, t.cCountry, t.cPlace, t.cRating FROM tplaces AS t ORDER BY t.cCountry ASC, t.cPlace";

        dtMenuPlaces = GetTable(qString);

        int placeMenuWidth = 130;
        int placeMenuHeight = 40;

        if (dtMenuPlaces != null)
        {
            int menuY = 0;

            string previousCountry = "";
            int previousBGColor = 0;
            Random rand = new Random();

            string fnMenuBG = "blankblockBlue";

            HtmlGenericControl mainLI = new HtmlGenericControl("li");
            HtmlGenericControl subUL = new HtmlGenericControl("ul");

            for (int x = 0; x < dtMenuPlaces.Rows.Count; x++)
            {

                int rnMenuBG = rand.Next(1, arrayMenuButtonNames.Length) - 1;
                int cPlaceID = Convert.ToInt32(dtMenuPlaces.Rows[x][0]);
                string cCountry = dtMenuPlaces.Rows[x][1].ToString();
                string cPlace = dtMenuPlaces.Rows[x][2].ToString();
                int cRating = Convert.ToInt32(dtMenuPlaces.Rows[x][3]);

                string tempUrl = cCountry + cPlace + ".aspx";

                tempUrl = tempUrl.Replace(" ", "");

                tempUrl += "?fVar1=place&" + "fVar2=" + cPlace + "&fVar3=" + cCountry;

                System.Text.StringBuilder tString = new System.Text.StringBuilder();
                // used to make multiline buttons.

                if (cPlace != "")
                {
                    //  tString.Append(Environment.NewLine);
                    tString.AppendLine(cPlace);
                }
                else
                {

                    tString.AppendLine(cCountry);
                }

                if (previousCountry != cCountry)
                {

                    rnMenuBG = rand.Next(1, arrayMenuButtonNames.Length) - 1;

                    while (rnMenuBG == previousBGColor)
                    {
                        System.Diagnostics.Debug.WriteLine("Random -  #" + rnMenuBG + " P " + previousBGColor);
                        rnMenuBG = rand.Next(1, arrayMenuButtonNames.Length) - 1;


                    }

                    fnMenuBG = "blankblock" + arrayMenuButtonNames[rnMenuBG];

                    mainLI = new HtmlGenericControl("li");
                    menuPlaces.Controls.Add(mainLI);

                    HtmlGenericControl mainA = new HtmlGenericControl("a");
                    mainA.Attributes.Add("href", tempUrl);
                    mainA.InnerText = tString.ToString();
                    //    mainA.Attributes.Add("onmouseover", "mainLI.style.display='none'");
                    //    mainA.Attributes.Add("onmouseout", "mainLI.style.display='block'");
                    mainA.Attributes.Add("style", "text-decoration: none;width:" + placeMenuWidth + "px;height:" + placeMenuHeight + "px;line-height:" + placeMenuHeight + "px;");
                    mainLI.Controls.Add(mainA);

                    subUL = new HtmlGenericControl("ul");
                    mainLI.Controls.Add(subUL);
                    mainLI.ID = "mainList";

                    previousCountry = cCountry;
                    previousBGColor = rnMenuBG;

                    //  mainLI.Style["Background-image"] = "url:('images/gfx/" + fnMenuBG + ".gif'); no-repeat;";
                    mainLI.Attributes.Add("style", "display:block;position:absolute;top:" + menuY + "px;font-size:14px;font-family:century gothic;text-align: center;font-weight:bold;background:url('images/gfx/" + fnMenuBG + ".gif'); background-repeat:no-repeat;");
                    //  mainLI.Attributes.Add("style", "background:url('images/gfx/" + fnMenuBG + ".gif'); background-repeat:no-repeat;");

                    menuY += placeMenuHeight + 5;
                }
                else
                {
                    rnMenuBG = previousBGColor;

                    fnMenuBG = "blankblock" + arrayMenuButtonNames[rnMenuBG];

                    /// add SUB place if not main country.
                    HtmlGenericControl subLI = new HtmlGenericControl("li");
                    subUL.Controls.Add(subLI);

                    subUL.Attributes.Add("style", "display:block;position:relative;top:-" + placeMenuHeight + "px;left:" + placeMenuWidth + "px;margin: 0px; padding:0px;width:" + placeMenuWidth + "px;list-style-type:none;");

                    HtmlGenericControl subA = new HtmlGenericControl("a");
                    subA.Attributes.Add("href", tempUrl);
                    // subA.Attributes.Add("onmouseover", "this.style.color=\"red\"");
                    //  subA.Attributes.Add("onmouseout", "this.style.color=\"black\"");
                    // subA.Attributes.Add("onclick", "this.style.color=\"yellow\"");
                    subA.Attributes.Add("style", "text-decoration: none;display:block;width:" + placeMenuWidth + "px;height:" + placeMenuHeight + "px;line-height:" + placeMenuHeight + "px;");
                    subA.InnerText = tString.ToString();
                    subLI.Controls.Add(subA);

                    //  subLI.Style["Background-image"] = "url:('images/gfx/" + fnMenuBG + ".gif'); no-repeat;";
                    subLI.Attributes.Add("style", "width:" + placeMenuWidth + "px;height:" + placeMenuHeight + "px;margin:0px;margin-bottom:5px;;padding:0px;font-size:14px;font-family:century gothic;text-align: center;font-weight:bold;background:url('images/gfx/" + fnMenuBG + ".gif'); background-repeat:no-repeat;");

                    //  subLI.Attributes.Add("style", "font-size:14px;font-family:century gothic;text-align: center;font-weight:bold");
                    // subLI.Attributes.Add("style", "background:url('images/gfx/" + fnMenuBG + ".gif'); background-repeat:no-repeat;");

                }

            }
        }

创建 HTMLGENERICCONTROLS 还是向字符串生成器添加文字控件更好？

Answer 1

这里有一个 Jquery 的 sn-p，它可以帮助你进行鼠标悬停和鼠标移出，我从一个 Jquery 插件中挑选了它：

$(document).ready(function(){
                var el = $('li');
                var hidden_ul = $('.hidden')
                el.on('mouseover mouseout', function(e) {
                    $(this).find('.hidden').css({'display' : 'block'});
                    e.type == 'mouseout' &&  $(this).find('.hidden').css({'display' : 'none'});
                });  //---------------------------- End on function.    
            });

我已经构建了一个简单的响应式菜单，这可能会帮助您理解我的意思，请查看下面的小提琴：

fiddle

如果您对 Jquery 不满意，只需删除 Jquery 代码并在样式表中添加以下 CSS 片段：

ul li a:hover + ul ,.hidden:hover{
    display: block;
}

我构建的原始菜单只打算使用 CSS，但我给你一个 CSS 和一个 Jquery 解决方案，你可以选择更适合你的一个。 :)

干杯。

Answer 2

我即将开始使用 HTMLGENERIC 方法，但我决定使用 stringbuilder 重写整个事情并且它起作用了。像你说的那样在 C# 中添加到 main.css plus。

System.Text.StringBuilder sbMenu = new System.Text.StringBuilder();

        qString = "SELECT t.cID, t.cCountry, t.cPlace, t.cRating FROM tplaces AS t ORDER BY t.cCountry ASC, t.cPlace";

        dtMenuPlaces = GetTable(qString);

        if (dtMenuPlaces != null)
        {

            string previousCountry = "";
            int previousBGColor = 0;
            Random rand = new Random();

            string fnMenuBG = "blankblockBlue";

        //    HtmlGenericControl mainLI = new HtmlGenericControl("li");
        //    HtmlGenericControl subUL = new HtmlGenericControl("ul");

            for (int x = 0; x < dtMenuPlaces.Rows.Count; x++)
            {

                int rnMenuBG = rand.Next(1, arrayMenuButtonNames.Length) - 1;
                int cPlaceID = Convert.ToInt32(dtMenuPlaces.Rows[x][0]);
                string cCountry = dtMenuPlaces.Rows[x][1].ToString();
                string cPlace = dtMenuPlaces.Rows[x][2].ToString();
                int cRating = Convert.ToInt32(dtMenuPlaces.Rows[x][3]);

                string tempUrl = cCountry + cPlace + ".aspx";

                tempUrl = tempUrl.Replace(" ", "");

                tempUrl += "?fVar1=place&" + "fVar2=" + cPlace + "&fVar3=" + cCountry;

                System.Text.StringBuilder tString = new System.Text.StringBuilder();
                // used to make multiline buttons.

                if (cPlace != "")
                {
                    //  tString.Append(Environment.NewLine);
                    tString.AppendLine(cPlace);
                }
                else
                {

                    tString.AppendLine(cCountry);
                   if (x != 0)
                    {
                        sbMenu.Append("</ul>");
                    }

                }


                if (previousCountry != cCountry)
                {

                    rnMenuBG = rand.Next(1, arrayMenuButtonNames.Length) - 1;

                    while (rnMenuBG == previousBGColor)
                    {
                        System.Diagnostics.Debug.WriteLine("Random -  #" + rnMenuBG + " P " + previousBGColor);
                        rnMenuBG = rand.Next(1, arrayMenuButtonNames.Length) - 1;


                    }

                    fnMenuBG = "blankblock" + arrayMenuButtonNames[rnMenuBG];

                    sbMenu.Append("<li class='subMenuPlaces' style = background:url('images/gfx/" + fnMenuBG + ".gif');background-repeat:no-repeat;><a href='" + tempUrl + "'>" + tString.ToString() + "</a><ul class='subList'>");

                    previousCountry = cCountry;
                    previousBGColor = rnMenuBG;       

                }
                else
                {
                    rnMenuBG = previousBGColor;

                    fnMenuBG = "blankblock" + arrayMenuButtonNames[rnMenuBG];

                    sbMenu.Append("<li class='subMenuPlaces' style = background:url('images/gfx/" + fnMenuBG + ".gif');background-repeat:no-repeat;><a href='" + tempUrl + "'>" + tString.ToString() + "</a></li>");

                }

            }
            menuPlaces.InnerHtml = sbMenu.ToString();

        }