Menuzord

Responsive Megamenu

Created: 08 August 2014
Latest update: 08 August 2014
By: marcoarib
www.webpulse.com.br/menuzord/index.html

Thank you for purchase this product. If you need help to use the script, feel free to contact me by my profile page on Codecanyon

Thank you for purchase this product. Menuzord is a responsive megamenu pack to help you to define a modern navigation for your website. Feel free to contact if you have any problems with bugs and installation.

First of all, we have to put the basic files inside the project folders.

CSS reference

<link rel="stylesheet" type="text/css" href="css/menuzord.css">

You need to put the CSS reference inside the HEAD section of the page.

Javascript reference

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/menuzord.js"></script>

You can put the Javascript reference in the HEAD section or for better performance at the bottom of the page, before the body closing tag (</body>).

Important: The file references above assume that you have a folder named CSS for the styles and a folder named JS for the scripts.

Basic HTML markup

The basic markup of the Menuzord is compound:

a) A wrapper "menuzord" to involve the menu components. The wrapper has "width: 100%" by default

b) An unordered list with a class "menuzord-menu"

<div id="menuzord" class="menuzord">
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

So, call the menu:

<script type="text/javascript">
   jQuery(document).ready(function(){  
      jQuery("#menuzord").menuzord();
   });
</script>

Responsive Meta Tag

If you want to use Menuzord in a responsive website, you need to use a "meta tag" to make the website is displayed properly on smaller screens. If you are not using a meta tag for this, use one like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Optionally you can use a text for your brand. The text is placed on the left side of menu. See the code (line 2):

<div id="menuzord" class="menuzord">
   <a href="#" class="menuzord-brand">Brand</a>
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

Menuzord provides unlimited dropdown levels. Just use other unordered list inside a menu item:

<div id="menuzord" class="menuzord">
   <a href="#" class="menuzord-brand">Brand</a>
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a>
         <ul class="dropdown">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
         </ul>      
      </li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

Dropdown "right to left"

The dropdowns are aligned "left to right" by default. You can use it "right to left" just adding the class "dropdown-left" on the dropdown:

...
<ul class="dropdown dropdown-left">
   <li><a href="#">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Item 4</a></li>
</ul>
...

Menuzord provides flexible megamenus. Just use a "div" megamenu inside the menu item. See the markup:

<div id="menuzord" class="menuzord">
   <a href="#" class="menuzord-brand">Brand</a>
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a>
         <div class="megamenu">
                        
         </div>
      </li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

Note: You can use dropdowns and megamenus in the same menu

Megamenu widths

There are three preset menu widths to use (you can define others):

100% of the navigation width (default):

... 
<div class="megamenu">

</div>
...

50% of the navigation width:

...
<div class="megamenu megamenu-half-width">

</div>
...

25% of the navigation width:

...
<div class="megamenu megamenu-quarter-width">

</div>
...

Menuzord provides a complete grid system to help you organize the elements inside your menu. You can use a max of 12 columns. See the examples:

a) The megamenu below is divided in 3 columns, both with 33,3% of the megamenu inner width:

<div id="menuzord" class="menuzord">
   <a href="#" class="menuzord-brand">Brand</a>
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a>
         <div class="megamenu">
            <div class="megamenu-row">
               <div class="col4"></div>
               <div class="col4"></div>
               <div class="col4"></div>
            </div>      
         </div>
      </li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

b) The megamenu below is divided in 4 columns. Each column has 25% of the megamenu inner width:

<div id="menuzord" class="menuzord">
   <a href="#" class="menuzord-brand">Brand</a>
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a>
         <div class="megamenu">
            <div class="megamenu-row">
               <div class="col3"></div>
               <div class="col3"></div>
               <div class="col3"></div>
               <div class="col3"></div>
            </div>      
         </div>
      </li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

You can use icons (Font-awesome) on menu items. Choose an icon and use it inside the menu item:

<li>
   <a href="#"><i class="fa fa-home"></i>Item 1</a>
</li>

Remember, you need "font-awesome.css" (included in the package):

<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

