Web Design Header ออกแบบ Header เว็บไซตทดและ Responsive

Header ??????????????????????????????????????????????????????????????????

Header ?????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ???????????????????????????????????????????????????????????????????????????????????? navigation ????????????????????????????????????????????? header ??????????????????????????????????????? ???????????????????????????????????????????????? header ??????????????????????????????????????? user experience ??????????????????????????????????????????????????????

??????????????????????????????????????????????????? header ?????????????????????????????? Logo ?????????????????????????????? ??????????????????????????????????????? ?????????????????????????????????????????????, Navigation Menu ????????????????????????????????????????????????, Search Bar ??????????????????????????????????????????????????????, Call-to-Action (CTA) ??????????????????????????? ???????????? ????????????????????????????????? ??????????????????????????????, User Account ????????????????????? ????????????????????? ????????????????????????????????????, Language/Region Selector ??????????????????????????????????????????????????????

Header ??????????????????????????? Consistent ???????????????????????????????????????????????????????????????, Accessible ??????????????????????????????????????? keyboard ????????? screen reader, Responsive ????????????????????????????????????????????????????????????, Fast ?????????????????????????????????????????????????????????????????????, Clear ?????????????????????????????????????????????????????????????????????????????????????????? ????????????????????????????????????

??????????????????????????? Header Design

?????????????????? header ?????????????????????

# === Header Design Patterns ===

cat > header_patterns.yaml << 'EOF'
header_types:
  fixed_header:
    name: "Fixed/Sticky Header"
    description: "Header ?????????????????????????????????????????????????????????????????? scroll"
    css: "position: fixed; top: 0;"
    pros: ["Navigation accessible ????????????", "CTA ?????????????????????????????????"]
    cons: ["????????? screen space ???????????????????????? mobile", "?????????????????? content"]
    best_for: "E-commerce, SaaS, Web apps"
    
  shrinking_header:
    name: "Shrinking Header"
    description: "Header ????????????????????????????????? scroll ??????"
    css: "transition: height 0.3s; /* JS toggle class */"
    pros: ["????????????????????? space ??????????????? scroll", "Smooth transition"]
    cons: ["????????????????????? JavaScript", "Complex implementation"]
    best_for: "Corporate websites, Portfolios"
    
  hide_on_scroll:
    name: "Hide on Scroll Down / Show on Scroll Up"
    description: "??????????????????????????? scroll ?????? ??????????????????????????? scroll ????????????"
    css: "transform: translateY(-100%); transition: transform 0.3s;"
    pros: ["????????????????????? space ???????????????????????????", "UX ???????????? mobile"]
    cons: ["????????? confuse users ????????????????????????", "???????????? JavaScript"]
    best_for: "Blog, News, Content-heavy sites"
    
  transparent_header:
    name: "Transparent Header"
    description: "Header ????????????????????? overlay ?????? hero image"
    css: "position: absolute; background: transparent;"
    pros: ["????????? dramatic hero section", "Immersive feel"]
    cons: ["???????????? contrast ????????? background", "?????????????????????????????? backgrounds"]
    best_for: "Landing pages, Photography, Creative sites"
    
  mega_menu:
    name: "Mega Menu Header"
    description: "???????????? dropdown ???????????????????????? ???????????? subcategories"
    pros: ["???????????? content structure ??????????????????", "???????????????????????? site ????????????"]
    cons: ["Complex implementation", "????????? overwhelming"]
    best_for: "E-commerce, Large corporate sites, News portals"
    
  hamburger_menu:
    name: "Hamburger Menu (Mobile)"
    description: "??????????????????????????????????????????????????? 3 ?????????"
    pros: ["????????????????????? space", "Clean look"]
    cons: ["???????????? navigation", "Low discoverability"]
    best_for: "Mobile design, Minimal sites"

