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();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
});
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;
}