简易解决方案

Question

我在菜单上有链接，下划线在悬停时向外滑动。我正在尝试在我的固定菜单上向我的链接添加左右填充，但由于某种原因填充不显示。

下面是我想要实现的图像（请注意主动链接下划线是如何左右填充的，您可以看到该行如何覆盖的不仅仅是文本）

继承我的fiddle

我已经在这里看到堆栈溢出，问题可能是显示，我将其更改为内联块或块，但这不起作用。

我的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav_Wrapper_dk">

<nav id="dk_Nav" role="navigation" class="cf">

    <div><a href="#home" class="link_Button sliding-u-l-r scroll">Home</a>   </div>
    <div><a href="#about" class="link_Button sliding-u-l-r scroll">About us</a></div>
    <div><a href="#link3" class="link_Button sliding-u-l-r">Gallery</a></div>
    <div><a href="#link4" class="link_Button sliding-u-l-r">Find Us</a></div>
    <div><a href="#link5" class="link_Button sliding-u-l-r">Contact</a></div>
    <div><a href="#link6" class="link_Button sliding-u-l-r">Catering</a></div>
    <div><a href="#link7" class="link_Button sliding-u-l-r">Blog</a></div>

</nav>

</div>

<div id="home"></div>

<div id="about"></div>

我的CSS：

#nav_Wrapper_dk {
    position: fixed;
    width: 100%;
    height: 50px;
    background: white;
    border-bottom: 1px solid #f1f1f1;
}


#dk_Nav {
    max-width: 1280px;
    /* width: 742.6167px; */
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2001;
}

    #dk_Nav div {
        margin-top: 11px;   
    }



    #dk_Nav #logo_dk {
        margin-top: 0px;    
    }

    .link_Button {
        display: block;
        float: left;
        height: 40px;
        font-family: 'Open Sans', sans-serif;
        font-size: .7em;
        color: black;
        line-height: 3.3em;
        text-transform: uppercase;
        letter-spacing: .2em;
        padding-left: 12px;
    }

    /* LEFT TO RIGHT */
    .sliding-u-l-r {
        display: inline-block;
    }

    .sliding-u-l-r:after {
        content: '';
        display: block;
        height: 3px;
        width: 0;
        background: transparent;
        transition: width .3s ease, background-color .3s ease;
    }

    .sliding-u-l-r:hover:after {
        width: 100%;
        background: black;
    }

    .sliding-u-l-r.active:after {
      width: 100%;
      background: black;
    }


#home {
  width: 100%;
  height: 1000px;
  background: #ccc;
}

#about {
  width: 100%;
  height: 1000px;
  background: white;
}

我的JAVASCRIPT

// Scroll Menu
$(function() {


  $("nav  a").click(function() {
    //**Add class active to current clicked menu item  and remove class active from other menu item**//
        $(this).addClass('active').parent().siblings().children().removeClass('active');
//** Smooth scroll Logic **?
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')     && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  if (target.length) {
    $('html, body').animate({
      scrollTop: target.offset().top
    }, 1000);
        return false;
      }
    }
  });
});

有人可以告诉我我做错了吗？

提前致谢！

Answer 1

简易解决方案

.sliding-u-l-r:after {
    content: '';
    display: block;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
    padding-left: 6px;
    padding-right: 6px;
    position: relative;
    left: -6px;
}

更好的解决方案

将下划线效果:after应用于a标记的父级

e.g。

<div class="item">
    <a href="#home" class="link_Button sliding-u-l-r scroll">Home</a>
</div>

.item:after {
    content: '';
    display: block;
    height: 3px;
    width: 0;
    background: transparent;
    transition: width .3s ease, background-color .3s ease;
}

请参阅演示：https://drive.google.com/open?id=0B8DJ6pJV3E9FWmFiUlFTWGl5RjA（进行了一些更改以使这个想法有效）

左侧和右侧填充不适用于菜单

1 个答案:

简易解决方案

更好的解决方案