menu

Thursday 9 October 2014

JQuery Collapsing menu with Toggle

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery Collapsing menu with Toggle</title>
</head>
<body>
<ul id="menu">
  <li> <a href="#">Weblog Tools</a>
    <ul>
      <li><a href="#">PivotX</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Textpattern</a></li>
      <li><a href="#">Typo</a></li>
    </ul>
  </li>
  <li> <a href="#">Programming Languages</a>
    <ul>
      <li class="current"><a href="#">PHP</a></li>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">PERL</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">C#</a></li>
    </ul>
  </li>
  <li><a href="#">Marco's blog (no submenu)</a></li>
  <li> <a href="#">Cool Stuff</a>
    <ul>
      <li><a href="#">Apple</a></li>
      <li><a href="#">Nikon</a></li>
      <li><a href="#">XBOX360</a></li>
      <li><a href="#">Nintendo</a></li>
    </ul>
  </li>
  <li> <a href="#">Search Engines</a>
    <ul>
      <li><a href="#">Yahoo!</a></li>
      <li><a href="#">Google</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

DOWNLOAD SOURCE CODE

Simple Accordian One Open Already..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Accordion</title>
<style type="text/css">
html {
overflow-Y: scroll;
}
body {
font: 10px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}
.container {
width: 500px;
margin: 0 auto;
}
h1 {
font: 4em normal Georgia, 'Times New Roman', Times, serif;
text-align:center;
padding: 20px 0;
color: #aaa;
}
h1 span {
color: #666;
}
h1 small {
font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 0.5em;
display: block;
color: #666;
}
h2.acc_trigger {
padding: 0;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {
background-position: left bottom;
}
.acc_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
.acc_container .block p {
padding: 5px 0;
margin: 5px 0;
}
.acc_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.acc_container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

});
</script>
</head>

<body>
<div class="container">
  <h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Need a Website?</h3>
      <a href="#"><img src="img1.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
  <h2 class="acc_trigger"><a href="#">Logo / Corporate Identity</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Need a Logo?</h3>
      <a href="#"><img src="img2.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
  <h2 class="acc_trigger"><a href="#">Seach Engine Optimization</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Need to be Heard?</h3>
      <a href="#"><img src="img3.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
  <h2 class="acc_trigger"><a href="#">eCommerce</a></h2>
  <div class="acc_container">
    <div class="block">
      <h3>Have Product to Sell?</h3>
      <a href="#"><img src="img4.gif" alt="" /></a>
      <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
      <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
    </div>
  </div>
</div>
</body>
</html>



vertical Tab

<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tab</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
  <section>
    <div id="container_buttons">
      <div style="clear:both"></div>
      <ul>
        <li class="toggle"> <a href="#One">A clock made in CSS3 | NO Javascript</a>
          <p id="One"> Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Two">Learn CakePHP From Novice to Professional : Part 2</a>
          <p id="Two"> Model-View-Controller Cake enforces an MVC structure for your web applications. Basically, it effectively separates typical operations into specific areas: MODELS : for all your database interaction VIEWS : for all your output and displays CONTROLLERS : for all your commands/scripts for input and program flow The typical PHP application mixes each of these three functions <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Three">Learn CakePHP From Novice to Professional : Part 1</a>
          <p id="Three"> This guide is for beginners to CakePHP. Whether or not you have much experience with the PHP scripting language, working in Cake will require some new methods you may or may not have tried before. If you don't know what a "has-and-belongs-to-many" relationship is, don't know how to build your own class object, or don't <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Four">Google Maps Server Side Geocoding Using PHP and Infobox Fully AJAX</a>
          <p id="Four"> Recently I got a new project of real estate where I had to display about 1000 of projects on the google map. I was having the address of 1000 projects, so I started with my php and js code. When I coded and started testing, I found that on the map only 20-30 markers were <a href="#">Read more...</a> </p>
        </li>
        <li class="toggle"> <a href="#Five">Learn Codeigniter | Codeigniter Tutorial | Codeigniter Lessons | Part 1 | Webs Tutorial</a>
          <p id="Five"> What is CodeIgniter? CodeIgniter is an open source PHP framework. This framework is used to build web applications and websites. CodeIgniter is best for developers who are into front-end development. It's easy to learn and it's fully flexibe. To learn CI (CodeIgniter), you should know PHP, MYSQL, OOPs and MVC. If you are new to <a href="http://www.e-technology.co.in">Read more...</a> </p>
        </li>
      </ul>
      <em style="float: right;margin:10px 0;"><a href="http://www.e-technology.co.in" title="etechnology">e-technology</a> </em> </div>
  </section>
</div>
</body>
</html>


DOWNLOAD SOURCE CODE

Full screen slider

Full screen slider


<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 450
});
});
</script>
</head>
<body>
        <div class="container">
          <div id="da-slider" class="da-slider">
            <div class="da-slide">
              <h2>Easy management</h2>
              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/2.png" alt="image01" /></div>
            </div>
            <div class="da-slide">
              <h2>Revolution</h2>
              <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/3.png" alt="image01" /></div>
            </div>
            <div class="da-slide">
              <h2>Warm welcome</h2>
              <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/1.png" alt="image01" /></div>
            </div>
            <div class="da-slide">
              <h2>Quality Control</h2>
              <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
              <a href="#" class="da-link">Read more</a>
              <div class="da-img"><img src="images/4.png" alt="image01" /></div>
            </div>
            <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav>
          </div>
        </div>
</body>
</html>