Dynamic dropdown max-width based on the longest item
Omschrijving
Dynamic dropdown max-width based on the longest itemSnippet
| 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 |
Relations
| Item | Type |
|---|
Pointing items
| Item | Type | Category | Tags |
|---|