JSFiddle

  • Bootstrap 3 vertical menu with toggable submenus #16 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

    /* Bootstrap minified JavaScript included as External Resource */
  • Google Geo Chart for States. #1837 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawVisualization);
    
    function drawVisualization() {
      var data = google.visualization.arrayToDataTable([
        ['State', 'Population'],
        ['Uttar Pradesh ...
  • Headings Sass mixin #36 is the latest revision

    No-Library (pure JS), HTML, SCSS, JavaScript

    <h1>Lorem ipsum dolor</h1>
    <h2>Lorem ipsum dolor</h2>
    <h3>Lorem ipsum dolor</h3>
    <h4>Lorem ipsum dolor</h4>
    <h5>Lorem ipsum dolor</h5>
    <h6>Lorem ipsum dolor</h6>
    
    <div>
        <h1>Lorem ipsum ...</h1></div>
  • Multi-level dropdown #5 is the latest revision

    Mootools 1.4.5, HTML, CSS, JavaScript

    /**
     * Infinitely nestable dropdown menu by @csswizardry
     * twitter.com/csswizardry
     */
  • Multi-level dropdown

    Mootools 1.4.5, HTML, CSS, JavaScript

    /**
     * Infinitely nestable dropdown menu by @csswizardry
     * twitter.com/csswizardry
     */
  • Pagination #5 is the latest revision

    Mootools 1.4.1, HTML, CSS, JavaScript

    <ol class=pagination>
        <li class=first><a href=#>First</a></li>
        <li class=prev><a href=#>Previous</a></li>
        <li><a href=#>A</a></li>
        <li><a href=#>B</a></li>
        <li><a href=#>C</a></li>
        <li class=current><a href=#>D</a></li>
        <li><a href=#>E</a></li>
        <li><a href=#>F</a></li>
        <li><a href=#>G</a></li>
        <li><a href=#>H</a></li>
        <li><a href=#>I</a></li>
        <li>J</li>
        <li><a href=#>K</a></li>
        <li><a href=#>L</a></li>
        <li><a href=#>M</a></li>
        <li><a href=#>N</a></li>
        <li><a href=#>O</a></li>
        <li><a href=#>P</a></li>
        <li><a href=#>Q</a></li>
        <li><a href=#>R ...</a></li></ol>
  • CSS Only Tabs #47 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               <p>Stuff for Tab One</p>
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               <p>Stuff for Tab Two</p>
               
               <img src="http://placekitten.com/200/100">
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               <p>Stuff for Tab Three</p>
               
               <img src="http://placedog.com/200/100">
           </div> 
       </div>
        
    </div>
    
    <p>Pellentesque habitant ...</p>
  • Centred horizontal navigation

    Mootools 1.3.1 (compat), HTML, CSS, JavaScript

    <ul id="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/work/">Work</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
    
  • CSS Only Tabs #1 is the latest revision

    Mootools 1.3.2, HTML, CSS, JavaScript

    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               <p>Stuff for Tab One</p>
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               <p>Stuff for Tab Two</p>
               
               <img src="http://placekitten.com/200/100">
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               <p>Stuff for Tab Three</p>
               
               <img src="http://placedog.com/200/100">
           </div> 
       </div>
        
    </div>
    
    <p>Pellentesque habitant ...</p>
  • Apple-Like Navigation

    No-Library (pure JS), HTML, CSS, JavaScript

    <nav>
    <ul>
        <li><a href="#">Store</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPod</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
    </ul>
    <form action="#" method="post">
        <label for="s">Search</label>
        <input type="search" name="search" id="s">
        <input type="submit">
    </form>
    </nav>