Category Archives: Jquery

Easy way to Create Jquery Tabs

Posted by on April 10, 2011 1 comment

Step 1: Include Jquery

<script src="{PATH TO JQUERY}/jquery.js'; ?" type="text/javascript"><!--mce:0--></script>

Step 2: Creating Tab


<ul class="tabs">
<li><a href="#tab1">TAB 1</a></li>
<li><a href="#tab2">TAB 2</a></li>
<li><a href="#tab3">TAB 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
Tab1 Content Here
<!-- TAB1 CONTAIN HERE --></div><!-- EOF TAB1-->

<div id="tab2" class="tab_content">
Tab2 Content Here
<!-- TAB2 CONTAIN HERE -->
</div><!-- EOF TAB2-->

<div id="tab3" class="tab_content">
Tab3 Content Here
<!-- TAB3 CONTAIN HERE -->
</div><!-- EOF TAB3-->

</div> <!-- EOF TAB CONTAINER -->

Step 3: Make It Work


$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
activeTab = activeTab.split("#");
$("#"+activeTab[1]).fadeIn(); //Fade in the active ID content

return false;
});
});

Step 4: Adding Beauty

<style>
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;margin-top:30px;border-bottom:1px solid #e9e9e9;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 28px;width:135px;margin-bottom: -1px; overflow: hidden;position: relative;background: #5D99A3;font-family: arial;font-size:11px;margin-right:5px;text-align:center;}
ul.tabs li a {text-decoration: none;color: #fff;display: block;padding-top:9px;outline: none;}
ul.tabs li:hover {background:#ece6d3;color:#454545;}
ul.tabs li.active, ul.tabs li.active a:hover  {background:#ece6d3;color:#454545;}
.tabs li.active a{color:#454545;}
.tab_container {border-top: none;overflow: hidden;clear: both;float: left;height: 533px;width: 470px;background: #ece6d3;margin:0 auto;border:1px solid #e9e9e9;border-top:0px;color:#454545;}
</style>

Demo
Click here for the demo.

Create Submenu with jquery and css

Posted by on April 13, 2011 1 comment

Including Jquery


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Structure


<ul id="menu-main-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a>
   <!-- SUBMENU -->
    <ul style="display: none;">
      <li><a href="#">Live IT Support</a></li>
      <li><a href="#">On Site Support</a></li>
      <li><a href="#">Managed Email</a></li>
      <li><a href="#">Backup and Disaster Recovery</a></li>
    </ul>
   <!-- EOF SUBMENU -->
  </li>
  <li><a href="#">Clients</a></li>  <li><a href="#">Contact Us</a></li>
</ul>

Jquery


<script>
$(document).ready(function(){
$("ul.sub-menu").parent().mouseover(	  function(){
$(this).children('ul.sub-menu').show();
}	).mouseout(	   function(){
$(this).children('ul.sub-menu').hide();
});
});
</script>

Stylesheet


<style>
.navigation li{font-family:Arial, Helvetica, sans-serif; height:31px; font-size:12px; font-weight:bold; color:#ffffff; float:left; padding-left:25px; padding-right:25px; padding-top:24px; background:#304F9E; list-style:none;}
.navigation li a{ text-decoration:none; color:#ffffff;}
ul.sub-menu {padding:0px; margin:0px; position:absolute; z-index:1000; display:none; background-color:#304F9E; width:200px; padding-bottom:10px; margin-top:10px; margin-left:-10px; }
ul.sub-menu li {border-bottom:1px dotted #bbb; height:20px; clear:left; display:block; text-align:left; list-style:none outside none;width:180px; color:#fff; padding:5px; margin:5px;}
</style>

Demo

Click here for the demo