Горизонтальное меню с картинками

Question

нужно сделать горизонтальное меню, которое содержит 6 пунктов. Все эти 6 пунктов - картинки. Картинки уже есть, но вот как меню создать (горизонтальное) не знаю

Answer 1

Почему использовать table?
Если можно просто использовать img если это только изображения

// Константа для основного блока где будут внедряться наши изображения
// Константа которая сохраняет ссылку на изображения и alt если ссылка будет недоступна
const menu = document.getElementById('menu');
const imag = [
  ['https://img.icons8.com/officel/512/home.png', 'home'],
  ['https://img.icons8.com/dusk/512//laptop.png', 'laptop'],
  ['https://img.icons8.com/dusk/512/iphone.png', 'phone'],
  ['https://img.icons8.com/officel/512/ipad-pro.png', 'pad'],
  ['https://img.icons8.com/dusk/512/monitor.png', 'monitor']
];

// Проходимся по каждом элементу массива
for(let i = 0; i < imag.length; i++) {
  // Создаём новый объект тип которому img
  // Прикрепляем данному элементу ссылку на изображения и alt
  let image = document.createElement('img');
  image.src = imag[i][0];
  image.alt = imag[i][1];
  
  // Внедряем наш созданный элемент в наш основной элемент
  menu.append(image);
}

.menu > img {
  position: relative;
  width: 48px;
  cursor: pointer;
  padding-bottom: 8px;
  margin: 0 12px;
  transition: .25s;
  border-bottom: 2px solid transparent;
}
.menu > img:hover {
  border-color: #FF0000;
}

<div class="container">
  <div class="menu" id="menu">
    
  </div>
</div>

БЛОГ НА HUSL

Горизонтальное меню с картинками

Ответы (1 шт):