You are here

megamenu.css in Megamenu 7

Same filename and directory in other branches
  1. 6.2 megamenu.css
  2. 6 megamenu.css
/*=============================================================
 * This style sheet is divided into the following 3 sections:
 * 1 Fundamentals
 *    1.1 Reset
 *    1.2 Structure
 *     1.3 Default styles
 * 2 User Overrides
 *    2.1 Widths, margins, and padding
 *    2.2 Vertical menu
 *    2.3 Horizontal slots
 * 3 Skins
 *=============================================================*/

/* @group Fundamentals */

/* Reset
 *------------------------------------------------------------*/
/* @group Reset */
.megamenu-menu,
.megamenu-menu *,
.megamenu-menu .megamenu-parent,
.megamenu-menu .megamenu-parent-title,
.megamenu-menu .megamenu-bin,
.megamenu-menu .megamenu-slot,
.megamenu-menu .megamenu-slot-title,
.megamenu-menu .megamenu-items {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

ul.megamenu-menu,
.megamenu-menu ul.megamenu-items {
  list-style: none;
}

/* @end */

/* Structure
 *------------------------------------------------------------*/
/* @group Structure */
.megamenu-menu {
  overflow: visible; /* Contain floated elements */
}

.megamenu-menu .megamenu-parent {
  display: inline-block;
  position: relative;
  z-index: 99;
}

.megamenu-menu .megamenu-parent-title {
  display: inline;
}

.megamenu-menu .megamenu-bin {
  position: absolute;
  left: 0; /* Default horizontal orientation */
  top: -9000px; /* default hidden position */
  z-index: 10000;
  overflow: hidden;
}

/* Bin Alignment
 *--------------------------------------------------------*/
.megamenu-menu .megamenu-bin-right {
  left: auto;
  right: -500px;
}

/* @group Horizontal Links */
.megamenu-menu .megamenu-links-horizontal {
  overflow: hidden;
}

.megamenu-menu .megamenu-links-horizontal li,
.megamenu-menu .megamenu-links-horizontal li a {
  float: left;
}

/* @end Horizontal Links */

.megamenu-menu .megamenu-menu-vertical .megamenu-parent {
  display: block;
}

/* @end Structure */

/* Default styles
 *--------------------------------------------------------*/
/* @group Default styles */

.megamenu-menu ul a {
  text-decoration: none;
}

.megamenu-menu ul a:hover {
  text-decoration: underline;
}

/* @end */
/* @end Fundamentals */

/* User Overrides
 *
 * This part will have to be dynamically generated in the
 * customization admin screen.  The user can specify the
 * proper widths for structural elements according to the
 * ID of the mega menu.
 *--------------------------------------------------------*/
/* @group Widths, Padding, & Margins */
.megamenu-parent {
  margin: 0.1em 1em; /* Left margin affects fly-out value */
}

.megamenu-menu .megamenu-bin {
  padding: 0.5em;
}

.megamenu-menu .megamenu-slot {
  width: 200px; /* move this to skins or php */
  margin-bottom: 0.5em;
}

/* Vertical Orientation
 *--------------------------------------------------------*/
/* @group Vertical Menu */
.megamenu-menu-vertical {
  width: 8em;
}

.megamenu-menu-vertical .megamenu-parent {
  margin-top: 1em;
}

.megamenu-slots.flyright {
  left: 7em; /* [megamenu-menu-vertical] (width) - [megamenu-parent] (margin) */
  top: 0;
}

.megamenu-slots.flyleft {
  left: -16.2em; /* Calculation of this value did not seem straightforward */
  top: 0;
}

/* @end */

/* Horizontal Orientation
 *--------------------------------------------------------*/
/* @group Horizontal Slots */
/* This value will have to be calculated to account for slot widths + margins */
/* 2009.1009.1437 EFD: this width conflicted with our layout. it made more sense for us to set width on the slots themselves. unsure how the interface should handle this. */
.megamenu-menu .megamenu-slots-columnar {
  overflow: hidden; /* contain floated slots */
}

.megamenu-slots-columnar li.megamenu-slot {
  float: left;
}

/* @end Horizontal Slots */
/* @end Widths*/

/* megamenu-menu end */

/* Compatibility with Admin Menu */
.megamenu-menu {
  z-index: 10;
}

File

megamenu.css
View source
  1. /*=============================================================
  2. * This style sheet is divided into the following 3 sections:
  3. * 1 Fundamentals
  4. * 1.1 Reset
  5. * 1.2 Structure
  6. * 1.3 Default styles
  7. * 2 User Overrides
  8. * 2.1 Widths, margins, and padding
  9. * 2.2 Vertical menu
  10. * 2.3 Horizontal slots
  11. * 3 Skins
  12. *=============================================================*/
  13. /* @group Fundamentals */
  14. /* Reset
  15. *------------------------------------------------------------*/
  16. /* @group Reset */
  17. .megamenu-menu,
  18. .megamenu-menu *,
  19. .megamenu-menu .megamenu-parent,
  20. .megamenu-menu .megamenu-parent-title,
  21. .megamenu-menu .megamenu-bin,
  22. .megamenu-menu .megamenu-slot,
  23. .megamenu-menu .megamenu-slot-title,
  24. .megamenu-menu .megamenu-items {
  25. margin: 0;
  26. padding: 0;
  27. border: 0;
  28. outline: 0;
  29. font-size: 100%;
  30. font-weight: normal;
  31. vertical-align: baseline;
  32. background: transparent;
  33. }
  34. ul.megamenu-menu,
  35. .megamenu-menu ul.megamenu-items {
  36. list-style: none;
  37. }
  38. /* @end */
  39. /* Structure
  40. *------------------------------------------------------------*/
  41. /* @group Structure */
  42. .megamenu-menu {
  43. overflow: visible; /* Contain floated elements */
  44. }
  45. .megamenu-menu .megamenu-parent {
  46. display: inline-block;
  47. position: relative;
  48. z-index: 99;
  49. }
  50. .megamenu-menu .megamenu-parent-title {
  51. display: inline;
  52. }
  53. .megamenu-menu .megamenu-bin {
  54. position: absolute;
  55. left: 0; /* Default horizontal orientation */
  56. top: -9000px; /* default hidden position */
  57. z-index: 10000;
  58. overflow: hidden;
  59. }
  60. /* Bin Alignment
  61. *--------------------------------------------------------*/
  62. .megamenu-menu .megamenu-bin-right {
  63. left: auto;
  64. right: -500px;
  65. }
  66. /* @group Horizontal Links */
  67. .megamenu-menu .megamenu-links-horizontal {
  68. overflow: hidden;
  69. }
  70. .megamenu-menu .megamenu-links-horizontal li,
  71. .megamenu-menu .megamenu-links-horizontal li a {
  72. float: left;
  73. }
  74. /* @end Horizontal Links */
  75. .megamenu-menu .megamenu-menu-vertical .megamenu-parent {
  76. display: block;
  77. }
  78. /* @end Structure */
  79. /* Default styles
  80. *--------------------------------------------------------*/
  81. /* @group Default styles */
  82. .megamenu-menu ul a {
  83. text-decoration: none;
  84. }
  85. .megamenu-menu ul a:hover {
  86. text-decoration: underline;
  87. }
  88. /* @end */
  89. /* @end Fundamentals */
  90. /* User Overrides
  91. *
  92. * This part will have to be dynamically generated in the
  93. * customization admin screen. The user can specify the
  94. * proper widths for structural elements according to the
  95. * ID of the mega menu.
  96. *--------------------------------------------------------*/
  97. /* @group Widths, Padding, & Margins */
  98. .megamenu-parent {
  99. margin: 0.1em 1em; /* Left margin affects fly-out value */
  100. }
  101. .megamenu-menu .megamenu-bin {
  102. padding: 0.5em;
  103. }
  104. .megamenu-menu .megamenu-slot {
  105. width: 200px; /* move this to skins or php */
  106. margin-bottom: 0.5em;
  107. }
  108. /* Vertical Orientation
  109. *--------------------------------------------------------*/
  110. /* @group Vertical Menu */
  111. .megamenu-menu-vertical {
  112. width: 8em;
  113. }
  114. .megamenu-menu-vertical .megamenu-parent {
  115. margin-top: 1em;
  116. }
  117. .megamenu-slots.flyright {
  118. left: 7em; /* [megamenu-menu-vertical] (width) - [megamenu-parent] (margin) */
  119. top: 0;
  120. }
  121. .megamenu-slots.flyleft {
  122. left: -16.2em; /* Calculation of this value did not seem straightforward */
  123. top: 0;
  124. }
  125. /* @end */
  126. /* Horizontal Orientation
  127. *--------------------------------------------------------*/
  128. /* @group Horizontal Slots */
  129. /* This value will have to be calculated to account for slot widths + margins */
  130. /* 2009.1009.1437 EFD: this width conflicted with our layout. it made more sense for us to set width on the slots themselves. unsure how the interface should handle this. */
  131. .megamenu-menu .megamenu-slots-columnar {
  132. overflow: hidden; /* contain floated slots */
  133. }
  134. .megamenu-slots-columnar li.megamenu-slot {
  135. float: left;
  136. }
  137. /* @end Horizontal Slots */
  138. /* @end Widths*/
  139. /* megamenu-menu end */
  140. /* Compatibility with Admin Menu */
  141. .megamenu-menu {
  142. z-index: 10;
  143. }