Welcome to SeleMak v1.0 Template

Install

"SeleMak" is HTML template so there's no really "installation" required just unzip the main file you've downloaded from Themeforest and after unziping you have your all template ready to be used.

Enjoy!

Main Menu

have used Superfish jQuery improved dropdown menu itself is easy to edit. Its structure base on a nested unoredered lists structure.

Call superfish() on the containing ul element (in file js/custom.js).

/*
 * jquery superfish menu
 */
$('#menu').superfish({
	pathClass:'current',
	autoArrows:true,
	delay:200,
	speed:'normal',
	animation:{height:'show'}
});

There are many options available to customise your menu. You can find out about them in the Options tab of this site.

Mobile Menu

We have used Responsive Multi-Level Menu by www.codrops.com

JavaScript

We have called dlmenu() at js/custom.js

/*
 * Mobile Menu
 */
$( '#dl-menu' ).dlmenu();

For more information please visit here

Slider (sequence.js)

Sequence.js slider is used with custom theme.

HTML Markup

<div id="sequence" class="mb50">
  <div class="sequence-prev"><i class="icon-angle-left"></i></div><!-- .sequence-prev -->
  <div class="sequence-next"><i class="icon-angle-right"></i></div><!-- .sequence-next -->
  <ul class="sequence-canvas">
     <li class="animate-in">
        <div class="sl-caption fadeTop delay300" data-x="650" data-y="100"><h2>Welcome to SeleMak</h2></div>
        <div class="sl-caption fadeBottom delay400" data-x="650" data-y="155">Some Text Here</div>
        <div class="sl-button fadeBottom delay500" data-x="650" data-y="210"><a href="#" class="button large"><i class="icon-shopping-cart"></i> Buy Now</a></div>
        <img src="photos/slide-bg-1.jpg" class="sl-background">
     </li><!-- .animate-in -->
  </ul><!-- .sequence-canvas -->
  <ul class="sequence-pagination"></ul> <!-- .sequence-pagination -->
</div><!-- #sequence -->

CSS Class and ID List

Delay Class

Delay for Transition.

Transition Class

JavaScript

We have called sequence() at js/custom.js

/*
 * sequence.js slider
 */
$("#sequence").sequence({
	nextButton: true,
	prevButton: true,
	pagination: false,
	animateStartingFrameIn: true,
	autoPlay: true,
	autoPlayDelay: 3000,
	preloader: true,
	preloadTheseFrames: [1],
	navigationSkip: false,
}).data("sequence");

For more information see Sequence doc.

Note: Sequence doc only provide JavaScript setting.

Slider (BxSlider)

BxSlider is used for Recent Works, Testimonials and Our Clients sliding

JavaScript

We have called bxSlider() at js/custom.js

/*
 * Recent Work, Testimonials and Clients Slider
 */
$('.testimonials-slider, .clients-slider, .recent-works').bxSlider({
	pager: false,
	speed: 1000,
	stopAuto: false,
	autoHover: true,
	nextText: '<i class="icon-angle-right"></i>',
	prevText: '<i class="icon-angle-left"></i>',
	infiniteLoop: false,
	hideControlOnEnd: true
});

For more information please visit BxSlider

Slider (Flex)

To setup Flex Slider.

/*
 * Single Portfolio Slider
 */
$('#carousel').flexslider({
	animation: "slide",
	controlNav: false,
	animationLoop: false,
	slideshow: false,
	itemWidth: 100,
	itemMargin: 5,
	asNavFor: '#slider'
});
$('#slider').flexslider({
	animation: "slide",
	controlNav: false,
	animationLoop: false,
	slideshow: false,
	sync: "#carousel"
});

For more information please visit Flex Slider 2 Website.

Portfolio Filter (quicksand)

For portfolio filter, we have used quicksand jquery plugin.

JavaScript

/*
 * Portfolio Gallery filter
 */
var jQueryfilterType = $('#filter input[name="filter"]');
var jQueryapplications = $('#gallery');
var jQuerydata = jQueryapplications.clone();

