locked
how to map specific css to jquery RRS feed

  • Question

  • User-1045082127 posted

    hi all

    I have a menu which is:

          <ul class="navbar-nav">
            <li class="nav-item menu grow text-center">
              <a class="nav-link font-Bhoma" href="#header">خانه</p>
            </li>
            <li class="nav-item menu grow text-center">
              <a class="nav-link font-Bhoma" href="#aboutMe">درباره من</p>
            </li>
            <li class="nav-item  menu text-center">
              <a class="nav-link font-Bhoma" href="#resume">رزومه</a>
            </li>
            <li class="nav-item menu text-center">
              <a class="nav-link font-Bhoma" href="#sample">نمونه کارها </a>
            </li>
            <li class="nav-item menu text-center">
              <a class="nav-link font-Bhoma" href="#parallax">سفارش کار</a>
            </li>
          </ul>

    and animated by :

    .menu::before
    {
      background:  #dad410;
      content: "";
      ;
      top:50%;
      left: 50%;
      transform:  translate(-50%,-50%);
      z-index:-1;
      transition: all 0.3s ease;
      width: 0;
      height: 80px;
    }
    .menu:hover::before
    {
      width: 100%;
      text-align: center;
    }

    now In my scenario, I want to do it by jquery (scrollspy) .

    var id = $(this).attr('id');
            if(navElem!=undefined)
            {
              navElem.closest(".menu").removeClass('menu-hover');
            }
            navElem = $('.navbar-nav .nav-item a[href="#' + id+ '"]');
            navElem.closest(".menu").addClass('menu-hover');

    so how can I do that? it seems it done by addClass

    Wednesday, April 22, 2020 7:33 PM

Answers

  • User-1330468790 posted

    Hi aminsoraya,

      

    Yes, you could achieve this effect by adding/removing CSS class from menu items. Here I think "toggleClass()" would be a better option than either "addClass()" or "removeClass()

    Below is a demonstration about how to use "toggleClass()" function based on your example code.

    HTML part:

    <div>
                <ul class="navbar-nav">
                    <li class="nav-item menu grow text-center">
                        <a class="nav-link font-Bhoma" href="#header">خانه Home</a>
                    </li>
                    <li class="nav-item menu grow text-center">
                        <a class="nav-link font-Bhoma" href="#aboutMe">درباره من About Me</a>
                    </li>
                    <li class="nav-item  menu text-center">
                        <a class="nav-link font-Bhoma" href="#resume">رزومه CV</a>
                    </li>
                    <li class="nav-item menu text-center">
                        <a class="nav-link font-Bhoma" href="#sample">نمونه کارها Portfolios</a>
                    </li>
                    <li class="nav-item menu text-center">
                        <a class="nav-link font-Bhoma" href="#parallax">سفارش کار Work order</a>
                    </li>
                </ul>
            </div>

    Head (style + script):

    <head runat="server">
        <title></title>
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        
        <style type="text/css">
            .menu::before {
                background: #dad410;
                content: "";
                ;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                z-index: -1;
                transition: all 0.3s ease;
                width: 0;
                height: 80px;
            }
    
            .menu1::before {
                width: 100%;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $(".menu").hover(function () {
                    $(this).toggleClass('menu1');
                })
            });
        </script>
    
    </head>

    Demo:

      

    I still need to remind you that

    • you can not manipulate the CSS of the pseudo elements e.g. before/after directly since they are not actually a part of the DOM
    • and you can not trigger the pseudo classes e.g. hover directly since they are not trusted events.

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 23, 2020 2:41 AM