How To Create Mega Menu

Submitted by alpha_luna on Tuesday, July 19, 2016 - 17:32.

How To Create Mega Menu

This source code is used to reduce navigating of the user to the smaller menu that has a maximum list of items. We can avoid multiple navigating in the menu. In this article, we are going to see how the script works in our mega menu. Menu List - HTML This HTML source code shows​ the menu list for the Mega Menu. 
  1. <ul id="mega_Menu">
  2. <li> <a href="#" style="color:white;">Menu 1</a>
  3. <ul class="child">
  4. 	<li><a href="#">Example 1</a></li>
  5. 	<li><a href="#">Example 2</a></li>
  6. 	<li><a href="#">Example 3</a></li>
  7. 	<li><a href="#">Example 4</a></li>
  8. 	<li><a href="#">Example 5</a></li>
  9. 	<li><a href="#">Example 6</a></li>
  10. 	<li><a href="#">Example 7</a></li>
  11. 	<li><a href="#">Example 8</a></li>
  12. 	<li><a href="#">Example 9</a></li>
  13. 	<li><a href="#">Example 10</a></li>
  14. 	<li><a href="#">Example 11</a></li>
  15. 	<li><a href="#">Example 12</a></li>
  16. 	<li><a href="#">Example 13</a></li>
  17. 	<li><a href="#">Example 14</a></li>
  18. 	<li><a href="#">Example 15</a></li>
  19. 	<li><a href="#">Example 16</a></li>
  20. 	<li><a href="#">Example 17</a></li>
  21. 	<li><a href="#">Example 18</a></li>
  22. 	<li><a href="#">Example 19</a></li>
  23. 	<li><a href="#">Example 20</a></li>
  24. 	<li><a href="#">Example 21</a></li>
  25. </ul>
  26. </li>
  27. <li> <a href="#" style="color:white;">Menu 2</a>
  28. <ul class="child">
  29. 	<li><a href="#">Example 1.1</a></li>
  30. 	<li><a href="#">Example 2.1</a></li>
  31. 	<li><a href="#">Example 3.1</a></li>
  32. 	<li><a href="#">Example 4.1</a></li>
  33. 	<li><a href="#">Example 5.1</a></li>
  34. 	<li><a href="#">Example 6.1</a></li>
  35. 	<li><a href="#">Example 7.1</a></li>
  36. 	<li><a href="#">Example 8.1</a></li>
  37. 	<li><a href="#">Example 9.1</a></li>
  38. 	<li><a href="#">Example 10.1</a></li>
  39. 	<li><a href="#">Example 11.1</a></li>
  40. </ul>
  41. </li>
  42. <li> <a href="#" style="color:white;">Menu 3</a>
  43. <ul class="child">			
  44. 	<li><a href="#">Example 1.1.1</a></li>
  45. 	<li><a href="#">Example 2.1.1</a></li>
  46. 		<ul class="child">
  47. 		<li><a href="#">Example 2.1.0</a></li>
  48. 		<li><a href="#">Example 2.1.0</a></li>
  49. 		<li><a href="#">Example 2.1.0</a></li>
  50. 		</ul>
  51. 	</li>
  52. 	<li><a href="#">Example 3.1.1</a></li>
  53. 	<li><a href="#">Example 4.1.1</a></li>
  54. </ul>
  55. </li>
  56. </ul>
Script For Mega Menu This script will help us to expand the width for our menu list in the Mega Menu. 
  1. <script src="js/code_js.js"></script>
  2. <script>
  3. $(document).ready(function() {
  4. 	$('#mega_Menu li ul').each(function(){
  5. 		var count = parseInt(($(this).children('li').length) / 5);
  6. 		$(this).css('width',(count*12)+'em');
  7. 	});		
  8. });
  9. </script>
And, this is the style. 
  1. <style type="text/css">
  2. #mega_Menu {
  3. 	float:left;
  4. 	background:blue;
  5. 	margin:50px;
  6. 	padding:0;
  7. 	font-size:20px;
  8. 	font-weight:bold;
  9. 	width:500px;
  10. }
  11. #mega_Menu li {
  12. 	float:left;
  13. 	position:relative;
  14. 	padding:5px 10px;
  15. }
  16. #mega_Menu li a {
  17. 	color:blue;
  18. 	text-decoration:none;
  19. }
  20. #mega_Menu li a:hover {
  21. 	color:red;
  22. 	text-decoration:none;
  23. }
  24. #mega_Menu ul {
  25. 	position:absolute;
  26. 	top:28px;
  27. 	border:blue 1px solid;
  28. 	background:whitesmoke;
  29. 	padding:5px 0px 5px 0px;
  30. }
  31. #mega_Menu ul li {
  32. 	padding:5px 10px;
  33. 	width:10em;
  34. }
  35. #mega_Menu li ul {
  36. 	min-width:10em;
  37. }
  38. #mega_Menu ul.child {
  39. 	display:none;
  40. }
  41. #mega_Menu li:hover>ul.child {
  42. 	left:0;
  43. 	display:block;
  44. }
  45. #mega_Menu ul li ul.child {
  46. 	display:none;
  47. 	position:relative;
  48. }
  49. #mega_Menu ul li ul.child li a {
  50. 	color:#333;
  51. }
  52. #mega_Menu ul li:hover>ul.child {
  53. 	display:block;
  54. 	position:relative;
  55. 	top:0px;
  56. 	padding:0px 15px;
  57. }
  58. </style>
Output: ResultHope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Tags

Add new comment

About text formats
  • 186 views