Design Chemical

Basic (minimum required) Styling With Default Plugin Settings: Items Per Row: 3, Speed: Fast, Effect: Fade In

$('#mega-menu-2').dcMegaMenu();

• Home
• Products
  • Mobile Phones & Accessories
    • Product 1
    • Product 2
    • Product 3
  • Desktop
    • Product 4
    • Product 5
    • Product 6
    • Product 7
    • Product 8
    • Product 9
  • Laptop
    • Product 10
    • Product 11
    • Product 12
    • Product 13
  • Accessories
    • Product 14
    • Product 15
  • Software
    • Product 16
    • Product 17
    • Product 18
    • Product 19
• Sale
  • Special Offers
    • Offer 1
    • Offer 2
    • Offer 3
  • Reduced Price
    • Offer 4
    • Offer 5
    • Offer 6
    • Offer 7
  • Clearance Items
    • Offer 9
  • Ex-Stock
    • Offer 10
    • Offer 11
    • Offer 12
    • Offer 13
• About Us
  • About Page 1
  • About Page 2
• Services
  • Service 1
    • Service Detail A
    • Service Detail B
  • Service 2
    • Service Detail C
  • Service 3
    • Service Detail D
    • Service Detail E
    • Service Detail F
  • Service 4
• Contact us

Using A Sample Skin

The download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”.

Then add the relevant css file to the head of the document.

Skin: Black, Items Per Row: 1, Speed: Fast, Effect: Fade In

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

$('#mega-menu-2').dcMegaMenu({
		rowItems: '1',
		speed: 'fast'
	});

Skin: Grey, Items Per Row: 2, Speed: Fast, Effect: Fade In

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

$('#mega-menu-3').dcMegaMenu({
		rowItems: '2',
		speed: 'fast'
	});

Skin: Blue, Items Per Row: 3, Speed: Fast, Effect: Fade In, Event: Click

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

$('#mega-menu-4').dcMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'fade',
		event: 'click'
	});

Skin: Orange, Items Per Row: 4, Speed: Fast, Effect: Fade In

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

$('#mega-menu-5').dcMegaMenu({
		rowItems: '4',
		speed: 'fast'
	});

Skin: Red, Items Per Row: 3, Speed: Slow, Effect: Slide Down

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

$('#mega-menu-6').dcMegaMenu({
		rowItems: '3',
		speed: 'slow',
		effect: 'slide'
	});

Skin: Green, Items Per Row: 3, Speed: Fast, Effect: Slide Down

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

$('#mega-menu-7').dcMegaMenu({
		rowItems: '3',
		speed: 'fast',
		effect: 'slide'
	});

Skin: Light Blue, Items Per Row: 3, Speed: Fast, Effect: Fade In

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

$('#mega-menu-8').dcMegaMenu({
		rowItems: '3',
		speed: 'fast'
	});

Skin: White, Items Per Row: 3, Speed: Fast, Effect: Fade In

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

$('#mega-menu-9').dcMegaMenu({
		rowItems: '4',
		speed: 'fast'
	});