2015-02-09 160 views
0

我想創建一個垂直動態菜單,菜單項在需要時彈出。例如,菜單包含所有國家/地區名稱,當您翻轉國家/地區時,子菜單城市名稱將變爲可見。我選擇了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

像這樣http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ ?? ?? – 2015-02-09 05:47:14

+0

但是當我從數據庫的信息創建菜單時,使用C#代碼創建菜單。我只是不知道如何使子菜單隱藏/顯示mouseover或mouseout – 2015-02-09 06:38:32

+0

是否很好用jquery?mouseover或mouseout將必須使用JavaScript或Jquery完成。我想 – 2015-02-09 07:54:13

回答

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.  
      }); 

我構建了一個簡單的響應菜單,這可能會幫助你理解,我意味着整個檢查出下面的小提琴:

fiddle

櫃面你不舒服與jQuery,只是刪除了jQuery代碼,並添加CSS以下peice的樣式表:

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

我構建的原始菜單僅用於CSS,但我給了你一個CSS以及一個Jquery解決方案,你可以選擇哪一個更適合你。 :)

乾杯。

+0

我已經接近使用HTMLGENERIC方法,但我決定使用stringbuilder重寫所有的東西,它工作。添加像你說的main.css加在C# – 2015-02-09 10:10:47

+0

@ColinKozik做我的解決方案幫助至少? – 2015-02-09 10:23:57

0

我已經接近使用HTMLGENERIC方法,但我決定使用stringbuilder重寫整個事物並且它工作正常。像在u上添加對C#中的main.css加。

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(); 

     }