如何将图片设置为按钮？汉堡菜单图片作为下拉导航触发按钮实现方法

你现在的代码存在两个明显错误，导致汉堡图无法正常显示在按钮上：

• 普通<button>元素本身不支持src和input属性，你之前注释掉的「单独创建汉堡图img元素」的思路是正确的，需要把图片作为子元素插入到按钮内部
• 你把下拉菜单的导航内容直接塞进了按钮元素内部，不符合下拉菜单的DOM结构逻辑，下拉内容应该和触发按钮同级，放在外层的dropdown_menu容器中

// header 
const headerContent = () => {
  const header = document.getElementById("header");

   //logo bilde
  const img = document.createElement("img");
  img.id = "logo";
  img.src = "BANNER/logo.png"; 
  img.alt = "Logo";
  
  
  //handlekurven
   const divHandlekurv = document.createElement("img");
   divHandlekurv.src = "IKON/shoppingbagikon.png";
   divHandlekurv.id = "handlekurv";
  
  //burgermenyen
  const divDropdown_menu = document.createElement("div");
  divDropdown_menu.className = "dropdown_menu";
  const menu_bar = document.createElement("button");
  // 删除无效的input、src属性配置
  menu_bar.id = "burgerknapp";
  // 放开你注释的汉堡图创建逻辑
  const menuikon = document.createElement("img");
  menuikon.src = "IKON/burgerikon.png";
  menuikon.alt = "菜单";
  // 把汉堡图插入到按钮内部
  menu_bar.appendChild(menuikon);

  //kategoriene i burgermenyen
  const menu_content = document.createElement("div");
  menu_content.className = "content";
  const menu_content1 = document.createElement("a");
  menu_content1.href = "omflo.html";
  menu_content1.textContent = "blabla";
  const menu_content2 = document.createElement("a");
  menu_content2.href = "produkter.html";
  menu_content2.textContent = "Produkter";
  const menu_content3 = document.createElement("a");
  menu_content3.href = "betingelser.html";
  menu_content3.textContent = "Betingelser";


  //elementer lagt til i header
  menu_content.appendChild(menu_content1);
  menu_content.appendChild(menu_content2);
  menu_content.appendChild(menu_content3);
  // 下拉内容不要塞到按钮里，挂载到外层dropdown_menu容器
  divDropdown_menu.appendChild(menu_bar);
  divDropdown_menu.appendChild(menu_content);
  header.appendChild(divDropdown_menu);
  header.appendChild(img);
  header.appendChild(divHandlekurv);
  
  // 如果需要点击触发下拉，可补充以下点击事件逻辑
  menu_bar.addEventListener('click', () => {
    menu_content.classList.toggle('show');
  })
};

headerContent();

你需要补充以下CSS来实现基础的下拉效果和按钮样式优化：

/* 去掉按钮默认样式 */
#burgerknapp {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
/* 调整汉堡图尺寸按需修改 */
#burgerknapp img {
  width: 24px;
  height: 24px;
}
/* 下拉容器相对定位 */
.dropdown_menu {
  position: relative;
}
/* 默认隐藏下拉内容 */
.content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  /* 其他你需要的菜单样式 */
}
/* 点击后显示下拉内容 */
.content.show {
  display: block;
}

内容的提问来源于stack exchange，提问作者Kristinh