logo

Grid Layout

   Jaidee Grids is very easy to use. They are simple and responsive grids. Jaidee Grids support major browser such as Internet Explorer 8+, Firefox, Chrome, Opera, Safari and other.

col1
col11
col2
col10
col3
col9
col4
col8
col5
col7
col6
col6

 <div class="section row">
    <div class="col1 bgg">col1</div>
    <div class="col11 bgg">col11</div>
  </div>

  <div class="section row">
    <div class="col2 bgg">col2</div>
    <div class="col10 bgg">col10</div>
  </div>

  <div class="section row">
    <div class="col3 bgg">col3</div>
    <div class="col9 bgg">col9</div>
  </div>

  <div class="section row">
    <div class="col4 bgg">col4</div>
    <div class="col8 bgg">col8</div>
  </div>

  <div class="section row">
    <div class="col5 bgg">col5</div>
    <div class="col7 bgg">col7</div>
  </div>

  <div class="section row">
    <div class="col6 bgg">col6</div>
    <div class="col6 bgg">col6</div>
  </div>

col2 offset10
col4 offset8
col6 offset6
col8 offset4
col10 offset2
col6
col4 offset2
col2
col2 offset2
col5 offset1

 <div class="section row"> <div class="col2 offset10 bgg">col2 offset10</div></div>
 <div class="section row"> <div class="col4 offset8 bgg">col4 offset8</div></div>
 <div class="section row"> <div class="col6 offset6 bgg">col6 offset6</div></div>
 <div class="section row"> <div class="col8 offset4 bgg">col8 offset4</div></div>
 <div class="section row"> <div class="col10 offset2 bgg">col10 offset2</div> </div>
 <div class="section row"> <div class="col6 bgg">col6</div>
 <div class="col4 offset2 bgg">col4 offset2</div></div>
 <div class="section row"> <div class="col2 bgg">col2</div>
 <div class="col2 offset2 bgg">col2 offset2</div><div class="col5 bgg">col5</div>
  /* Jaidee can use maximum offset up to offset10 */
  

Slideshow

This is simple and powerful flexible Slideshow. It will make your website beauty

You must make sure you add <script type="text/javascript" src="js/jaidee-slider.js"></scripr> in your webpage

		<div class="flexslider">
<ul class="slides">
<li>
<img src="http://www.karmins.com/apps/jaidee-5/banner0.png" />
</li>
<li>
<img src="http://www.karmins.com/apps/jaidee-5/banner1.png" />
</li>
<li>
<img src="http://www.karmins.com/apps/jaidee-5/banner2.png" />
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>

Modal

You must make sure you add <script type="text/javascript" src="js/jaidee-modal.js"></scripr> in your webpage

	<class="modal" id="language" style="display:none;">
<h2>Header</h2>
<p>Detail 1 2 3 .........................................</p>
<a href="#" rel="modal:close""></a>
</div>

How to use


<a href="#language" rel="modal:open"><button class="blue">Open popup</button></a>

Jaide Top Navigation

Smart Flexible Top menu. It supports cross browser in any device which support css3. You can use top drop-down menu in here


<a class="toggleMenu" href="#"><div class="Menuicon">Menu</div>
    <ul class="nav">
    <li>
	<a href="#">Home</a>
	</li>
	<li>
	<a href="#">Get started</a>
	</li>
    <li>
	<a href="#">Basic CSS</a>
    <ul>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>
</li>
</ul>

Jaidee Tab

You must make sure you add <script type="text/javascript" src="js/jaidee.js"></scripr> in your webpage

Key features

1111

How to use

  • On document ready, call the function responsiveTabs()
  • Download


    1111
    
    <div class="responsive-tabs">
    	<h2>Key features</h2>
    	<div class="tab_detail">
    			1111
    	</div>
    	<h2>How to use</h2>
    	<div class="tab_detail">
    		<li><a href="http://www.123.com">On document </a>ready,  </li>
    		</div>
    	<h2>Download</h2>
    	<div class="tab_detail">
    		<button class="btn">Search</button>
    	</span><br>
    		<a href="" class="btn">1111</a>
    	</div>
    </div>
    

    Side Menu

    List of group Link Menu; This simple menu is flexible menu

    You must make sure you add <script type="text/javascript" src="js/jaidee.js"></scripr> in your webpage
    
    			<ul id="menu1" class="menu expandfirst">
    		<li>
    			<a href="#">Menu 1</a>
    			<ul>
    				<li><a href="#step1">Step 1</a></li>
    				<li><a href="#step2">Step 2</a></li>
    				<li><a href="#step3">Step 3<a></li>
    			</ul>
    		</li>
    		<li>
    			<a href="#">Menu 2</a>
    			<ul>
    				<li><a href="#step1">Step 1</a></li>
    				<li><a href="#step2">Step 2</a></li>
    				<li><a href="#step3">Step 3</a></li>
    			</ul>
    		</li>
    	   </ul>
    		

    Jaide Header Navigation

    Smart Flexible Header Navigator. It supports cross browser in any device which support css3.

    You must make sure you add <script type="text/javascript" src="js/jaidee.js"></scripr> in your webpage
    Menu
    
    	      <a class="navheader slide-trigger smenu">Menu </a>
    <ul class="navigation navmenu">
    <li><a href="http://themetaq.com/demos/responsive-toggle-menu/#">Home</a></li>
    <li><a href="http://themetaq.com/demos/responsive-toggle-menu/#">About</a></li>
    <li><a href="http://themetaq.com/demos/responsive-toggle-menu/#">Team</a></li>
    <li><a href="http://themetaq.com/demos/responsive-toggle-menu/#">Portfolio</a></li>
    <li><a href="http://themetaq.com/demos/responsive-toggle-menu/#">Contact</a></li>
    </ul>
    <nav>

    Jaidee scroll top page

    Jaidee Smooth Page Scroll to Top. If the web page has lots of content, its a good idea to provide visitors with an easy way to quickly scroll to the top of the page.

    You must make sure you add <script type="text/javascript" src="js/jaidee.js"></scripr> in your webpage
    
    	<a class="scrollup" href="#">Scroll</a>