html

HTML • CSS • JavaScript • Google Apps Script

🚀 Floating Menu เมนูลอยสำหรับเว็บไซต์และ Google Apps Script

เพิ่มเมนูลอยสวยทันสมัยให้ Web Application รองรับมือถือ พร้อม Animation และปุ่ม Copy Code

ในปัจจุบันเว็บไซต์และ Web Application ถูกใช้งานผ่านทั้งคอมพิวเตอร์ แท็บเล็ต และโทรศัพท์มือถือ การออกแบบเมนูจึงควรเน้น ให้ผู้ใช้งานสามารถเข้าถึงฟังก์ชันสำคัญได้อย่างรวดเร็ว โดยไม่จำเป็นต้องเลื่อนกลับไปด้านบนของหน้าเว็บทุกครั้ง

หนึ่งในรูปแบบเมนูที่เหมาะกับ Web Application เป็นอย่างมากคือ Floating Menu หรือเมนูลอย ซึ่งสามารถลอยอยู่มุมหน้าจอตลอดเวลา และกดเพื่อเปิดเมนูคำสั่งต่าง ๆ ได้ทันที

💡 เหมาะสำหรับ: Google Apps Script Web App, GitHub Pages, Dashboard, ระบบงานโรงเรียน, ระบบลงทะเบียน, ระบบรายงาน และ Mobile Web Application

🌐 Floating Menu คืออะไร?

Floating Menu คือเมนูที่กำหนดตำแหน่งแบบ Fixed ทำให้ปุ่มเมนูยังคงอยู่บนหน้าจอ แม้ว่าผู้ใช้งานจะเลื่อนหน้าเว็บไซต์ขึ้นหรือลงก็ตาม

เราสามารถกำหนดเมนูคำสั่งที่ใช้บ่อย เช่น

🏠

หน้าหลัก กลับสู่ Dashboard หรือหน้าแรกของระบบ

➕

เพิ่มข้อมูล เปิดฟอร์มหรือ Modal สำหรับเพิ่มข้อมูล

🔍

ค้นหา เปิดหน้าหรือช่องค้นหาข้อมูล

🖨️

พิมพ์ พิมพ์รายงานหรือเอกสารของระบบ

⚙️

ตั้งค่า เข้าสู่หน้าตั้งค่าระบบ

✨ จุดเด่นของ Floating Menu

• เมนูลอยอยู่บนหน้าจอตลอดเวลา
• ไม่ต้องเลื่อนกลับไปด้านบนเพื่อเลือกเมนู
• รองรับ Desktop, Tablet และ Mobile
• ประหยัดพื้นที่หน้าจอ
• เพิ่มหรือลดจำนวนเมนูได้ง่าย
• รองรับ Bootstrap Icons
• มี Animation ขณะเปิดและปิด
• เชื่อมกับ JavaScript Function ได้โดยตรง
• ใช้ร่วมกับ Google Apps Script ได้
• นำไปใช้บน GitHub Pages ได้

📱 รองรับ Responsive Design

Floating Menu สามารถออกแบบให้ปรับขนาด ตามอุปกรณ์โดยอัตโนมัติ บนหน้าจอคอมพิวเตอร์สามารถแสดงปุ่มขนาดใหญ่ ส่วนบนมือถือสามารถลดขนาดปุ่มและระยะห่าง เพื่อให้เหมาะกับพื้นที่หน้าจอ

นอกจากนี้ยังสามารถเพิ่มการรองรับ Safe Area ของ iPhone เพื่อป้องกันปุ่มทับกับ Home Indicator บริเวณด้านล่างของหน้าจอได้อีกด้วย

💻 ตัวอย่างโค้ด Floating Menu

1. HTML

ส่วนนี้ใช้สำหรับสร้างโครงสร้าง ของปุ่มเมนูหลักและเมนูย่อย

🌐 HTML

