ایجاد یک منوی ناوبری با یک نشانگر فعال متحرک (جاوا اسکریپت)

در صفحه‌های کوچک‌تر از 801 پیکسل، برجسته‌کننده متحرک را پنهان می‌کنیم و فقط از چند سبک مشابه برای نشان دادن آیتم فعال منو استفاده می‌کنیم.

در اینجا سبک‌های منوی مورد علاقه ما وجود دارد:

1

/*CUSTOM VATIABLES HERE*/

2

3

.menu {

4

  list-style: none;

5

  position: relative;

6

  display: inline-flex;

7

  background: var(--pink);

8

  padding: 10px;

9

  border-radius: 15px;

10

  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

11

}

12

13

.menu::before {

14

  content: "";

15

  position: absolute;

16

  top: 10px;

17

  left: 0;

18

  transform: translateX(var(--transformJS));

19

  width: var(--widthJS);

20

  height: calc(100% - 20px);

21

  border-radius: var(--active-link-border-radius);

22

  background: var(--light-pink);

23

  box-shadow: var(--active-link-box-shadow);

24

  transition: all 0.3s linear;

25

}

26

27

.menu li a {

28

  display: inline-block;

29

  position: relative;

30

  padding: 10px 20px;

31

  font-size: 20px;

32

  font-weight: 500;

33

  z-index: 1;

34

}

35

36

.menu li:not(:last-child) {

37

  margin-right: 20px;

38

}

39

40

@media (max-width: 800px) {

41

  .menu,

42

  .menu li {

43

    display: inline-block;

44

  }

45

46

  .menu li.active a {

47

    background: var(--light-pink);

48

    border-radius: var(--active-link-border-radius);

49

    box-shadow: var(--active-link-box-shadow);

50

  }

51

52

  .menu::before {

53

    display: none;

54

  }

55

}

3. جاوا اسکریپت را اعمال کنید

حالا قسمت جالبش.

ما را مشخص می کنیم doCalculations() تابعی که به عنوان پارامتر مورد فعال را دریافت می کند و این کارها را انجام می دهد:

• عرض آن را محاسبه کنید و موقعیت سمت چپ را نسبت به لیست والد تنظیم کنید.
• بر این اساس به روز رسانی کنید transformJS و widthJS متغیرهای CSS که به نوبه خود مقدار را تنظیم می کنند transform و width مقادیر منو ::before شبه عنصر

این تابع در موارد زیر اجرا خواهد شد:

• وقتی DOM آماده شد. در چنین حالتی، آیتم فعال همان موردی خواهد بود که با active کلاس به طور پیش فرض، این اولین مورد خواهد بود.
• هر بار که روی پیوند منو کلیک می کنیم یا ماوس را روی آن نگه می داریم.
• همانطور که اندازه پنجره مرورگر را تغییر می دهیم. این مهم است زیرا به یاد داشته باشید که در صفحه نمایش های کوچکتر ما رویکرد متفاوتی را دنبال می کنیم.

در اینجا کد جاوا اسکریپت مورد نیاز برای انیمیشن کلیک کنید:

1

const menu = document.querySelector(".menu");

2

const menuLinks = menu.querySelectorAll("a");

3

const menuLinkActive = menu.querySelector("li.active");

4

const activeClass = "active";

5

6

doCalculations(menuLinkActive);

7

8

for (const menuLink of menuLinks) {

9

  menuLink.addEventListener("click", function (e) {

10

    e.preventDefault();

11

    menu.querySelector("li.active").classList.remove(activeClass);

12

    menuLink.parentElement.classList.add(activeClass);

13

    doCalculations(menuLink);

14

  });

15

}

16

17

function doCalculations(link) {

18

  menu.style.setProperty("--transformJS", `${link.offsetLeft}px`);

19

  menu.style.setProperty("--widthJS", `${link.offsetWidth}px`);

20

}

21

22

window.addEventListener("resize", function() {

23

  const menuLinkActive = menu.querySelector("li.active");

24

  doCalculations(menuLinkActive);

25

});

برای انیمیشن شناور، ما آن را جایگزین می کنیم click رویداد با mouseenter یکی مثل این:

1

...

2

3

menuLink.addEventListener("mouseenter", function () {

4

  document.querySelector(".menu li.active").classList.remove(activeClass);

5

  menuLink.parentElement.classList.add(activeClass);

6

  doCalculations(menuLink);

7

});

نتیجه

انجام شده! به همین سرعت، ما موفق شدیم یک انیمیشن منوی ناوبری عملی ایجاد کنیم که می تواند با کلیک یا شناور کردن رخ دهد. پیاده‌سازی پیشرفته‌تر آن، فهرست‌های کشویی را وارد بازی می‌کند و پیمایش بعدی را مانند on ایجاد می‌کند وب سایت Stripe.

جدا از خود انیمیشن، نکته دیگری که باید در نظر داشت، روشی است که ما از متغیرهای CSS برای به‌روزرسانی سبک‌های شبه عناصر استفاده کردیم. این یک منبع عالی از دانش در مواردی است که به دلیل دستکاری عناصر شبه از طریق جاوا اسکریپت دچار سردرد می شوید.

یک بار دیگر، دموی خود را به یاد بیاوریم.

اولین دمو:

و دومی:

مثل همیشه، خیلی ممنون که خواندید!