Advertisement
Site Elements

Reveal Content When Needed With an Expanding Footer

by

During this tutorial we're going to build an expanding footer; a user interface pattern which allows the user to click on expandable footer regions if they wish to see more content. The end result is comparable to the accordion effect sometimes applied to lists and you can find it used on sites such as seesparkbox.com.

Additionally, we're going to be using Emmet to help us write our HTML at lightning speed.


The Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube
Related Posts
  • Code
    CMS
    Familiar With Magento or OpenCart? Write for Us!Writeforus 400
    During the first quarter of this year, we had an amazing group of authors join our team, and we began to expand our frequency of posting regarding WordPress development. We've also transitioned over to a new design, but we're not done. We're looking to add a few more authors, but we're widening our scope. Work with Magento or OpenCart and want to join the author team? Read on!Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Web Design
    CMS
    Tumblr Appearance Options: Select ElementsTumblr 24 retina
    It's time to add some more Appearance Options to our Tumblr theme. In this episode, we're going to add a select element, populated with a list of Google fonts, allowing users to choose which fonts are used in the theme.Read More…
  • Web Design
    CMS
    Tumblr Appearance Options: ImagesTumblr 22 retina
    Moving on with our coverage of Tumblr's Appearance Options, we're now going add an option whereby users will be able to set a background image to the theme.Read More…
  • Web Design
    CMS
    Creating the Tumblr Post Footer and Notes Tumblr 12 retina
    Let's kick off this tutorial by reviewing the Tumblr theme markup we've built already. Once that's done, we can continue by sorting out the footer and "Post Notes".Read More…
  • Code
    Theme Development
    A Guide to the WordPress Theme Customizer: Getting StartedTheme customizer 400
    In this series, we're taking a complete look at the WordPress Theme Customizer. Specifically, we're understanding exactly what it is as well as why it benefits us, how to integrate it into our theme, how to work with it in the context of other themes, and how to introduce our own sections, settings, and options into the Customizer.Read More…