HTML CSS AND JAVASCRIPT CODE FOR FOOTER MENU ► COD

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced Footer Menu</title>
  <style>
    /* Reset CSS */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    /* Footer Styles */
    .footer {
      background: linear-gradient(135deg, #333, #444);
      color: #fff;
      padding: 50px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .footer h3 {
      margin-bottom: 20px;
      font-size: 22px;
      position: relative;
      font-weight: bold;
      color: #FFD700;
    }
    .footer p {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .footer .footer-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeIn 1.5s ease forwards;
    }
    .footer .footer-section:nth-child(1) { animation-delay: 0.2s; }
    .footer .footer-section:nth-child(2) { animation-delay: 0.4s; }
    .footer .footer-section:nth-child(3) { animation-delay: 0.6s; }
    .footer .footer-section:nth-child(4) { animation-delay: 0.8s; }
    .footer .footer-section a {
      color: #bbb;
      text-decoration: none;
      margin: 5px 0;
      font-size: 18px;
    }
    .footer .footer-section a:hover {
      color: #FFD700;
      transform: scale(1.1);
      transition: color 0.3s, transform 0.3s;
    }

    /* Footer Links Grid */
    .footer .footer-content {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .footer .footer-content > div {
      flex: 1 1 220px;
      margin: 10px;
      padding: 10px;
    }

    /* Social Icons */
    .footer .social-icons {
      margin-top: 20px;
      animation: bounceIn 1s ease-in-out;
    }
    .footer .social-icons a {
      color: #FFD700;
      font-size: 24px;
      margin: 0 15px;
      text-decoration: none;
      transition: transform 0.3s, color 0.3s;
      display: inline-block;
    }
    .footer .social-icons a:hover {
      transform: rotate(360deg) scale(1.2);
      color: #fff;
    }

    /* Emoji Bullets */
    .footer .footer-section li::before {
      content: '⭐ ';
    }
    .footer .footer-section ul {
      list-style: none;
      text-align: left;
      font-size: 16px;
    }

    /* Scroll to Top Button */
    #scrollToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 10px 15px;
      font-size: 24px;
      color: #fff;
      background: #333;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: none;
      animation: bounce 2s infinite alternate;
      transition: background 0.3s;
    }
    #scrollToTop:hover {
      background: #FFD700;
    }

    /* Keyframes for Animations */
    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes bounceIn {
      0%, 100% { transform: translateY(-10px); }
      50% { transform: translateY(0); }
    }
    @keyframes bounce {
      0% { transform: translateY(0); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0); }
    }

    /* Responsive Design */
    @media (max-width: 600px) {
      .footer .footer-content {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

<!-- Footer Menu -->
<div class="footer">
  <div class="footer-content">
    <!-- About Us Section -->
    <div class="footer-section about">
      <h3>About Us 🎉</h3>
      <p>We are a company dedicated to providing top-quality products and services. Our mission is to deliver excellence with every interaction. 💪</p>
    </div>

    <!-- Services Section -->
    <div class="footer-section services">
      <h3>Services 💼</h3>
      <ul>
        <li><a href="#">Web Design 🌐</a></li>
        <li><a href="#">App Development 📱</a></li>
        <li><a href="#">Marketing 📈</a></li>
        <li><a href="#">SEO Services 🔍</a></li>
      </ul>
    </div>

    <!-- Quick Links Section -->
    <div class="footer-section quick-links">
      <h3>Quick Links 🔗</h3>
      <ul>
        <li><a href="#">Home 🏠</a></li>
        <li><a href="#">About 👥</a></li>
        <li><a href="#">Contact 📞</a></li>
        <li><a href="#">Privacy Policy 📜</a></li>
      </ul>
    </div>

    <!-- Contact Us Section -->
    <div class="footer-section contact-us">
      <h3>Contact Us 📞</h3>
      <p>Phone: 📱 +1 (234) 567-890</p>
      <p>Email: 📧 info@example.com</p>
      <p>Address: 🏢 123 Street, City, Country</p>
    </div>
  </div>

  <!-- Social Icons -->
  <div class="social-icons">
    <a href="#" title="Facebook">🔵</a>
    <a href="#" title="Twitter">🐦</a>
    <a href="#" title="Instagram">📸</a>
    <a href="#" title="LinkedIn">🔗</a>
  </div>
</div>

<!-- Scroll to Top Button -->
<button id="scrollToTop" title="Scroll to top">⬆️</button>

<!-- JavaScript for Scroll to Top Button -->
<script>
  // Show/Hide scroll to top button
  window.onscroll = function() {
    const scrollToTop = document.getElementById("scrollToTop");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
      scrollToTop.style.display = "block";
    } else {
      scrollToTop.style.display = "none";
    }
  };

  // Scroll to top when button is clicked
  document.getElementById("scrollToTop").onclick = function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

</body>
</html>

JavaScript

Share this:

Leave a Reply Cancel reply