GTS Menu Demo Library

Copy, customize, and launch beautiful menu designs in seconds. No coding needed.

Browse Menu Designs Get GTS Menu Control

Ready-to-Use Menu Designs

Each menu below comes with HTML, CSS, and optional JavaScript. Just copy → paste into GTS Menu Control → customize → done.

1) Flash Sale Top Bar

Use case: Quick promo banner for storewide sales, discount campaigns, or limited offers.

Demo Menu/Bar

FLASH SALE Get 50% OFF on all premium plugins this week only.
Shop Now
🌐 
<div class="gts-flash-sale-bar">
  <div class="gts-flash-sale-inner">
    <div class="gts-flash-sale-text">
      <span class="gts-badge">FLASH SALE</span>
      <span class="gts-message">Get 50% OFF on all premium plugins this week only.</span>
    </div>
    <a href="#" class="gts-flash-sale-btn">Shop Now</a>
  </div>
</div>
🎨 
.gts-flash-sale-bar {
  width: 100%;
  background: linear-gradient(90deg, #111111 0%, #d62828 100%);
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.gts-flash-sale-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gts-flash-sale-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gts-badge {
  background: #ffffff;
  color: #d62828;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 6px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.gts-message {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

.gts-flash-sale-btn {
  display: inline-block;
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.gts-flash-sale-btn:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

@media (max-width: 767px) {
  .gts-flash-sale-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-flash-sale-btn {
    width: 100%;
    text-align: center;
  }
}
📄 
/* No JavaScript required */

Customize

  • Change 50% OFF
  • Change button link in href="#"
  • Change gradient colors
  • Change button text

2) Free Shipping Promo Menu

Use case: Great for WooCommerce stores, ecommerce campaigns, or minimum order reminders.

Demo Menu/Bar

🚚 Free shipping on orders over $99
Shop Deals Best Sellers Track Order
🌐 
<div class="gts-free-shipping-bar">
  <div class="gts-free-shipping-inner">
    <div class="gts-free-shipping-left">
      <span class="gts-truck-icon">🚚</span>
      <span class="gts-free-shipping-text">Free shipping on orders over $99</span>
    </div>

    <div class="gts-free-shipping-links">
      <a href="#">Shop Deals</a>
      <a href="#">Best Sellers</a>
      <a href="#">Track Order</a>
    </div>
  </div>
</div>
🎨 
.gts-free-shipping-bar {
  width: 100%;
  background: #0f172a;
  color: #ffffff;
  font-family: Arial, sans-serif;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gts-free-shipping-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.gts-free-shipping-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gts-truck-icon {
  font-size: 18px;
  line-height: 1;
}

.gts-free-shipping-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.gts-free-shipping-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.gts-free-shipping-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.gts-free-shipping-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .gts-free-shipping-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-free-shipping-links {
    gap: 12px;
  }
}
📄 
/* No JavaScript required */

Customize

  • Change order threshold
  • Replace links with product/category pages
  • Swap truck emoji with text or icon HTML

3) Coupon Reveal Promo Bar

Use case: Perfect for encouraging clicks and coupon engagement.

Demo Menu/Bar

Special Offer: Use coupon SAVE20 and get 20% OFF today.
🌐 
<div class="gts-coupon-bar">
  <div class="gts-coupon-inner">
    <div class="gts-coupon-content">
      <span class="gts-coupon-title">Special Offer:</span>
      <span class="gts-coupon-text">Use coupon <strong id="gtsCouponCode">SAVE20</strong> and get 20% OFF today.</span>
    </div>
    <button class="gts-coupon-btn" id="gtsCopyCouponBtn">Copy Code</button>
  </div>
</div>
🎨 
.gts-coupon-bar {
  width: 100%;
  background: #fff7ed;
  border-top: 1px solid #fed7aa;
  border-bottom: 1px solid #fed7aa;
  font-family: Arial, sans-serif;
}

.gts-coupon-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gts-coupon-content {
  font-size: 15px;
  color: #7c2d12;
  line-height: 1.5;
}

.gts-coupon-title {
  font-weight: 700;
  margin-right: 6px;
}

#gtsCouponCode {
  background: #ffffff;
  border: 1px dashed #ea580c;
  color: #c2410c;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

.gts-coupon-btn {
  background: #ea580c;
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.gts-coupon-btn:hover {
  opacity: 0.92;
}

@media (max-width: 767px) {
  .gts-coupon-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-coupon-btn {
    width: 100%;
  }
}
📄 
document.addEventListener('DOMContentLoaded', function () {
  var copyBtn = document.getElementById('gtsCopyCouponBtn');
  var couponCode = document.getElementById('gtsCouponCode');

  if (copyBtn && couponCode) {
    copyBtn.addEventListener('click', function () {
      var code = couponCode.textContent.trim();

      if (navigator.clipboard) {
        navigator.clipboard.writeText(code).then(function () {
          copyBtn.textContent = 'Copied!';
          setTimeout(function () {
            copyBtn.textContent = 'Copy Code';
          }, 2000);
        });
      } else {
        copyBtn.textContent = 'Code: ' + code;
        setTimeout(function () {
          copyBtn.textContent = 'Copy Code';
        }, 2000);
      }
    });
  }
});

Customize

  • Change coupon code
  • Change discount text
  • Change colors
  • Replace button with a link if preferred

4) Limited Time Countdown Menu

Use case: Great for urgency-based campaigns, launches, special offers, or festive sales.

Demo Menu/Bar

Limited Time Offer Sale ends in:
00 Days
00 Hours
00 Minutes
00 Seconds
Claim Offer
🌐 
<div class="gts-countdown-bar">
  <div class="gts-countdown-inner">
    <div class="gts-countdown-message">
      <span class="gts-countdown-label">Limited Time Offer</span>
      <span>Sale ends in:</span>
    </div>

    <div class="gts-countdown-timer" id="gtsCountdownTimer">
      <div class="gts-time-box">
        <span id="gtsDays">00</span>
        <small>Days</small>
      </div>
      <div class="gts-time-box">
        <span id="gtsHours">00</span>
        <small>Hours</small>
      </div>
      <div class="gts-time-box">
        <span id="gtsMinutes">00</span>
        <small>Minutes</small>
      </div>
      <div class="gts-time-box">
        <span id="gtsSeconds">00</span>
        <small>Seconds</small>
      </div>
    </div>

    <a href="#" class="gts-countdown-btn">Claim Offer</a>
  </div>
</div>
🎨 
.gts-countdown-bar {
  width: 100%;
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.gts-countdown-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.gts-countdown-message {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 500;
}

.gts-countdown-label {
  background: rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.gts-countdown-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gts-time-box {
  min-width: 62px;
  text-align: center;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 10px;
}

.gts-time-box span {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.gts-time-box small {
  display: block;
  font-size: 11px;
  opacity: 0.9;
  margin-top: 4px;
  text-transform: uppercase;
}

.gts-countdown-btn {
  display: inline-block;
  background: #ffffff;
  color: #1d4ed8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.gts-countdown-btn:hover {
  opacity: 0.92;
}

@media (max-width: 767px) {
  .gts-countdown-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-countdown-btn {
    width: 100%;
    text-align: center;
  }
}
📄 
document.addEventListener('DOMContentLoaded', function () {
  var targetDate = new Date('2026-12-31T23:59:59').getTime();

  var daysEl = document.getElementById('gtsDays');
  var hoursEl = document.getElementById('gtsHours');
  var minutesEl = document.getElementById('gtsMinutes');
  var secondsEl = document.getElementById('gtsSeconds');

  if (!daysEl || !hoursEl || !minutesEl || !secondsEl) return;

  function updateCountdown() {
    var now = new Date().getTime();
    var distance = targetDate - now;

    if (distance < 0) {
      daysEl.textContent = '00';
      hoursEl.textContent = '00';
      minutesEl.textContent = '00';
      secondsEl.textContent = '00';
      return;
    }

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    daysEl.textContent = String(days).padStart(2, '0');
    hoursEl.textContent = String(hours).padStart(2, '0');
    minutesEl.textContent = String(minutes).padStart(2, '0');
    secondsEl.textContent = String(seconds).padStart(2, '0');
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
});

Customize

  • Change target date in JS
  • Change CTA link
  • Change campaign text
  • Change blue theme to your brand color

5) New Arrival Product Promo Menu

Use case: Highlight new products, latest plugins, launches, or featured items.

Demo Menu/Bar

NEW
Introducing GTS Menu Control Pro
Advanced display rules, schedule control, and custom menu targeting.
Learn More Buy Now
🌐 
<div class="gts-new-arrival-bar">
  <div class="gts-new-arrival-inner">
    <div class="gts-new-arrival-content">
      <span class="gts-new-tag">NEW</span>
      <div class="gts-new-arrival-text-wrap">
        <div class="gts-new-arrival-title">Introducing GTS Menu Control Pro</div>
        <div class="gts-new-arrival-subtitle">Advanced display rules, schedule control, and custom menu targeting.</div>
      </div>
    </div>

    <div class="gts-new-arrival-actions">
      <a href="#" class="gts-new-arrival-link secondary">Learn More</a>
      <a href="#" class="gts-new-arrival-link primary">Buy Now</a>
    </div>
  </div>
</div>
🎨 
.gts-new-arrival-bar {
  width: 100%;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  font-family: Arial, sans-serif;
}

.gts-new-arrival-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.gts-new-arrival-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 600px;
  min-width: 260px;
}

.gts-new-tag {
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 999px;
  letter-spacing: 0.8px;
}

.gts-new-arrival-title {
  font-size: 16px;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.3;
}

.gts-new-arrival-subtitle {
  font-size: 14px;
  color: #475569;
  line-height: 1.5;
  margin-top: 2px;
}

.gts-new-arrival-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gts-new-arrival-link {
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.gts-new-arrival-link.secondary {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.gts-new-arrival-link.primary {
  background: #2563eb;
  color: #ffffff;
}

.gts-new-arrival-link:hover {
  opacity: 0.92;
}

@media (max-width: 767px) {
  .gts-new-arrival-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-new-arrival-actions {
    width: 100%;
  }

  .gts-new-arrival-link {
    flex: 1 1 auto;
    text-align: center;
  }
}
📄 
/* No JavaScript required */

Customize

  • Change product/plugin name
  • Change subtitle
  • Update CTA links
  • Change badge text from NEW to HOT, LAUNCH, or FEATURED

6) Black Friday Promo Menu

Use case: Perfect for Black Friday, Cyber Monday, mega sale campaigns, or bold seasonal promotions.

Demo Menu/Bar

BLACK FRIDAY Massive deals are live now — save up to 70% on selected items.
View Deals Shop Now
🌐 
<div class="gts-bf-bar">
  <div class="gts-bf-inner">
    <div class="gts-bf-left">
      <span class="gts-bf-badge">BLACK FRIDAY</span>
      <span class="gts-bf-text">Massive deals are live now — save up to 70% on selected items.</span>
    </div>
    <div class="gts-bf-actions">
      <a href="#" class="gts-bf-link">View Deals</a>
      <a href="#" class="gts-bf-link alt">Shop Now</a>
    </div>
  </div>
</div>
🎨 
.gts-bf-bar {
  width: 100%;
  background: #000000;
  color: #ffffff;
  font-family: Arial, sans-serif;
  border-top: 2px solid #facc15;
  border-bottom: 2px solid #facc15;
}

.gts-bf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.gts-bf-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gts-bf-badge {
  background: #facc15;
  color: #111111;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.gts-bf-text {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
}

.gts-bf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gts-bf-link {
  text-decoration: none;
  background: #facc15;
  color: #111111;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.25s ease;
}

.gts-bf-link.alt {
  background: #ffffff;
  color: #111111;
}

.gts-bf-link:hover {
  opacity: 0.92;
}

@media (max-width: 767px) {
  .gts-bf-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-bf-actions {
    width: 100%;
  }

  .gts-bf-link {
    flex: 1 1 auto;
    text-align: center;
  }
}
📄 
/* No JavaScript required */

Customize

  • Change sale percentage
  • Change badge text
  • Change CTA links
  • Replace Black Friday text for Cyber Monday if needed

7) Eid / Ramadan Sale Promo Menu

Use case: Ideal for Eid sales, Ramadan offers, festive discounts, or special celebration campaigns.

Demo Menu/Bar

🌙
Eid Special Offer
Celebrate with exclusive festive deals and limited-time discounts.
Explore Offers
🌐 
<div class="gts-eid-bar">
  <div class="gts-eid-inner">
    <div class="gts-eid-content">
      <span class="gts-eid-icon">🌙</span>
      <div class="gts-eid-text-wrap">
        <div class="gts-eid-title">Eid Special Offer</div>
        <div class="gts-eid-subtitle">Celebrate with exclusive festive deals and limited-time discounts.</div>
      </div>
    </div>
    <a href="#" class="gts-eid-btn">Explore Offers</a>
  </div>
</div>
🎨 
.gts-eid-bar {
  width: 100%;
  background: linear-gradient(90deg, #065f46 0%, #047857 100%);
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.gts-eid-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.gts-eid-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 600px;
  min-width: 260px;
}

.gts-eid-icon {
  font-size: 22px;
  line-height: 1;
}

.gts-eid-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.gts-eid-subtitle {
  font-size: 14px;
  opacity: 0.92;
  line-height: 1.5;
  margin-top: 2px;
}

.gts-eid-btn {
  display: inline-block;
  background: #ffffff;
  color: #065f46;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.gts-eid-btn:hover {
  opacity: 0.92;
}

@media (max-width: 767px) {
  .gts-eid-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .gts-eid-btn {
    width: 100%;
    text-align: center;
  }
}
📄 
/* No JavaScript required */

Customize

  • Replace Eid with Ramadan, Puja, New Year, or any festival
  • Change the icon
  • Update offer wording
  • Change green theme to brand color

8) Announcement / Notice Bar

Use case: Great for business notices, shipping delays, new updates, policy announcements, launch notices, or holiday schedules.

Demo Menu/Bar

Notice We have updated our pricing and support policy. Please review the latest details before purchase.
Read More
🌐 
<div class="gts-notice-bar">
  <div class="gts-notice-inner">
    <div class="gts-notice-content">
      <span class="gts-notice-label">Notice</span>
      <span class="gts-notice-text">We have updated our pricing and support policy. Please review the latest details before purchase.</span>
    </div>
    <a href="#" class="gts-notice-link">Read More</a>
  </div>
</div>
🎨 
.gts-notice-bar {
  width: 100%;
  background: #eff6ff;
  color: #1e3a8a;
  border-top: 1px solid #bfdbfe;
  border-bottom: 1px solid #bfdbfe;
  font-family: Arial, sans-serif;
}

.gts-notice-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gts-notice-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 15px;
  line-height: 1.5;
}

.gts-notice-label {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.gts-notice-text {
  font-weight: 500;
}

.gts-notice-link {
  text-decoration: none;
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.gts-notice-link:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .gts-notice-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
📄 
/* No JavaScript required */

Customize

  • Change notice text
  • Change label text to Update, Alert, News, Info
  • Replace link destination
  • Change the color theme based on urgency

Want Full Control Over These Menus?

Use GTS Menu Control to show menus by device, user role, page, and schedule.

Get GTS Menu Control

Powered by
►
Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.
None
►
Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.
None
►
Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.
None
►
Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.
None
Powered by
Copyright © 2022 – 2026 WP Store BD. All rights reserved.