Zomex - Mega Menu script docs - How to edit content

In this guide you will learn how to customize the content of the Mega Menu.

Menu Formats

The mega menu supports 4 different formats/versions. All have been provided within the mega-menu.html file. They are:

Mega Menu - The mega menu layout uses a 2 column dropdown complete with mega buttons with icons and a text area.

Dropdown Menu - The dropdown layout uses a single dropdown complete with links (no icons/text).

Basic Menu - The basic menu uses main menu links without a dropdown.

Mixed Menu This format uses a mixture of the above menus.

Customization

In this section we will look at the markup and how it works.

Dropdown

The code below is used to display a dropdown within the menu.

<li class="navmain-dropdown navmain-dropdown-megamenu"><a href="#">Domains</a>

	<div class="navmain-subcontainer">
		
		<div class="navmain-columns">
			
			<div class="navmain-columns-col navmain-columns-col1">
											
				<div class="navmain-links">
																																																													
					<div class="navmain-link">
						<a href="#">
							<div class="navmain-link-heading">Register Domain</div>
							<div class="navmain-link-text">Your very own website address</div>
						</a>
					</div>										

				</div><!-- .navmain-links -->
			
			</div><!-- .navmain-columns-col -->
		
			<div class="navmain-columns-col navmain-columns-col2">
		
				<p>Hundreds of customer's around the world trust Your Company to manage their domain. We provide freedom and control including full access & the ability to move/sell your domains.</p>
		
			</div><!-- .navmain-columns-col -->							
			
		</div><!-- .navmain-columns -->
														
	</div><!-- .navmain-subcontainer -->

</li>

The navmain-dropdown div contains the default URL for that menu (#). You can change this to use any URL.

Dropdown Highlight

Within the navmain-dropdown div you can add the class navmain-active to highlight the menu:

<li class="navmain-dropdown navmain-dropdown-megamenu navmain-active"><a href="#">Domains</a>

Dropdown Layout

The second class (navmain-dropdown-megamenu) sets the menu layout. You can use the following classes to change the menu design of each link:

Mega Menu

<li class="navmain-dropdown navmain-dropdown-megamenu"><a href="#">Domains</a>

Dropdown Menu

<li class="navmain-dropdown navmain-dropdown-dropdown"><a href="#">Domains</a>

Basic Menu

<li class="navmain-dropdown navmain-dropdown-basic"><a href="#">Domains</a>

The script will automatically hide elements not used by the selected layout (e.g the icons are hidden using the dropdown layout).

Dropdown Content

The mega menu supports the display of content within a second column. This section is handled with the below markup:

<div class="navmain-columns-col navmain-columns-col2">

	<p>Hundreds of customer's around the world trust Your Company to manage their domain. We provide freedom and control including full access & the ability to move/sell your domains.</p>

</div><!-- .navmain-columns-col -->

Dropdown Buttons

Each button within the dropdown uses a div with the class navmain-link:

<div class="navmain-link">
	<a href="#">
		<div class="navmain-link-heading">Register Domain</div>
		<div class="navmain-link-text">Your very own website address</div>
	</a>
</div>

You can set the URL for that button by editing the # with href. Here you can also set the button name and description.

Dropdown Buttons Icons

You can set the button to use an icon using the 2 icon classes. For example:

<div class="navmain-link navmain-icon navmain-icon-registerdomain">
	<a href="#">
		<div class="navmain-link-heading">Register Domain</div>
		<div class="navmain-link-text">Your very own website address</div>
	</a>
</div>

The icon class is set within the CSS file using the classes navmain-icon navmain-icon-registerdomain. You can duplicate this to add your own custom icons.

Dropdown Buttons Active

You can add the class navmain-active to the navmain-link to highlight the button:

<div class="navmain-link navmain-active">
	<a href="#">
		<div class="navmain-link-heading">Register Domain</div>
		<div class="navmain-link-text">Your very own website address</div>
	</a>
</div>

Dropdown Buttons Ribbons

You can set a button to display a ribbon showing hot or new using 2 classes. For example setting the button to display the Hot ribbon:

<div class="navmain-link navmain-highlight navmain-highlight-hot">
	<a href="#">
		<div class="navmain-link-heading">Register Domain</div>
		<div class="navmain-link-text">Your very own website address</div>
	</a>
</div>

Home

Each layout of the menu uses a home icon at the start:

<li class="navmain-home"><a href="#"><i class="fa-solid fa-house"></i></a></li>

The # is the default URL which you can customize as you like. The button also uses Font Awesome icons which can be edited as needed. You can also remove this markup to remove the icon from the menu.

Call To Action

Each layout of the menu supports a call to action link which is displayed on the right side of the menu:

<li class="navmain-cta"><a href="#" class="navmain-cta-color"><i class="fa-solid fa-cart-shopping"></i>Order</a></li>

The # is the default URL which you can customize as you like. The button also uses Font Awesome icons which can be edited as needed.

Request Support

We hope you found this documentation useful. If you run into any issues we will be happy to assist you.