我想創建一個垂直動態菜單,菜單項在需要時彈出。例如,菜單包含所有國家/地區名稱,當您翻轉國家/地區時,子菜單城市名稱將變爲可見。我選擇了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或將字符控件添加到字符串生成器更好嗎?
像這樣http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ ?? ?? – 2015-02-09 05:47:14
但是當我從數據庫的信息創建菜單時,使用C#代碼創建菜單。我只是不知道如何使子菜單隱藏/顯示mouseover或mouseout – 2015-02-09 06:38:32
是否很好用jquery?mouseover或mouseout將必須使用JavaScript或Jquery完成。我想 – 2015-02-09 07:54:13