jQuery 将背景图像设置为菜单悬停状态和菜单活动状态

Posted 2023-03-06

【中文标题】jQuery 将背景图像设置为菜单悬停状态和菜单活动状态

【英文标题】：jQuery animate background image to be menu hover state, and menu active state

【发布时间】：2022-01-10 08:07:04

【问题描述】：

我的菜单项有这个标记。我想使用 SVG 或动画背景图像作为悬停和活动状态。这是我的代码笔：

CODEPEN

我仍然无法让拱门落在每个菜单项的中间。我也试过this link modified to my needs，但仍然无法让它降落在中心。

理想情况下，我想使用 svg 文件并为拱形路径设置动画。但找不到任何例子。

如果有人可以帮助我的原始代码并消除重复背景，同时仍然保持线条，或者可以指出我可以从哪里开始的任何方向。

代码如下：

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 -->

【参考方案1】：

在css中：

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

在 javascript 中，重新计算 rt 变量：

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

这是我的代码笔：https://codepen.io/ng2hunglong/pen/abLvWpY

【讨论】：

长，你太棒了！关于如何使其停留在单击的菜单项下的任何想法？