CSS Fixed Menu at Bottom of the Page for Mobile

Here is a simple jQuery plugin that create CSS fixed menu at bottom of the page for mobile and small screen only. It contains animated toggle button to hide and show menubar with cool sliding effect.

Plugin Overview

Plugin: animated-mobile-footer-menu
Author: Pete Lloyd
Licence: MIT Licence
Published: January 12, 2024
Repository: Fork on CodePen
Dependencies: jQuery 2.1.3 or Latest version and Normalize CSS
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 5.70 KB

How to Make CSS Fixed Menu at Bottom of Page:

1. Load the jQuery and Normalize CSS into HTML document to getting started with animated bottom fixed menu.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Normalize CSS -->	
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" />

2. Also include the menu’s CSS and JavaScript files.

<!-- Bottom Fixed Menu CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Bottom Fixed Menu Js -->
<script  src="js/index.js"></script>

3. Create footer element for bottom navigation that will be display only on (mobile) small screen size.

<footer id="mobile-footer">
  <div id="mobile-menu">
    <div id="mobile-footer-container">
      <div class="mobile-link">
        <a href="#" class="text-center">My Account</a>
      </div>
      <div class="mobile-link">
        <a href="#" class="text-center">Reviews</a>
      </div>
      <div class="mobile-link">
        <a href="#" class="text-center">Contact Us</a>
      </div>
    </div>
  </div>
  <div id="mobile-footer-close">
    <button id="mobile-footer-btn">
      <div class="mobile-btn-close is-rotating-back">
        <span></span>
      </div>
    </button>
  </div>
</footer>

4. Decide weather to hide footer menu on desktop / large screen media. If you want to show menu on all screen sizes, remove these lines from css file.

@media (min-width: 768px) {
  #mobile-footer {
    display: none;
  }
}

1 thought on “CSS Fixed Menu at Bottom of the Page for Mobile”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...