Trying to make a dropdown menu where I add an burgermenu-image as a button. How can I append the image to the button? The button/image is ment to show a dropdown-menu, which can be used to navigate across the webpage.

// 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");
  menu_bar.input = "image";
  menu_bar.src = "IKON/burgerikon.png";
  menu_bar.id = "burgerknapp";
 //const menuikon = document.createElement("img");
// menuikon.src = "IKON/burgerikon.png";

  //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);
  menu_bar.appendChild(menu_content);
  //divDropdown_menu.appendChild(menuikon);
  divDropdown_menu.appendChild(menu_bar);
  header.appendChild(divDropdown_menu);
  header.appendChild(img);
  header.appendChild(divHandlekurv);
};

headerContent();

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can set the image background of the button or you can add a click event listener on the image and run the functionality of the button in its callback.

img.addEventListener("click", function(){
 //your functionality
});

CodePudding user response：

You can create a button and set a background image. For example:

input.button {
   border:0;
   background-color: transparent;
   background-image: URL(your-image-path);
   background-repeat: no-repeat;
   width: your-image-width;
   height: your-image-height;
}