Sky Mega Menu Documentation

Sky Mega Menu is a clean, responsive solution for creation beautiful site navigations. The drop down relies only on CSS/XHTML and comes with 3 mobile versions, different positions, 9 beautiful color schemes, commonly used forms, grid system and much more.

If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form here.

Integration

Download the zipped pack from codecanyon and extract to a folder on your computer.

Include css and js files to your project.

<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/sky-mega-menu.css">

<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 10]>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/jquery.placeholder.min.js"></script>
<![endif]-->

Copy HTML code from one of the demo files.
Replace demo content with yours.

HTML structure

The main HTML structure of the menu consists of list items, that can contain another nested items. Each item contains link, and optional icon. Here is the basic structure:

<ul class="sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-icons">
	<!-- home -->
	<li>
		<a href="#"><i class="icon-single icon-home"></i></a>
	</li>
	<!--/ home -->
	
	<!-- about -->
	<li class="current">
		<a href="#"><i class="icon-star"></i>About us</a>
		<div class="grid-container3">
			<ul>
				<li><a href="#"><i class="icon-globe"></i>Mission</a></li>
				<li>
					<a href="#"><i class="icon-group"></i>Our Team</a>
					<div class="grid-container3">
						<ul>
							<li>
								<a href="#"><i class="icon-user"></i>Markus Fisher</a>
								<div class="grid-container3">
									<ul>
										<li><a href="#"><i class="icon-leaf"></i>About</a></li>
										<li><a href="#"><i class="icon-tasks"></i>Skills</a></li>
										<li><a href="#"><i class="icon-comments"></i>Contacts</a></li>
									</ul>
								</div>
							</li>
							<li>
								<a href="#"><i class="icon-user"></i>Leyla Sparks</a>
								<div class="grid-container3">
									<ul>
										<li><a href="#"><i class="icon-leaf"></i>About</a></li>
										<li><a href="#"><i class="icon-tasks"></i>Skills</a></li>
										<li><a href="#"><i class="icon-comments"></i>Contacts</a></li>
									</ul>
								</div>
							</li>
							<li>
								<a href="#"><i class="icon-user"></i>Gleb Ismailov</a>
								<div class="grid-container3">
									<ul>
										<li><a href="#"><i class="icon-leaf"></i>About</a></li>
										<li><a href="#"><i class="icon-tasks"></i>Skills</a></li>
										<li><a href="#"><i class="icon-comments"></i>Contacts</a></li>
									</ul>
								</div>
							</li>
							<li><a href="#"><i class="icon-user"></i>Viktoria Gibbers</a>
						</li>
						</ul>
					</div>
				</li>
				<li><a href="#"><i class="icon-trophy"></i>Rewards</a></a></li>
				<li><a href="#"><i class="icon-certificate"></i>Certificates</a></a></li>
			</ul>
		</div>
	</li>
	<!--/ about -->
	
	<!-- portfolio -->
	<li>
		<a href="#"><i class="icon-briefcase"></i>Portfolio</a>
		<div class="grid-container3">
			<ul>
				<li><a href="#"><i class="icon-lemon"></i>Logos</a></li>
				<li><a href="#"><i class="icon-globe"></i>Websites</a></li>
				<li><a href="#"><i class="icon-th-large"></i>Branding</a></li>
				<li><a href="#"><i class="icon-picture"></i>Illustrations</a></li>
			</ul>
		</div>
	</li>
	<!--/ portfolio -->
	
	<!-- blog -->
	<li>
		<a href="#"><i class="icon-edit"></i>Blog</a>
	</li>
	<!--/ blog -->
	
	<!-- contacts -->
	<li class="right">
		<a href="#"><i class="icon-phone"></i>Contacts</a>
	</li>
	<!--/ contacts -->
</ul>

CSS structure

Sky Mega Menu includes 11 css files.

