كيف أستطيع أن أطبق تأثير على عنصر ما في قائمة الـnav

وعليكم السلام ورحمة الله وبركاته 

تختلف طرق إنشاء التأثير فيمكنcss و Javascript بإنشائه 

يمكنك من تطبيق التنسيق سهولة باستخدام Javascript حيث ما تفعله التالي ، يمكنك من القائمة بالشكل التالي 

<div class="container">
 <nav>
  <ul class="nav">
    <li class="nav__item"><a class="nav__link active" href="#">Home</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 1</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 3</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 4</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Item 5</a></li>
  </ul>
 </nav>
</div>

وبعدها نعطي الوسم التنسيقات الازمة في css  ويمكن أن تختلف التنسيقات من مصمم لأخر 

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    *::before, *::after {
        box-sizing: border-box;
    }

    .container {
      width: 100%;
      max-width: 1024px;
      display: block;
      margin: 30px auto;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
    }

    .nav__item {
      padding: 1rem;
    }

    .nav__link {
      display: block;
      padding: .3125rem 1.5rem;
      text-transform: uppercase;
    }

    .nav__link.active  {
      border: 1px solid #ff4b4c;
      color: #ff4b4c;
    }

وبعدها باستخدام Javascript يمكننا أن ننشئ الدالة المستخدم في التأثير ، كما هي موضحة بهذا الكود ، ويمكن أن يكون هناك عدّة دوال مبسطة أكثر  لإنشاء التأثير 

document.addEventListener('DOMContentLoaded', function() {

      const selector = '.nav__link';
      const elems = Array.from(document.querySelectorAll(selector));
      const navigation = document.querySelector('nav');

      function makeActive(evt) {
        const target = evt.target;

         if (!target || !target.matches(selector)) {
           return;
         }

        elems.forEach(elem => elem.classList.remove('active'));
        evt.target.classList.add('active');
      };

      navigation.addEventListener('mousedown', makeActive);

    });

يمكنك الاطلاع على النتيجة ، سوف أضع لك الملفات html.zip . 

يمكنك الاطلاع على تأثرات أخرى من خلال المقالة التالية  

بالتوفيق

يمكنك بدلا من استخدام طريقة حافاسكربت التي أشار اليها أسامة أن تستخدم jquery وهي أبسط بكثير من استخدام طريقة جافاسكربت التي أشار اليها أسامة, بالاعتماد على كود html وcss الذي أرفقه أسامة يمكن فعل ذلك باستخدام jquery كالتالي

    $(".nav__link").click(function () {
        $(".nav__link").removeClass("active");
        $(this).addClass("active");
    });

شرح الكود : قمنا بتحديد العناصر التي لديها الصنف nav__link ثم أضفنا اليها حدث click , اي عند الضغط على أي عنصر لديه الصنف nav__link سوف يتم حذف الصنف active من جميع العناصر التي لديها الصنف nav__link , ثم سوف نضيف الصنف active فقط للعنصر الذي ضغطنا عليه