To insert a search field on Menuzord, use a special menu item with the following markup:

<li class="search">
   <form action="" method="get">
      <input type="text" name="search" placeholder="Search">
   </form>
</li>

Menuzord offers 16 skins. Each skin has 8 preset colors (go to the next section to see how to change the color scheme). The table below shows the CSS reference for each skin:

Skin name	Aditional CSS file
none (default)	none
Border-bottom	menuzord-border-bottom.css
Border Boxed	menuzord-border-boxed.css
Border-left	menuzord-border-left.css
Border-top	menuzord-border-top.css
Border-top-bottom	menuzord-border-top-bottom.css
Bottom trace	menuzord-bottom-trace.css
Boxed	menuzord-boxed.css
Colored	menuzord-colored.css
Dark	menuzord-dark.css
Gradient	menuzord-gradient.css
Rounded Boxed	menuzord-rounded-boxed.css
Shadow	menuzord-shadow.css
Strip	menuzord-strip.css
Subcolored	menuzord-subcolored.css
Top-bottom boxed border	menuzord-top-bottom-boxed-border.css

After choose the skin, place the CSS reference AFTER the menuzord.css.

See an example with Dark Skin:

<link rel="stylesheet" type="text/css" href="css/menuzord.css">
<link rel="stylesheet" type="text/css" href="css/menuzord-dark.css">

See the demos for all skins in the package.

Menuzord provides 8 color schemes per each skin. The table below shows the color schemes and correspondent CSS classes:

Color scheme	CSS class
default	none
blue	.blue
green	.green
red	.red
orange	.orange
yellow	.yellow
purple	.purple
pink	.pink

To use a color scheme, just use the proper CSS class. Examples:

a) Red Menuzord

<div id="menuzord" class="menuzord red">
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

b) Orange Menuzord

<div id="menuzord" class="menuzord orange">
   <ul class="menuzord-menu">
      <li class="active"><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
   </ul>
</div>

Using Menuzord you can play with many javascript options to increase the power of your website navigation.

See the available options:

Option name	type	Default value	Options	Description
showSpeed	integer	300(ms)	> 0	Sets the speed that the submenu appears. Must be greater than 0.
hideSpeed	integer	300(ms)	> 0	Sets the speed that the submenu disappears. Must be greater than 0.
trigger	string	"hover"	hover or click	Defines the event type for submenu appear
showDelay	integer	0	> 0	Sets the delay speed that the submenu appears. Must be greater than 0.
hideDelay	integer	0	> 0	Sets the delay speed that the submenu disappears. Must be greater than 0.
effect	string	"fade"	fade or slide	Defines the primary effect for submenus
align	string	"left"	left or right	Defines the alignment for the menu items
responsive	boolean	true	True or false	Defines if menuzord is responsive or not
animation	string	"none"	zoom-in, zoom-out, drop-up, drop-left, swing, flip, roll-in and stretch	Defines the animation (secondary effects) for submenus. You must use the adtional CSS file *menuzord-animations.css*
indentChildren	boolean	true	True or false	Defines if dropdowns on mobile view are indented
indicatorFirstLevel	string	"+"	Free use	Defines the icon to indicate the submenus on first level (UTF-8 icons, Font-awesome icons, etc.)
indicatorSecondLevel	string	"+"	Free use	Defines the icon to indicate the submenus at lower levels (UTF-8 icons, Font-awesome icons, etc.)
scrollable	boolean	false	True or false	Defines if menu is scrollable on mobile mode
scrollableMaxHeight	integer	400	> 0	Max height (px) of the scrollable menu

Examples:

a) Menuzord using "slide" effect with delay

jQuery(document).ready(function(){  
   jQuery("#menuzord").menuzord({
      showDelay: 200,
      effect: "slide"
   });
});

b) Menuzord not responsive and aligned to right

jQuery(document).ready(function(){  
   jQuery("#menuzord").menuzord({
      align: "right",
      responsive: false
   });
});

Menuzord provides vertical tabs. Use it inside a megamenu div to place your content in different areas

Markup example:

