Trendige – Header
/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,body{ font-family: Arial, sans-serif; line-height:1.3; color:#222; }
/* Header */
header{
width:100%;
background:#fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.08);
position:relative;
z-index:1000;
}
/* Top bar */
.top-bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 18px;
}
.logo-tagline { display:flex; flex-direction:column; align-items:flex-start; }
.logo-tagline a { text-decoration:none; color:inherit; display:flex; align-items:center; gap:10px; }
.logo-tagline img{ width:110px; height:auto; display:block; }
.logo-tagline span{ font-size:13px; color:#666; margin-top:2px; }
/* Search */
.search-wrap{ flex:1; display:flex; justify-content:center; position:relative; }
.search-bar{
width:100%; max-width:760px; display:flex; align-items:center; gap:0; position:relative;
}
.search-bar input{
width:100%; padding:11px 14px; border:1px solid #ddd; border-right:none; border-radius:6px 0 0 6px;
outline:none; font-size:14px;
}
.search-bar button{
padding:10px 16px; border:none; background:#007bff; color:#fff; border-radius:0 6px 6px 0; cursor:pointer;
}
/* Autocomplete dropdown */
.search-suggestions{
position:absolute; left:0; right:0; top: calc(100% + 6px); max-height:320px; overflow:auto;
background:#fff; border:1px solid #e6e6e6; box-shadow:0 8px 24px rgba(0,0,0,0.08); border-radius:6px;
display:none;
}
.suggestion-item{
display:flex; gap:10px; padding:9px 12px; align-items:center; cursor:pointer; text-decoration:none; color:#222;
}
.suggestion-item img{ width:44px; height:44px; object-fit:cover; border-radius:6px; background:#f3f3f3; }
.suggestion-item:hover{ background:#f7f8fb; }
.suggestion-title{ font-size:14px; }
.suggestion-sub{ font-size:12px; color:#666; margin-top:3px; }
/* Icons & Account */
.icons{ display:flex; align-items:center; gap:10px; }
.icons a{ color:#333; font-size:18px; text-decoration:none; display:inline-flex; align-items:center; padding:6px; border-radius:6px; }
.icons a:hover{ background:#f2f6ff; }
.account{ position:relative; }
.account button{
background:#007bff; color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px;
display:inline-flex; gap:8px; align-items:center;
}
.account button:focus{ outline:2px solid rgba(0,123,255,0.25); outline-offset:2px; }
.account-options{
display:none; position:absolute; right:0; top:46px; min-width:160px; background:#fff; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.12);
padding:8px 6px; z-index:1200;
}
.account-options a{
display:block; padding:9px 12px; font-size:14px; color:#222; text-decoration:none;
border-radius:6px;
}
.account-options a:hover{ background:#f4f7ff; }
/* remove any lining/underline or borders anywhere inside account options */
.account-options, .account-options a{ border:none; text-decoration:none; }
/* Show account options on hover or when .open class added */
.account:hover .account-options, .account.open .account-options{ display:block; }
/* Navigation (main) */
nav{ background:#f8f9fa; border-top:1px solid rgba(0,0,0,0.02); }
.menu{ display:flex; list-style:none; width:100%; align-items:stretch; gap:0; max-width:1200px; margin:0 auto; padding:6px 12px; }
.menu > li{ position:relative; flex:0 0 auto; padding:6px 8px; }
.menu > li > a{ display:flex; align-items:center; gap:8px; color:#333; text-decoration:none; font-size:14px; padding:8px 10px; border-radius:6px; transition:background .18s ease, color .18s ease; }
.menu > li > a i{ font-size:18px; color:#666; }
.menu > li:hover > a{ background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.04); color:#000; }
/* Submenu – for Fashion (mega) and other regular drop downs */
.submenu{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
border-radius:8px;
padding:14px;
min-width:260px;
box-shadow:0 12px 36px rgba(0,0,0,0.12);
z-index:1100;
}
/* For Fashion we will show a wider mega style submenu */
.menu > li.fashion:hover > .submenu{ display:flex; gap:16px; min-width:920px; }
.mega-col{ display:flex; flex-direction:column; gap:6px; min-width:180px; max-width:240px; }
.mega-col h4{ font-size:13px; margin-bottom:6px; color:#0b2540; }
.mega-col a{ display:block; font-size:13px; color:#333; text-decoration:none; padding:6px 8px; border-radius:6px; }
.mega-col a:hover{ background:#f5f9ff; }
/* small image placeholder inside mega menu column */
.mega-image{ min-width:160px; display:flex; align-items:center; justify-content:center; border-radius:6px; background:#fafafa; border:1px dashed #e6e6e6; color:#999; font-size:13px; padding:18px; }
/* nested deeper submenu (for desktops) */
.submenu li{ position:relative; list-style:none; }
.submenu li > .submenu{ display:none; position:absolute; left:100%; top:0; min-width:220px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,0.08); border-radius:8px; }
/* Show nested on hover */
.submenu li:hover > .submenu{ display:block; }
/* Make hover transitions smooth */
.submenu, .menu > li > a{ transition: all .15s ease; }
/* MOBILE / TABLET */
.hamburger{ display:none; cursor:pointer; font-size:20px; background:#fff; border-radius:6px; padding:8px; }
@media (max-width: 920px){
.top-bar{ padding:8px 12px; }
.logo-tagline img{ width:92px; }
.search-wrap{ order:3; width:100%; padding:8px 12px; }
.search-bar{ max-width:100%; }
.icons{ gap:6px; }
.hamburger{ display:inline-flex; align-items:center; justify-content:center; }
.menu{ display:none; flex-direction:column; align-items:stretch; width:100%; padding:0; margin:0; }
.menu.active{ display:flex; background:#fff; border-top:1px solid #eee; padding:8px 12px; }
.menu > li{ width:100%; padding:6px 0; border-bottom:none; } /* removed lining/border */
.menu > li > a{ padding:10px 12px; justify-content:flex-start; }
.menu > li > .submenu{ position:static; display:none; padding:0; box-shadow:none; background:transparent; }
.menu > li.open > .submenu{ display:block; padding:12px 0; }
.mega-col{ min-width:100%; max-width:100%; }
.mega-image{ display:none; }
/* nested mobile submenu show inline */
.submenu li > .submenu{ position:static; display:none; box-shadow:none; background:transparent; padding-left:12px; }
.submenu li.open > .submenu{ display:block; padding-left:6px; }
.search-suggestions{ left:12px; right:12px; top:calc(100% + 6px); }
}
/* Accessibility focus */
a:focus, button:focus{ outline: 2px solid rgba(0,123,255,0.18); outline-offset:2px; }
/* small helpers */
.caret { margin-left:6px; font-size:11px; color:#777; }
/***** MENU + MOBILE TOGGLING *****/
const hamburger = document.getElementById(‘hamburger’);
const mainMenu = document.getElementById(‘mainMenu’);
hamburger.addEventListener(‘click’, ()=> mainMenu.classList.toggle(‘active’));
// Mobile submenu toggles: add click toggles for any menu li that has submenu
document.querySelectorAll(‘.menu > li’).forEach(li=>{
const sub = li.querySelector(‘.submenu’);
if(sub){
// add clickable caret for mobile
li.querySelector(‘a’).addEventListener(‘click’, (e)=>{
if(window.innerWidth {
const inner = sli.querySelector(‘.submenu’);
if(inner){
sli.querySelector(‘a’).addEventListener(‘click’, (ev)=>{
if(window.innerWidth {
e.stopPropagation();
account.classList.toggle(‘open’);
const expanded = account.classList.contains(‘open’);
accountBtn.setAttribute(‘aria-expanded’, expanded ? ‘true’ : ‘false’);
});
// close account when clicked outside
document.addEventListener(‘click’, ()=> {
account.classList.remove(‘open’);
accountBtn.setAttribute(‘aria-expanded’,’false’);
});
account.addEventListener(‘click’, (e)=> e.stopPropagation());
/***** BUILD UNIQUE SEARCH INDEX FROM MENU LINKS *****/
function buildIndex(){
const anchors = document.querySelectorAll(‘nav a[data-name], nav a’);
const items = [];
const seen = new Set();
anchors.forEach(a=>{
// use data-name if present else textContent
const raw = (a.getAttribute(‘data-name’) || a.textContent || ”).trim();
const href = a.getAttribute(‘href’) || ‘#’;
if(!raw) return;
const key = raw.toLowerCase();
if(!seen.has(key)){
seen.add(key);
items.push({ name: raw, href: href, text: a.textContent.trim() });
}
});
return items;
}
let searchIndex = buildIndex();
/***** AUTOCOMPLETE LOGIC *****/
const searchInput = document.getElementById(‘searchInput’);
const suggestionsBox = document.getElementById(‘suggestions’);
function showSuggestions(q){
suggestionsBox.innerHTML = ”;
const val = q.trim().toLowerCase();
if(val.length === 0){ suggestionsBox.style.display = ‘none’; return; }
// startsWith matching (first letters), but also include contains if not enough results
const starts = searchIndex.filter(item => item.name.toLowerCase().startsWith(val));
let results = starts;
if(results.length item.name.toLowerCase().includes(val) && !results.includes(item));
results = results.concat(contains);
}
results = results.slice(0, 12); // limit
if(results.length === 0){
suggestionsBox.style.display = ‘none’;
return;
}
// Create suggestion items
results.forEach(r=>{
const a = document.createElement(‘a’);
a.href = r.href || ‘#’;
a.className = ‘suggestion-item’;
a.setAttribute(‘role’,’option’);
// placeholder image (you can replace with actual image URL later)
const img = document.createElement(‘img’);
img.src = ”; // empty -> show gray bg from CSS; you can set later
img.alt = ”;
const info = document.createElement(‘div’);
info.style.flex=’1′;
const name = document.createElement(‘div’);
name.className=’suggestion-title’; name.textContent = r.name;
const sub = document.createElement(‘div’);
sub.className=’suggestion-sub’; sub.textContent = ‘Menu / Product’;
info.appendChild(name); info.appendChild(sub);
a.appendChild(img); a.appendChild(info);
// when clicked navigate (or you can use handler)
a.addEventListener(‘click’, (e)=>{
// default anchors are “#”
// If you want navigation: window.location.href = r.href;
});
suggestionsBox.appendChild(a);
});
suggestionsBox.style.display = ‘block’;
}
searchInput.addEventListener(‘input’, (e)=>{
const q = e.target.value;
if(q.length >= 1){ showSuggestions(q); }
else { suggestionsBox.style.display = ‘none’; }
});
// keyboard navigation for suggestions
let selectedIndex = -1;
searchInput.addEventListener(‘keydown’, (e)=>{
const items = suggestionsBox.querySelectorAll(‘.suggestion-item’);
if(items.length === 0) return;
if(e.key === ‘ArrowDown’){ e.preventDefault(); selectedIndex = Math.min(selectedIndex+1, items.length-1); highlight(items); }
else if(e.key === ‘ArrowUp’){ e.preventDefault(); selectedIndex = Math.max(selectedIndex-1, 0); highlight(items); }
else if(e.key === ‘Enter’){ if(selectedIndex >=0 && items[selectedIndex]) { items[selectedIndex].click(); } }
});
function highlight(items){
items.forEach((it,i)=> it.style.background = (i===selectedIndex? ‘#eef4ff’ : ‘transparent’) );
if(selectedIndex >=0 && items[selectedIndex]) items[selectedIndex].scrollIntoView({block:’nearest’});
}
// close suggestions when clicking outside
document.addEventListener(‘click’, (e)=>{
if(!document.querySelector(‘.search-wrap’).contains(e.target)){
suggestionsBox.style.display = ‘none’;
selectedIndex = -1;
}
});
// rebuild index on resize or dynamically if you update menu later
window.addEventListener(‘resize’, ()=> { searchIndex = buildIndex(); });
// ensure menu accessible on first load
document.addEventListener(‘DOMContentLoaded’, ()=> { searchIndex = buildIndex(); });