color_schemes:
  light: "bg-white text-dark ??? Clean, professional"
  dark: "bg-dark text-white ??? Modern, bold"
  transparent: "bg-transparent ??? Creative, immersive"
  gradient: "bg-gradient ??? Trendy, energetic"
  glassmorphism: "backdrop-filter: blur ??? Modern, elegant"
EOF

echo "Header patterns defined"

??????????????? Responsive Header ???????????? CSS

???????????????????????? responsive header

<!-- === Responsive Header Example === -->
<style>
/* === Modern Responsive Header === */
:root {
  --header-height: 70px;
  --primary: #2563eb;
  --text: #1f2937;
  --bg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.header.scrolled {
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

/* Desktop Navigation */
.nav-desktop {
  display: none;
  gap: 32px;
  list-style: none;
}

.nav-desktop a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.nav-desktop a:hover,
.nav-desktop a.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

/* CTA Button */
.btn-cta {
  background: var(--primary);
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-cta:hover { opacity: 0.9; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s;
}

/* Mobile Menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  padding: 20px;
}

.nav-mobile.open { display: block; }

.nav-mobile a {
  display: block;
  padding: 16px 0;
  font-size: 1.125rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
}

/* Tablet+ */
@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .hamburger { display: none; }
}
</style>

<header class="header" id="mainHeader">
  <div class="header-inner">
    <a href="/" class="logo">Brand</a>
    <ul class="nav-desktop">
      <li><a href="/" class="active">Home</a></li>
      <li><a href="/products">Products</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <button class="btn-cta">Get Started</button>
    <div class="hamburger" onclick="toggleMenu()">
      <span></span><span></span><span></span>
    </div>
  </div>
</header>

Header Components ???????????? JavaScript

Interactive header features

// === Header JavaScript Components ===

// 1. Shrink on Scroll
const header = document.getElementById('mainHeader');
let lastScroll = 0;

window.addEventListener('scroll', () => {
  const currentScroll = window.pageYOffset;
  
  // Add scrolled class
  if (currentScroll > 50) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
  
  // Hide on scroll down, show on scroll up
  if (currentScroll > lastScroll && currentScroll > 200) {
    header.style.transform = 'translateY(-100%)';
  } else {
    header.style.transform = 'translateY(0)';
  }
  
  lastScroll = currentScroll;
});

// 2. Mobile Menu Toggle
function toggleMenu() {
  const menu = document.querySelector('.nav-mobile');
  const hamburger = document.querySelector('.hamburger');
  menu.classList.toggle('open');
  hamburger.classList.toggle('active');
  document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';
}

// 3. Active Link Highlight
function setActiveLink() {
  const links = document.querySelectorAll('.nav-desktop a');
  const currentPath = window.location.pathname;
  
  links.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === currentPath) {
      link.classList.add('active');
    }
  });
}

// 4. Search Toggle
function toggleSearch() {
  const searchBar = document.querySelector('.search-bar');
  searchBar.classList.toggle('open');
  if (searchBar.classList.contains('open')) {
    searchBar.querySelector('input').focus();
  }
}

// 5. Dropdown Menu
document.querySelectorAll('.has-dropdown').forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.querySelector('.dropdown').style.display = 'block';
  });
  item.addEventListener('mouseleave', () => {
    item.querySelector('.dropdown').style.display = 'none';
  });
});

// 6. Sticky Header with Intersection Observer
const sentinel = document.createElement('div');
sentinel.style.height = '1px';
document.body.prepend(sentinel);

const observer = new IntersectionObserver(
  ([entry]) => {
    header.classList.toggle('sticky', !entry.isIntersecting);
  },
  { threshold: 0 }
);
observer.observe(sentinel);

console.log('Header components initialized');

UX Best Practices ?????????????????? Header

???????????????????????????????????? header ???????????????

#!/usr/bin/env python3
# header_ux.py ??? Header UX Best Practices
import json
import logging

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("ux")

