OpenFooter jQuery – Responsive Full Screen Footer

OpenFooter jQuery is a small script that is used to create the unique responsive footer with powerful features. With this plugin you can make a footer with many kinds of content (Text, images/photos, videos/iframes…) and you can also add contents as much as you want. Additionally, this plugin also allow you expand the footer to fullscreen for easier view.






Check Demos:


OpenFooter jQuery Features:

  • Support Responsive Design.
  • Unlimited Footer Buttons with Horizontal Scroll/Swipe.
  • Support FullScreen View.
  • Easily customize CSS style.
  • Font Awesome and Image Icons.


Change Logs:

April 2014: First Version.



  • jQuery Library.
  • MouseWheel Plugin.


Table of Contents:

  1. Installing OpenFooter jQuery Plugin.
  2. OpenFooter jQuery HTML Structure.
  3. Call OpenFooter jQuery Plugin.
  4. Parameters.


Section 1: Installing OpenFooter jQuery Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>. Include the following code into HEAD section of the page.

Includes required CSS files:

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />

<!-- SONHLAB Base -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- OpenFooter CSS Pack -->
<link rel="stylesheet" href="css/openfooter.css" type="text/css" />

<!-- IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/fix-ie8.css" type="text/css" />


Include required Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.js"></script>
<!-- End jQuery Library -->

<!-- MouseWheel Plugin -->
<script type="text/javascript" src="js/mousewheel/jquery.mousewheel.min.js"></script> 

<!-- OpenFooter jQuery Plugin-->
<script type="text/javascript" src="js/"></script>


Done. OpenFooter jQuery plugin is now ready to use.


Section 2: OpenFooter jQuery HTML Structure.

This section should be read along with the example files also contained in the download package.

An HTML structure of OpenFooter has two main parts:

  • OpenFooter Bar: contains buttons to open relevant contents.
  • OpenFooter Content: contains contents that will be displayed when a button in OpenFooter Bar is clicked.


Sample structure:

<div class="openfooter">

	<!-- Start OpenFooter Bar -->
	<div class="of-bar">
		<div class="of-barcontainer">

			<!-- Start OpenFooter Button -->
			<div class="of-button texthover-redlight" data-ofid="content-ID">
				<span class="of-bt-icon"><i class="fa fa-home"></i></span>
				<span class="of-bt-title">Services</span>
			<!-- End OpenFooter Button -->

		<div class="clearspace"></div></div>
	<!-- End OpenFooter Bar -->

	<!-- Start OpenFooter Content -->
	<div class="of-contentstation">

		<!-- Start Content Block -->
		<div class="of-content" id="content-ID">
			<div class="of-contentbody">
				// Add Content Here
		<!-- End Content Block -->

	<!-- End OpenFooter Content -->



In the above sample code, when a button in OpenFooter Bar [data-ofid=”content-ID”] is clicked a content in OpenFooter Content zone [data-ofid=”content-ID”] will be shown.


Section 3: Call OpenFooter jQuery Plugin.

To call OpenFooter jQuery plugin you just add this sample code below into the Head section:

<!-- Call OpenFooter jQuery Plugin -->
<script type="text/javascript">
$(window).load(function() {
		barBg: 'solid-black'


Section 4: Parameters.

HTML Parameters:

Parameters Positions Description
data-ofid of-button
This param is used to set ID for content and bar buttons


Javascript Parameter:

Parameters Properties Description
barBg string This param is used to set background class for OpenFooter Bar. Background classes can be found in the “sonhlab-base.css” file.


That’s it. I hope you enjoyed this plugin and find it useful!


[endedwords product=”OpenFooter jQuery”][/endedwords]