<!-- Bootstrap Icons -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<div class="floating-menu"
id="floatingMenu">

  <div class="floating-menu-items">

    <button
      class="floating-sub-btn"
      onclick="openHome()">

      <i class="bi bi-house-door-fill"></i>
      <span>หน้าหลัก</span>

    </button>


    <button
      class="floating-sub-btn"
      onclick="openAdd()">

      <i class="bi bi-plus-lg"></i>
      <span>เพิ่มข้อมูล</span>

    </button>


    <button
      class="floating-sub-btn"
      onclick="openSearch()">

      <i class="bi bi-search"></i>
      <span>ค้นหา</span>

    </button>


    <button
      class="floating-sub-btn"
      onclick="openPrint()">

      <i class="bi bi-printer-fill"></i>
      <span>พิมพ์</span>

    </button>


    <button
      class="floating-sub-btn"
      onclick="openSettings()">

      <i class="bi bi-gear-fill"></i>
      <span>ตั้งค่า</span>

    </button>

  </div>


  <button
    class="floating-main-btn"
    onclick="toggleFloatingMenu()">

    <i
      class="bi bi-grid-fill"
      id="floatingMainIcon">
    </i>

  </button>

</div>

2. CSS

CSS ใช้สำหรับกำหนดตำแหน่ง สี เงา ขนาดปุ่ม และ Animation ของ Floating Menu

🎨 CSS / style.html

<style>

.floating-menu {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 12px;
}


/* ปุ่มหลัก */

.floating-main-btn {
  width: 58px;
  height: 58px;

  border: none;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #6366f1,
      #4f46e5,
      #3730a3
    );

  box-shadow:
    0 8px 20px
    rgba(79,70,229,.35);

  transition:
    .25s ease;
}


.floating-main-btn i {
  font-size: 25px;

  transition:
    transform .3s ease;
}


.floating-main-btn:hover {
  transform:
    translateY(-2px)
    scale(1.05);
}


/* เมนูย่อย */

.floating-menu-items {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 10px;

  pointer-events: none;
}


.floating-sub-btn {
  height: 46px;

  border: none;

  border-radius: 24px;

  padding:
    0 16px;

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 8px 24px
    rgba(15,23,42,.14);

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(15px)
    scale(.85);

  transition:
    .25s ease;
}


/* เมื่อเปิด */

.floating-menu.open
.floating-menu-items {

  pointer-events: auto;
}


.floating-menu.open
.floating-sub-btn {

  opacity: 1;

  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}


/* Mobile */

@media(max-width:576px){

  .floating-menu {
    right: 16px;

    bottom: 18px;
  }

  .floating-main-btn {
    width: 54px;

    height: 54px;
  }

}


/* iPhone Safe Area */

@supports(
  padding-bottom:
  env(safe-area-inset-bottom)
){

  .floating-menu {

    bottom:
      calc(
        18px +
        env(safe-area-inset-bottom)
      );

  }

}

</style>

3. JavaScript

JavaScript ทำหน้าที่ควบคุม การเปิดและปิด Floating Menu รวมถึงเรียก Function ของระบบ

⚡ JavaScript / javascript.html

<script>

function toggleFloatingMenu() {

  const menu =
    document.getElementById(
      'floatingMenu'
    );

  const icon =
    document.getElementById(
      'floatingMainIcon'
    );


  menu.classList.toggle(
    'open'
  );


  if (
    menu.classList.contains(
      'open'
    )
  ) {

    icon.className =
      'bi bi-x-lg';

  } else {

    icon.className =
      'bi bi-grid-fill';

  }

}


function closeFloatingMenu() {

  const menu =
    document.getElementById(
      'floatingMenu'
    );

  const icon =
    document.getElementById(
      'floatingMainIcon'
    );


  menu.classList.remove(
    'open'
  );


  icon.className =
    'bi bi-grid-fill';

}


function openHome() {

  closeFloatingMenu();

  // showPage('home');

}


function openAdd() {

  closeFloatingMenu();

  // openAddModal();

}


function openSearch() {

  closeFloatingMenu();

  // showPage('search');

}


function openPrint() {

  closeFloatingMenu();

  window.print();

}


function openSettings() {

  closeFloatingMenu();

  // showPage('settings');

}

</script>

🚀 การใช้งานกับ Google Apps Script

สำหรับ Google Apps Script Web App สามารถแยกไฟล์ได้ดังนี้

📁 โครงสร้างไฟล์