class HeaderUXGuide:
    def __init__(self):
        pass
    
    def best_practices(self):
        return {
            "navigation": {
                "max_items": "5-7 items ?????????????????????????????? (Miller's Law)",
                "order": "??????????????????????????????????????????????????? ???????????????????????????",
                "labels": "??????????????????????????? ?????????????????? ??????????????????????????????",
                "active_state": "????????????????????????????????????????????????????????????????????????",
                "breadcrumbs": "??????????????? breadcrumbs ?????????????????? site ?????????",
            },
            "logo": {
                "position": "?????????????????? (convention ????????? users ?????????????????????)",
                "size": "??????????????????????????????????????? ????????????????????? 30-50px",
                "link": "?????????????????????????????????????????????????????????????????????",
                "format": "SVG ?????????????????? crisp display ????????? resolution",
            },
            "cta": {
                "visibility": "??????????????????????????????????????? contrast",
                "text": "????????? action verb (???????????? ???????????????, ?????????????????????????????????, ?????????????????????)",
                "position": "??????????????????????????? header",
                "mobile": "???????????????????????????????????? mobile view ????????????",
            },
            "accessibility": {
                "keyboard": "Tab ?????????????????????????????????, Enter ????????????, Escape ????????? dropdown",
                "aria": "????????? aria-label, aria-expanded, role=navigation",
                "contrast": "Text/background contrast ratio >= 4.5:1",
                "focus": "???????????? focus indicator ??????????????????",
                "skip_link": "?????? Skip to content link ?????????????????? screen reader",
            },
            "performance": {
                "height": "Fixed height ????????????????????? layout shift (CLS)",
                "fonts": "Preload web fonts ???????????????????????? header",
                "images": "Logo ???????????? inline SVG ????????????????????? HTTP request",
                "animations": "????????? transform/opacity ???????????????????????? (GPU accelerated)",
            },
        }
    
    def common_mistakes(self):
        return {
            "too_many_items": "?????????????????????????????????????????? ????????????????????????????????????????????? dropdown",
            "no_mobile_menu": "??????????????? hamburger menu ?????????????????? mobile",
            "huge_header": "Header ?????????????????????????????? ????????? screen space",
            "no_sticky": "????????? sticky ??????????????????????????? scroll ??????????????????",
            "poor_contrast": "????????????????????????????????????????????????????????? background",
            "missing_active_state": "???????????????????????????????????????????????????????????????",
            "no_search": "??????????????? search ?????????????????? content-heavy sites",
        }

guide = HeaderUXGuide()
bp = guide.best_practices()
print("Header UX Best Practices:")
for category, rules in bp.items():
    print(f"\n  {category}:")
    if isinstance(rules, dict):
        for key, value in list(rules.items())[:3]:
            print(f"    {key}: {value}")

mistakes = guide.common_mistakes()
print("\nCommon Mistakes:")
for mistake, desc in list(mistakes.items())[:4]:
    print(f"  - {mistake}: {desc}")

Performance Optimization

???????????????????????????????????????????????? header

#!/usr/bin/env python3
# header_performance.py ??? Header Performance Tips
import json
import logging

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("perf")

class HeaderPerformance:
    def __init__(self):
        pass
    
    def optimization_checklist(self):
        return {
            "cls_prevention": {
                "issue": "Cumulative Layout Shift ????????? header",
                "solutions": [
                    "??????????????? fixed height ????????? header (???????????? height: 70px)",
                    "Reserve space ???????????? padding-top ?????? body",
                    "????????? font-display: swap ?????????????????? web fonts",
                    "??????????????? width/height ?????????????????? logo image",
                ],
                "css_example": "body { padding-top: 70px; } .header { height: 70px; position: fixed; }",
            },
            "font_loading": {
                "issue": "Web fonts ??????????????? text ????????????????????? (FOIT/FOUT)",
                "solutions": [
                    "Preload critical fonts ?????? ",
                    "????????? font-display: swap",
                    "????????? system fonts ?????????????????? header ????????????????????????????????????",
                    "Subset fonts ?????????????????????????????????????????????????????????",
                ],
                "html_example": '',
            },
            "lazy_features": {
                "issue": "???????????? JavaScript ??????????????????????????????????????????????????????",
                "solutions": [
                    "Lazy load mega menu content",
                    "Defer search functionality",
                    "Load notification badge async",
                    "Intersection Observer ?????????????????? sticky behavior",
                ],
            },
            "mobile_optimization": {
                "touch_targets": "Min 44x44px ?????????????????? tap targets",
                "menu_animation": "????????? CSS transform ?????????????????? display toggle",
                "viewport": "????????????????????? viewport 320px ??????????????????",
                "safe_area": "?????????????????? iPhone notch (env(safe-area-inset-top))",
            },
        }

