我想创建一个垂直动态菜单，其中包含需要时弹出的菜单项。例如，菜单包含所有国家/地区名称，当您翻转国家/地区时，子菜单城市名称将变为可见。我选择了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或向字符串构建器添加文字控件也更好吗？
答案 0 :(得分：1)
下面是一个Jquery片段，它可以帮助你进行鼠标悬停和鼠标移除，我从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.
});
我构建了一个简单的响应式菜单，这可能有助于您理解，我的意思是整体检查下面的小提琴：
如果您对Jquery不满意，只需删除Jquery代码并在样式表中添加以下CSS：
ul li a:hover + ul ,.hidden:hover{
display: block;
}
我构建的原始菜单只是CSS，但我给你一个CSS和一个Jquery解决方案，你可以选择更适合你的那个。 :)
干杯。
答案 1 :(得分：0)
我接近使用HTMLGENERIC方法，但我决定使用stringbuilder重写整个事情并且它有效。像你说的那样添加到main.css加上C＃。
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();
}