code.gs

index.html

javascript.html

style.html

Setup.gs

ในไฟล์ index.html สามารถเรียก CSS และ JavaScript เข้ามาใช้งานได้ดังนี้

🧩 index.html

<?!= include('style'); ?>

<?!= include('javascript'); ?>

💡 สำหรับ Google Apps Script: ไฟล์ javascript.html ควรมี <script>...</script> ครอบโค้ดทั้งหมด และไฟล์ style.html ควรมี <style>...</style> ครอบ CSS ทั้งหมด

🔗 เชื่อม Floating Menu กับระบบเดิม

Floating Menu สามารถเชื่อมต่อ กับ Function ของระบบที่มีอยู่แล้วได้โดยตรง

⚡ ตัวอย่าง showPage()

function openHome() {

  closeFloatingMenu();

  showPage('home');

}


function openSettings() {

  closeFloatingMenu();

  showPage('settings');

}

หรือหากระบบใช้ Bootstrap Modal สามารถเปิด Modal ได้เช่นกัน

🪟 Bootstrap Modal

function openAdd() {

  const modal =
    new bootstrap.Modal(
      document.getElementById(
        'addModal'
      )
    );

  modal.show();

}

💡 เหมาะกับระบบประเภทใดบ้าง?

🏫

ระบบงานโรงเรียน ระบบครู นักเรียน และงานวิชาการ

📋

ระบบลงทะเบียน ลงทะเบียนกิจกรรมและประชุม

📝

ระบบประเมิน PA และแบบประเมินออนไลน์

📊

Dashboard ระบบรายงานและสรุปข้อมูล

💰

ระบบบัญชี รายรับ รายจ่าย และรายงาน

📱

PWA Web App สำหรับใช้งานบนมือถือ

🎯 ช่วยด้าน User Experience อย่างไร?

Floating Menu ช่วยลดจำนวนขั้นตอน ในการเข้าถึงคำสั่งสำคัญ ผู้ใช้งานสามารถเลือกเมนูได้ จากทุกตำแหน่งของหน้าเว็บไซต์

เหมาะกับระบบที่มีหน้าข้อมูลยาว เช่น

• ตารางรายงานจำนวนมาก
• Dashboard
• รายการข้อมูลนักเรียน
• ประวัติการทำรายการ
• แบบฟอร์มที่มีข้อมูลหลายส่วน
• รายงานรายเดือนหรือรายปี

⭐ แนวทางพัฒนาต่อยอด

Floating Menu สามารถนำไปพัฒนาต่อได้อีกหลายรูปแบบ เช่น

• เพิ่มปุ่มแจ้งเตือน
• เพิ่ม Dark Mode
• เพิ่ม Login / Logout
• เพิ่ม Scan QR Code
• เพิ่ม LINE
• เพิ่ม Share
• เพิ่มปุ่มกลับด้านบน
• เพิ่มปุ่มสร้างรายการใหม่
• ปรับเป็น Glassmorphism
• ปรับสีตาม Theme ของระบบ

✅ สรุป

Floating Menu เป็นองค์ประกอบเล็ก ๆ ที่ช่วยเพิ่มความสะดวกให้กับ Web Application ได้อย่างมาก

นอกจากช่วยประหยัดพื้นที่หน้าจอแล้ว ยังทำให้ผู้ใช้งานสามารถเข้าถึง คำสั่งสำคัญได้ง่ายและรวดเร็ว โดยเฉพาะเมื่อใช้งานผ่านโทรศัพท์มือถือ

สามารถนำไปใช้ได้ทั้ง HTML Website, GitHub Pages และ Google Apps Script Web App

🚀 สามารถนำโค้ดไปปรับใช้ กับระบบของตนเองได้ทันที ทั้งสี ไอคอน จำนวนเมนู และ Function การทำงาน

🏷️ Tags

Floating Menu Floating Action Button Google Apps Script GAS Web App HTML CSS JavaScript Bootstrap Responsive Web Application UI UX เมนูลอย

💙 เรียนรู้ • สร้างสรรค์ • แบ่งปัน
ตัวอย่างสำหรับนักพัฒนา Web Application และ Google Apps Script