Creating a Dynamic Menu - css

Question

I want to created a vertical dynamic menu with menu items that pop when needed. For example, menu has all country names and when you roll over a country, sub menu city names becomes visible. I chose the UL method to do this. So far I can make the menu list etc, but I have no idea how to make the sub menus visible and hide on roll over of country. Here is the code I got.
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;");
}
}
}
Also is it better to create HTMLGENERICCONTROLS or adding literal controls to a string builder?

Answer 1

heres a snippet of Jquery that might help you for the mouseover and mouseout, i picked it from a Jquery plugin :
$(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.
});
I have constructed a simple responsive menu , which might help you understand , what i mean as a whole check out the fiddle below :
fiddle
incase you are not comfortable with Jquery , just remove the Jquery code and add the following peice of CSS in the stylesheet :
ul li a:hover + ul ,.hidden:hover{
display: block;
}
The original menu i build was intended to be CSS only , but i am giving you both a CSS as well as a Jquery solution , you can pick whichever one is more suited to you. :)
Cheers.

Answer 2

I was close to getting to work with HTMLGENERIC method, but I decided to rewrite the whole thing using stringbuilder and it worked. adding like u said to main.css plus in 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();
}