You are here

megamenu.css in Megamenu 6

Same filename and directory in other branches
  1. 6.2 megamenu.css
  2. 7 megamenu.css
/*=============================================================
 * MEGA MENU
 *-------------------------------------------------------------
 * 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;
	position: relative;
	z-index: 5000;
}

.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 */

/* section: megamenu-skins */

File

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