demo.css - demo page styles
sky-mega-menu.css - required main styles
sky-mega-menu-ie8.css - styles for IE8
sky-mega-menu-red.css - red color scheme
sky-mega-menu-orange.css - orange color scheme
sky-mega-menu-green.css - green color scheme
sky-mega-menu-purple.css - purple color scheme
sky-mega-menu-pink.css - pink color scheme
sky-mega-menu-yellow.css - yellow color scheme
sky-mega-menu-blue.css - blue color scheme
sky-mega-menu-black.css - black color scheme

The file "sky-mega-menu.css" contains all of the specific styling and separated into sections:

defaults
level 1
level 2+
positions
animations
grid
icons
forms
pad
phone

If you would like to edit a specific section, simply find the appropriate label in the CSS file.

JavaScript files

This menu uses jQuery library and jQuery placeholder plugin. These files need only for placeholder support in IE8 and IE9, so don't include them if you are not using forms.

Color schemes

There are 9 color schemes at your disposal. Cyan is the default scheme and to choose other you need to include appropriate css file. For example, if you want to use orange scheme include sky-mega-menu-orange.css file:

<link rel="stylesheet" href="css/sky-mega-menu.css">
<link rel="stylesheet" href="css/sky-mega-menu-orange.css">
<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 10]>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/jquery.placeholder.min.js"></script>
<![endif]-->

Mobile versions

Mega Menu includes 3 different responsive versions: icons, stack and switcher. To choose one of them you need to add specific class to the main container: sky-mega-menu-response-to-switcher, sky-mega-menu-response-to-stack or sky-mega-menu-response-to-icons. If you don't want to use responsiveness just do not add any of these classes.

<ul class="sky-mega-menu sky-mega-menu-response-to-icons">
	<!-- home -->
	<li>
		<a href="#"><i class="icon-home"></i>Home</a>
	</li>
	<!--/ home -->
	
	...
	
	<!-- contacts -->
	<li class="right">
		<a href="#"><i class="icon-phone"></i>Contacts</a>
	</li>
	<!--/ contacts -->
</ul>

Also, when you are using switcher version you need to add additional element:

<ul class="sky-mega-menu sky-mega-menu-response-to-icons">
	<!-- home -->
	<li>
		<a href="#"><i class="icon-home"></i>Home</a>
	</li>
	<!--/ home -->
	
	<!-- switcher -->
	<li class="switcher">
		<a href="#"><i class="icon-reorder"></i>Menu</a>
	</li>
	<!--/ switcher -->
	
	...
	
	<!-- contacts -->
	<li class="right">
		<a href="#"><i class="icon-phone"></i>Contacts</a>
	</li>
	<!--/ contacts -->
</ul>

Animations

The default animations effect is fade and there are 3 additional classes for choosing animations: sky-mega-menu-anim-scale, sky-mega-menu-anim-flip, sky-mega-menu-anim-slide. For example, if you want scale animation effect:

<ul class="sky-mega-menu sky-mega-menu-anim-scale">
	<!-- home -->
	<li>
		<a href="#"><i class="icon-home"></i>Home</a>
	</li>
	<!--/ home -->
	
	...
	
	<!-- contacts -->
	<li class="right">
		<a href="#"><i class="icon-phone"></i>Contacts</a>
	</li>
	<!--/ contacts -->
</ul>

Positions

To change menu position you need to add one of 3 classes: sky-mega-menu-pos-right, sky-mega-menu-pos-bottom, sky-mega-menu-pos-left. If you need fixed version of the menu add sky-mega-menu-fixed class to the menu element:

<ul class="sky-mega-menu sky-mega-menu-pos-left sky-mega-menu-fixed">
	<!-- home -->
	<li>
		<a href="#"><i class="icon-home"></i>Home</a>
	</li>
	<!--/ home -->
	
	...
	
	<!-- contacts -->
	<li class="right">
		<a href="#"><i class="icon-phone"></i>Contacts</a>
	</li>
	<!--/ contacts -->
</ul>

Icons

There are 361 font icons included. To use one of them you need to add <i> tag with appropriate class. For example, if we need user icon:

<li>
	<a><i class="icon-user"></i>Profile</a>
</li>

All available classes for icons you can find here.

Credits

jQuery library by The jQuery Foundation
jQuery placeholder plugin by Mato Ilic
Font Awesome by Dave Gandy