perf = HeaderPerformance()
checklist = perf.optimization_checklist()
print("Header Performance Checklist:")
for category, info in checklist.items():
    print(f"\n  {category}:")
    print(f"    Issue: {info.get('issue', info.get('touch_targets', ''))}")
    solutions = info.get("solutions", [])
    for sol in solutions[:2]:
        print(f"    - {sol}")

FAQ ??????????????????????????????????????????

Q: Header ????????????????????? Sticky ??????????????????????

A: ??????????????????????????????????????????????????? ??????????????? Sticky ?????????????????? E-commerce (???????????????????????????????????? search ??????????????????????????????????????????), SaaS/Web apps (navigation ???????????????), Mobile (screen ???????????? scroll ????????????) ??????????????????????????????????????? Sticky ?????????????????? Landing page (scroll down ???????????? journey), Blog post (????????????????????? reading space), Portfolio (focus ????????? content) ?????????????????? sticky ??????????????? "hide on scroll down, show on scroll up" ?????????????????? mobile ????????????????????? space ?????????????????? ???????????? sticky header ?????????????????????????????? 60px ?????? mobile

Q: ???????????? Hamburger ????????????????????????????

A: Hamburger menu ??????????????????????????????????????????????????? ??????????????? ????????????????????? space, clean design, ???????????? convention ????????? users ?????????????????? ????????????????????? ???????????? navigation ??????????????? discoverability ????????????, ???????????????????????? 2 ??????????????? (???????????????????????? + ???????????????), engagement ???????????? 20-30% ??????????????????????????????????????? visible navigation ?????????????????? ????????? hamburger ?????????????????? mobile ???????????????????????? (?????? < 768px), Desktop ????????????????????? navigation ????????????, ??????????????????????????????????????? (3-4 items) ????????? bottom navigation bar ????????? hamburger ?????????????????? mobile, ?????????????????? hamburger ??????????????? label "Menu" ???????????? ??????????????? clarity

Q: Header ????????????????????????????????????????

A: Desktop 60-80px ????????????????????????????????????????????? ???????????????????????????????????? ???????????????????????????????????????, Mobile 50-60px ????????????????????? screen space, Sticky (scroll) 48-56px ????????????????????????????????? scroll ????????????????????? space Logo ?????????????????? 30-50px ??????????????? header, Padding ??????????????????-???????????? 10-16px, CTA button ???????????????????????????????????? font 14-16px ????????????????????????????????? devices ???????????????????????? iPhone SE (??????????????????????????????) ????????? iPad

Q: ?????????????????? Mega Menu ?????????????????????????????????????

A: Mega Menu ???????????????????????????????????????????????????????????? content ???????????? (E-commerce, News) ????????????????????? ???????????????????????? categories ?????????????????? ????????? heading, ???????????? subcategories ????????????????????? 3 ???????????????, ????????? images/icons ????????????????????? scan ?????????????????????, ????????? column layout (2-4 columns), ??????????????????????????????????????????????????? page content, Animation fade-in ???????????? (200ms), ???????????????????????? mouse ????????? (????????? delay 300ms ????????????????????????????????????????????????????????????), Accessible ????????? keyboard ????????? arrow keys navigate, ?????????????????? mobile ????????????????????????????????? accordion menu ????????? mega menu