Posted By

gndprx on 02/07/07


Tagged

css menu Collapsable


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jeroldan
Bonitarunner


CSS / SQL / .NET menu bar


 / Published in: C#
 

  1. //---------------------------------------
  2. //CSS Code
  3. dl, dt, dd{
  4. margin: 0;
  5. padding: 0;
  6. list-style-type: none;
  7. }
  8.  
  9. .smenu, .smenu li {
  10. margin: 0;
  11. padding: 0;
  12. list-style-type: none;
  13. }
  14.  
  15. #menu2 {
  16. }
  17.  
  18. dl#menu2 {
  19. width: 150px;
  20. }
  21.  
  22. dl#menu2 dt {
  23. cursor: pointer;
  24. margin: 2px;
  25. padding: 1px 5px 1px 5px;
  26. text-align: left;
  27. font-weight: bold;
  28. background: url(../images/menu_bg2.png) no-repeat;
  29. padding-bottom: 5px;
  30. }
  31.  
  32. dl#menu2 dt:hover {
  33. background: url(../images/menu_bg3.png) no-repeat;
  34. color: #fff;
  35. }
  36.  
  37. dl#menu2 a:hover {
  38. color:#fff;
  39. }
  40.  
  41. dl#menu2 dd li {
  42. padding-bottom: 2px;
  43. }
  44.  
  45. dl#menu2 ul { margin:0px; padding:0px;}
  46.  
  47. dl#menu2 li {
  48. text-align: left;
  49. padding: 1px 5px 1px 20px;
  50. width: 120px;
  51. }
  52.  
  53. dl#menu2 li a, dl#menu2 dt a {
  54. color: #006685;
  55. text-decoration: none;
  56. height: 100%;
  57. }
  58.  
  59. dl#menu2 li:hover {
  60. background: #729dc9;
  61. }
  62. //---------------------------------------
  63.  
  64. //---------------------------------------
  65. // Jscript component to expand/collapse
  66. window.onload=expand;
  67. function expand(id) {
  68. var d = document.getElementById(id);
  69. for (var i = 1; i<=10; i++) {
  70. if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  71. }
  72. if (d) {d.style.display='block';}
  73. }
  74. //---------------------------------------
  75.  
  76. //---------------------------------------
  77. //DB Table Requirements
  78. //menuID, menuItem, menuLink, parentMenuID, displayOrder, publishDate, expDate
  79. //---------------------------------------
  80.  
  81. //---------------------------------------
  82. //.Net 2.0 Code to put menu into a Label
  83. //Build and output main left bar navigation
  84. someTableAdapters.parentMenuTableAdapter menuAdapter = new someTableAdapters.parentMenuTableAdapter();
  85. some_Menu.parentMenuDataTable parentItems;
  86. parentItems = menuAdapter.GetData();
  87. int x = 1;
  88. LeftMenu.Text = "<dl id=\"menu2\">\n";
  89. foreach (some_Menu.parentMenuRow menuRow in parentItems)
  90. {
  91. LeftMenu.Text = LeftMenu.Text + "<dt onclick=\"javascript:expand('smenu" + x +"');\">» <a href=\"#\">" + menuRow.menuItem + "</a></dt>";
  92.  
  93. #region Sub Menu
  94. someTableAdapters.subMenuTableAdapter subAdapter = new someTableAdapters.subMenuTableAdapter();
  95. some_Menu.subMenuDataTable subItems;
  96. subItems = subAdapter.GetData(menuRow.menuID);
  97. LeftMenu.Text = LeftMenu.Text + "<dd id=\"smenu" + x + "\">\n";
  98. LeftMenu.Text = LeftMenu.Text + "<ul class=\"smenu\">\n";
  99. foreach (some_Menu.subMenuRow subRow in subItems)
  100. {
  101. LeftMenu.Text = LeftMenu.Text + "<li><a href=\"" + subRow.menuLink + "\">" + subRow.menuItem + "</a></li>\n";
  102. }
  103. LeftMenu.Text = LeftMenu.Text + "</ul></dd>\n";
  104. #endregion
  105. x++;
  106. }
  107. LeftMenu.Text = LeftMenu.Text + "</dl>";
  108. //---------------------------------------

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: gndprx on February 7, 2007

This code uses 2 .Net Table Adapters (app_code) 1 to read the Parent Menu items 1 to read the sub Menu items based off of parent.menuID = sub.parentMenuID

The publishDate and expDate in the database allow the query to dynamically add pre-configured menu items on a certain date for a specified length of time.

You need to login to post a comment.