Как создать меню Nav, используя javascript? А как плавно прокрутить раздел после нажатия на пункт меню?

Question

Я пытаюсь создать навигационное меню с 4 опциями, используя только Javascript. Я пытаюсь вставить его в 'ul' с идентификатором "navbar__list", и я хочу создать li с классами и идентификаторами до JS. Это то, что я сделал до сих пор, но я знаю, что мой код кажется повторяющимся, и я не уверен, как сделать его более кратким.

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");

//Attempt to build the Nav Menu
const navItem1 = document.createElement("a");
navItem1.classList.add("menu-items");
navItem1.setAttribute("id", "menu-1");
navItem1.innerText = "Section 1";
navItem1.href = "#section1";
navList.appendChild(navItem1);

const navItem2 = document.createElement("a");
navItem2.classList.add("menu-items");
navItem2.setAttribute("id", "menu-2");
navItem2.innerText = "Section 2";
navItem2.href = "#section2";
navList.appendChild(navItem2);

const navItem3 = document.createElement("a");
navItem3.classList.add("menu-items");
navItem3.setAttribute("id", "menu-3");
navItem3.innerText = "Section 3";
navItem3.href = "#section3";
navList.appendChild(navItem3);

const navItem4 = document.createElement("a");
navItem4.classList.add("menu-items");
navItem4.setAttribute("id", "menu-4");
navItem4.innerText = "Section 4";
navItem4.href = "#section4";
navList.appendChild(navItem4);

Я также хочу создать эффект прокрутки, поэтому всякий раз, когда я нажимаю на пункт меню, он плавно перемещается к разделу в моем HTML. Каждый раздел имеет метку Раздел1 - Раздел4.

Answer 1

Во-первых, вы можете использовать следующий код вместо повторения, и он выполняет ту же задачу

const navList = document.getElementById("navbar__list");

for(let i=1; i<5; i++){
    const navItem = document.createElement("a");
    navItem.classList.add("menu-items");
    navItem.setAttribute("id", `menu-${i}`);
    navItem.innerText = `Section ${i}`;
    navItem.href = `#menu-${i}`;
    navList.appendChild(navItem);
}

Я полагаю, что это решит первую проблему.

Во-вторых, для гладкой прокрутки. В вашей css заднице

html,body{
   scroll-behavior: smooth;
}

для получения дополнительной информации о плавной прокрутке отметьте это https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Answer 2

Приведенный выше подход очень корректен, но я использовал другой подход для выполнения sh this.

Я использовал массив для хранения пунктов меню, а затем использовал forEach l oop через массив для создания закрепите элементы и добавьте их в список ul.

const navMenu = document.querySelectorAll("header");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

items.forEach((item, i) => {
    const el = document.createElement("a");
    el.innerText = item;
    el.classList.add("menu-items");
    el.setAttribute("id", `menu-${i + 1}`);
    el.href = `#section${i + 1}`;
    navList.appendChild(el);
});

Проверьте ссылку на кодовый блок, чтобы посмотреть: https://codepen.io/burhanmm/pen/vYOqQdb