I have this mark-up for my menu items. I would like to use either a SVG or an animated background image as a hover and active state. Here's my codepen:

CODEPEN

I still can't get the arch to land in the middle of each menu item. I've also tried this link modified to my needs but still cannot get it to land in the centre.

Ideally, I would like to use the svg file and animate the arch path. But cannot find any examples.

If anyone can help with my original code and eliminate the repeating background while still keeping the line, or can point me to any direction as to where I can start.

Code below:

jQuery(function($){

    $('ul.menu-nav li').each(function(i) {
        
        var wt= $(this).width();
        var offset = $(this).offset();
        var rt = ($('ul.menu-nav').width() - ($(this).offset().left   $(this).outerWidth()));

        console.log(wt);
        //console.log(offset.left);
        console.log(rt);

        $(this).attr('data-width', wt);
        $(this).attr('data-rel', rt);
    });

        $( 'ul.menu-nav li' ).on( {
            mouseenter : function(e){
                var attachment = $( this ).attr( 'data-rel' );
                //var dwt = $( this ).attr( 'data-width' );
                //var distance = ($(attachment)   10)   "px";
                //var parent = $( this ).attr( 'data-rel' );
                
                //$( 'div#'   attachment).addClass('active').siblings().removeClass('active');
                //$( this ).addClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', -attachment);
                 e.stopPropagation();
            },
            
            mouseleave : function(e) {
                var attachment = $( this ).attr( 'id' );
                //var parent = $( this ).attr( 'data-rel' );
                
                
                //$( this ).removeClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', 'center');
                //$( '.sub-menu').slideUp();
                 e.stopPropagation();
            }
       });

       /*$( 'ul.menu-nav li a' ).on( {
            mousedown : function(e){
                var url = $( this ).attr( 'href' );
                
                $( 'div'   url).addClass('active').siblings().removeClass('active');
                $( this ).parent().addClass('active').siblings().removeClass('active');
                //$( '.cp-line .cp-line-inner').css('background-position', -attachment);
                $('div'   url).fadeOut(function() {
                    // finished
                });
                e.stopPropagation();
            }
        });*/
});

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    transition: all 0.3s ease 0.3s;
}

.inner-header {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    align-items: center;
}

.drawer-menu {
    width:50%;
}

.inner-menu {
    position:relative;
    padding:0 40px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
}

ul.menu-nav li {

}

ul.menu-nav li a {

}

li#starting-point {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    opacity:0;
}

.site-branding {
    width: 50%;
    text-align: right;
    padding: 0 40px;
}

.site-branding a img {
    max-width: 320px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
  margin:0;
  padding:0;
  list-style:none;
}

.cp-line {
    width: 100%;
    height: 50px;
    overflow:hidden;
    margin: 0 auto;
    position:relative;
}


.cp-line-inner {
    width:100%;
    height:100%;
    border-bottom:1px solid;
  background-image:url('https://sp-gd.com/commonplace/wp-content/themes/spxcommonplace/assets/line.svg');
  background-position:center;
  background-size:contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header id="masthead" class="site-header">
        <div class="inner-header">

            <div class="drawer-menu">
                <div class="inner-menu">
                    <ul class="menu-nav">
                        <li><a href="#work" data-bg="<?php the_field('background_colour', 10); ?>">Work</a></li>
                        <li><a href="#interesting" data-bg="<?php the_field('background_colour', 12); ?>">Interesting</a></li>
                        <li><a href="#useful" data-bg="<?php the_field('background_colour', 14); ?>">Useful</a></li>
                        <li><a href="#about" data-bg="<?php the_field('background_colour', 16); ?>">About</a></li>
                        <li><a href="#contact" data-bg="<?php the_field('background_colour', 18); ?>">Contact</a></li>
                        <li id="starting-point" class="current_item">STARTING</li>
                    </ul>
                </div>
            </div>
            
            <!-- #site-navigation -->

            <div class="site-branding">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a>
            </div><!-- .site-branding -->

            <div class="cp-line">
                <div class="cp-line-inner">
                    
            </div>
        </div>

    </header><!-- #masthead -->

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

in css:

.cp-line-inner {
    background-repeat: repeat-x;
}

in javascript, recalculate rt variable:

var rt = ($(window).width()/2 - $(this).offset().left - wt / 2);

Here is my codepen: https://codepen.io/ng2hunglong/pen/abLvWpY