<div class="menuzord-tabs">

   <ul class="menuzord-tabs-nav">
      <li class="active"><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
      <li><a href="#">Tab 3</a></li>
   </ul>

   <div class="menuzord-tabs-content active">
      <!-- tab 1 content -->
   </div>
   <div class="menuzord-tabs-content">
      <!-- tab 2 content -->
   </div>
   <div class="menuzord-tabs-content">
      <!-- tab 3 content -->
   </div>

</div>

The class "active" defines the current item.

Many people prefers use the menu fixed on your pages. This chapter show you how to do that:

1 - Full width

Wrap the menu with a div:

<div class="fixed">
   <div id="menuzord" class="menuzord">
      <ul class="menuzord-menu">
         <li class="active"><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
         <li><a href="#">Item 3</a></li>
         <li><a href="#">Item 4</a></li>
      </ul>
   </div>
</div>

The CSS:

.fixed{
   position: fixed;
   width: 100%;
}

2 - Centralized on top

Here we have the previous strategy with little changes.

Wrap the menu with a div:

<div class="fixed">
   <div id="menuzord" class="menuzord">
      <ul class="menuzord-menu">
         <li class="active"><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
         <li><a href="#">Item 3</a></li>
         <li><a href="#">Item 4</a></li>
      </ul>
   </div>
</div>

The CSS:

.fixed{
   position: fixed;
   width: 90%;
   margin: 20px 0 0 -45%;
   left: 50%;
}

Notes:

a. The margin-left is the half of the width and always negative.

b. If you have a menu with many items, is a good idea to use "scrollable: true"

See here some important things before to implement Menuzord on your website:

Browser compatibility

- IE8+, Chrome, Firefox, Safari, Opera

- Safari on Ipad/Iphone

- Chrome/Firefox on Android

jQuery compatibility

Tested on version 1.8+ (included 2.0)

Bootstrap compatibility

Menuzord is compatible with Bootstrap framework

Real links on parent items

If you need using real links on a parent item and this item has a submenu, the dinamic interaction is:

Landscape mode + Touch Device: first tap = submenu appears | second tap = go to real link

Portrait mode + Touch Device: tap on menu item to follow the link | click on "submenu icon" to opening submenu

Responsive behavior (responsive: true)

Menuzord reacts (and go to Portrait mode) if the screen width is minor than 768px (the most popular screen width on mobile devices).

Variable "mobileWidthBase"

In file "menuzord,js" there is a variable named "mobileWidthBase". The default value of this variable is 768. When Menuzord is viewed on a device with a screen width minor than 769px, Menuzord go to Mobile mode (if you are using it on a responsive mode). You can modify this variable if you want. If you do this, remember of modify the "@media querie" in the CSS file too.

Example:

menuzord.js (line 30)

var mobileWidthBase = 900;

menuzord.css

@media (max-width: 900px){
   ...
}

If you have experienced bugs or problems to implement the Menuzord in your website, you can contact me by my profile page:

http://codecanyon.net/user/marcoarib

NOTES:

The support includes help with bugs or installation
The support not include help for customisations
If you have a problem, a live preview to reproduce the issue is VERY IMPORTANT

Thank you.

marcoarib

Menuzord

Responsive Megamenu

1. Intro

2. Installation and markup

CSS reference

Javascript reference

Basic HTML markup

Responsive Meta Tag

3. Brand text

5. Megamenu

Megamenu widths

6. Megamenu Grid System

7. Icons

8. Search field

9. Skins

10. Color Schemes

11. Javascript options

12. Vertical Tabs

13. Fixed menu (sticky menu)

14. Important info

15. Support

Menuzord

Responsive Megamenu

1. Intro

2. Installation and markup

CSS reference

Javascript reference

Basic HTML markup

Responsive Meta Tag

3. Brand text

4. Dropdown

Dropdown "right to left"

5. Megamenu

Megamenu widths

6. Megamenu Grid System

7. Icons

8. Search field

9. Skins

10. Color Schemes

11. Javascript options

12. Vertical Tabs

13. Fixed menu (sticky menu)

14. Important info

15. Support