Dynamic dropdown max-width based on the longest item

Snippet

Omschrijving

Dynamic dropdown max-width based on the longest item

Field	Value
Snippet Status	Done
Snippet Description	Dynamische width op dropdown menu met js
Snippet Type Code	HTML
Snippet URL
Snippet Content	// Dynamic dropdown max-width based on the longest item var dropdowns = document.querySelectorAll('.desktop__navigation ul li ul.sub-menu'); dropdowns.forEach(function(dropdown) { var maxWidth = 0; var items = dropdown.querySelectorAll('li a'); items.forEach(function(item) { var itemWidth = item.offsetWidth; if (itemWidth > maxWidth) { maxWidth = itemWidth; } }); dropdown.style.width = (maxWidth + 90) + 'px'; console.log(dropdown.style.width) });
Snippet Content CSS
Snippet Content HTML
Snippet Content JS	// Dynamic dropdown max-width based on the longest item var dropdowns = document.querySelectorAll('.desktop__navigation ul li ul.sub-menu'); dropdowns.forEach(function(dropdown) { var maxWidth = 0; var items = dropdown.querySelectorAll('li a'); items.forEach(function(item) { var itemWidth = item.offsetWidth; if (itemWidth > maxWidth) { maxWidth = itemWidth; } }); dropdown.style.width = (maxWidth + 90) + 'px'; console.log(dropdown.style.width) });
Snippet Content PHP
Particle Snippet in Software	1
Particle Snippet in Boilerplate	0

Item	Type

Item	Type	Category	Tags