jQueryfilterType.change(function(e) {
	quicksand_filter (800);
});

function quicksand_filter (duration) {
	if ($('#filter input[name="filter"]:checked').val() == 'all') {
		var jQueryfilteredData = jQuerydata.find('li');
	} else {
		var jQueryfilteredData = jQuerydata.find('li[data-type~=' + $('#filter input[name="filter"]:checked').val() + ']');
	}

	jQueryapplications.quicksand(jQueryfilteredData, {
		duration : duration,
		easing : 'swing',
		adjustWidth: '100%',
		useScaling : true,
		selector: '> li',
		enhancement : function(c) {
			
			$('label.current').removeClass('current');
			$('input[name="filter"]:checked').parent().addClass('current');

			$("a[data-rel^='prettyPhoto']").prettyPhoto({theme: 'light_rounded'});
		}
	});
}
quicksand_filter (8);

$(window).resize(function () {
	quicksand_filter (80);
});

For more information please visit here

Image Zoom Sandbox (prettyPhoto)

For zoom portfolio image and other image we have used prettyPhoto.

JavaScript

We have called prettyPhoto() at js/custom.js

/*
 * prettyPhoto
 */
$("a[data-rel^='prettyPhoto']").prettyPhoto({theme: 'light_rounded'});

For more information please visit here

jQuery UI Tab

We have used jQuery UI Tab

JavaScript

We have called tab() at js/custom.js

/*
 * jQuery UI Tabs
 */
$( "#tabs" ).tabs();

For more information please visit here

jQuery UI Accordion

We have used jQuery UI Accordion.

JavaScript

We have called accordio() at js/custom.js

/*
 * jQuery UI Accordion
 */
$( "#accordion" ).accordion({
	heightStyle: "content",
	icons: {
		activeHeader: "icon-angle-up",
		header: "icon-angle-down"
	}
});

For more information please visit here

Google Map (GMAP3)

For google map we uesed jQuery GMAP3 Plugin.

JavaScript

We have called gmap3() at contact.html and shortcodes.html

/*
 * Google Map
 */
$('.google-map').gmap3({
  marker:{
	address: "Envato, Level 13, 2 Elizabeth St, Melbourne, Victoria 3000 Australia"
  },
  map:{
	options:{
	  zoom: 14
	}
  }
});

For more information please visit here

Our Clients (Black and White)

Our clients images normaly is Black and White, On hover it's colorfull. To make this I have selected jQuery Black and White jQuery Plugin.

JavaScript

We have called BlackAndWhite() at js/custom.js

/*
 * Our Client Black and White image
 */
$('.client').BlackAndWhite({
	webworkerPath : false,
	responsive:true,
	speed: { 
		fadeIn: 200,
		fadeOut: 800
	}
});

For more information please visit here

Skill

jQuery Knob Plugin for skills.

JavaScript

We have called knob() at js/custom.js

/*
 * Skill progress
 */
$(".knob").knob({
	'draw': function() {
		if (this.cv.indexOf('%') > 0) {
			this.cv = this.cv.slice(0, this.cv.length - 1);
		};
		return $(this.i).val(this.cv + "%");
	}
});

HTML

HTML code:

<div class="skill mb50">
<input class="knob" disabled="disabled" data-readonly="true" data-width="170" data-height="170" data-min="0" data-thickness="0.22" data-angleoffset="0" data-displayprevious="true" value="88" data-fgcolor="#1cc6da" data-bgcolor="#f2f5f7">
<h4>WordPress</h4>
</div><!-- skill -->

For more information please visit here

Credits

jQuery

jQuery UI

Font Awesome

Superfish menu

BxSlider

Flex Slider 2

prettyPhoto

quicksand

Sequence.js Slider

jQuery Animate CSS Rotate Scale

jQuery Easing

GMAP3

jQuery Knob

jQuery Black And White

Source Sans Pro

Support

If you still feel you need for support. Please send me email by themeforest user contact form click here.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Enjoy!