JSFiddle

  • Sticky Edge Menu #49 is the latest revision

    CSS3 Sticky Edge Menu

    <h1>Sticky Edge Menu</h1>
    <h6>A demo by <a href="http://sevenspark.com" target="_blank">SevenSpark</a></h6>
    
    <!-- Sticky Edge Menu -->
    <div id="menu-container">
        <a id="menu-tab">&hArr;</a>
        <div id="menu">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
    <!-- end Sticky Edge Menu -->
    
    <div id="home" class="demo-container">
        <h2>Home</h2>
    </div>
    
    <div id="about" class="demo-container">
        <h2>About</h2>
    </div>
    
    <div id="contact" class="demo-container">
        <h2>Contact</h2>
    </div>
    
    <div class="demo-spacer">
        
    </div>
    
    <div class="footer">
        Scroll and the menu will stay put.
    </div>
  • CSS3 Progress Bar #696 is the latest revision

    A pure CSS progress bar (static).

    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    
    <div class="stage">
        
        <h3>CSS3 Progress Bars</h3>
        
        <div class="progressbar progressbar-green">
            <div class="progressbar-inner"></div>
        </div>
    
        <div class="progressbar progressbar-blue">
            <div class="progressbar-inner"></div>
        </div>
    
        <div class="progressbar progressbar-yellow">
            <div class="progressbar-inner"></div>
        </div>
        
        <div class="progressbar progressbar-red">
            <div class="progressbar-inner"></div>
        </div>
        
        <div class="by">
            <a href="http://sevenspark.com">by SevenSpark</a>
        </div>
    
    </div>