DEV Community

Jonathan Peters
Jonathan Peters

Posted on

A responsive footer menu with social media icons

#footer #responsivewebdesign #frontendwebdevelopment #frontend

Lets start with the HTML Code:
HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Footer Menu</title> <link rel="stylesheet" href="style.css"> <script defer src="script.js"></script> </head> <body> <footer class="footer"> <div class="footer-container"> <div class="footer-social"> <a href="https://wa.me/your-number" target="_blank" class="footer-social-icon"> <img src="whatsapp-icon.png" alt="WhatsApp"> </a> <a href="https://www.facebook.com/your-profile" target="_blank" class="footer-social-icon"> <img src="facebook-icon.png" alt="Facebook"> </a> <a href="https://www.linkedin.com/in/your-profile" target="_blank" class="footer-social-icon"> <img src="linkedin-icon.png" alt="LinkedIn"> </a> </div> <div class="footer-links"> <a href="#" class="footer-link">Terms & Conditions</a> <a href="#" class="footer-link">Privacy Policy</a> <a href="#" class="footer-link">Contact Us</a> <a href="#" class="footer-link">About Us</a> </div> </div> </footer> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Next up, time to add some CSS Styling
CSS:

* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; } body { display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; } .footer { background-color: #333; color: white; padding: 20px 0; text-align: center; } .footer-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-social { margin-bottom: 20px; } .footer-social-icon { margin: 0 10px; } .footer-social-icon img { width: 30px; height: 30px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; } .footer-link { color: white; margin: 5px 15px; text-decoration: none; } .footer-link:hover { text-decoration: underline; } @media (min-width: 600px) { .footer-container { flex-direction: row; justify-content: space-between; align-items: center; } .footer-social { margin-bottom: 0; } .footer-links { justify-content: flex-end; } }
Enter fullscreen mode Exit fullscreen mode

Last but not least, lets add some JavaScript:
JavaScript:

// JavaScript code if needed for future enhancements document.addEventListener('DOMContentLoaded', function() { // Placeholder for any future JavaScript functionality console.log("Footer loaded"); });
Enter fullscreen mode Exit fullscreen mode

Code Explanation:

1. HTML:
We create a footer element with a class of footer.
Inside the footer, there's a footer-container which contains two main sections: footer-social and footer-links.
footer-social contains anchor tags (<a>) with links to WhatsApp, Facebook, and LinkedIn. Each anchor tag wraps an image representing the social media icon.
footer-links contains anchor tags pointing to different pages such as Terms & Conditions, Privacy Policy, Contact Us, and About Us.

2. CSS:
Basic styles are applied to all elements to ensure consistent box-sizing and remove default margins and paddings.
The body is set to use flexbox to ensure the footer is positioned at the bottom of the viewport.
The footer section has a dark background color and white text, with padding for spacing.
The footer-container uses flexbox to align its children elements in a column on small screens and a row on larger screens.
Social media icons are styled to have a specific size, and links are styled for better visibility and interactivity.

3. JavaScript:
A basic JavaScript snippet is included to handle any future enhancements. Currently, it only logs a message when the footer is loaded.

Tips & Tricks:

  1. Responsive Design: Use media queries to adjust the layout for different screen sizes. Here, we switch from column to row layout on screens wider than 600px.
  2. Flexbox: Utilizes flexbox for easy alignment and spacing of elements.
  3. External Links: Ensure social media links open in a new tab using target="_blank".
  4. Accessibility: Provide descriptive alt attributes for images to improve accessibility.

Top comments (0)