创建一个移动栏（在导航栏内）移动到用户悬停的元素？

Question

我正在尝试创建一个 nav bar，它由常规导航元素和位于当前页面下方的指示栏组成。我的目标是让这个栏在用户悬停的任何元素下移动，并根据预定义的大小自动调整自身大小（可能根据字长？）。我构建了 nav bar 本身，但我有点不知道如何实现这种效果。我是否应该始终计算鼠标的当前位置并添加当前位置和悬停位置之间的差异？关于可调整大小，这是次要目标，不太重要。

这是我目前所做的： Html:

<header class="header">
            <div class="logo"> 
                <nav id="nav_bar">
                    <ul id="nav_ul">
                        <li><a href="#">apples</a></li>
                        <li><a href="#">bananas</a></li>
                        <li><a href="#">tomatos</a></li>
                        <li><a href="#">onions</a></li>
                    </ul>
                    <div id="container">
                        <div id="bar"></div>
                    </div>
                </nav>
            </div>
        </header>

CSS:

#nav_ul a{
    color: #685e6d;
    text-decoration: none;
    display: inline-block;
   -webkit-transition: color 0.4s ease-in-out;
   -moz-transition: color 0.4s ease-in-out;
   -ms-transition: color 0.4s ease-in-out;
   -o-transition: color 0.4s ease-in-out;
   transition: color 0.4s ease-in-out;
}

#nav_ul{
    display: inline-block;
    list-style-type: none;
}

#nav_ul li{
    display: inline-block;
    position: relative;
    left: 90px;
    bottom: 30px;
    font-size: 19px;
    margin-left: 40px;
    font-weight: 100;
    font-size: 16px;
}

#nav_ul a:hover{
    color: #4ad1fd;
}


#container{
    position: relative;
    left: 167px;
    height: auto;
    width: 530px;
    top: 5px;
}

#bar{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 7px;
    width: 107px;
    background-color: #ffcc00;
    border-radius: 3px;
}

JSfiddle

类似于这张图片：

Answer 1

您正在尝试创建一个 lavalamp 菜单，请查看下面的示例...

/* ---- reset ------*/
html, body, div, a {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }


/* --- basic styles ----*/

body {
  font-family: "Unica One";
  font-size: 1.5em;
  background: #f2f2f2;
  text-shadow: 0 1px 0 white; }

/* --- for this example ----*/

.nav {
  text-align: center;
  overflow: hidden;
  margin: 2em auto;
  width: 480px;
  position: relative; }
  .nav a {
    display: block;
    position: relative;
  float: left;
  padding: 1em 0 2em;
    width: 25%;
  text-decoration: none;
   color: #393939;
   -webkit-transition: .7s;
   -moz-transition: .7s;
   -o-transition: .7s;
   -ms-transition: .7s;
   transition: .7s; }
   .nav a:hover {
     color: #c6342e; }

.effect {
 position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

 .nav a:nth-child(1):hover ~ .effect {
   left: 12.5%; }
 .nav a:nth-child(2):hover ~ .effect {
   left: 37.5%; }
 .nav a:nth-child(3):hover ~ .effect {
   left: 62.5%; }
 .nav a:nth-child(4):hover ~ .effect {
   left: 87.5%; }

/* ----- line example -----*/

.ph-line-nav .effect {
  width: 90px;
  height: 2px;
  bottom: 36px;
  background: #c6342e;
  box-shadow: 0 1px 0 white; 
  margin-left:-45px;
}

 <div class="ph-line-nav nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Gallery</a>
  <a href="#">Contact</a>
  <div class="effect"></div>
 </div>

在这里找到更多 http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Answer 2

在您的 CSS 中，您有 #nav_ul a:hover，因此您可以添加 border-bottom-style: solid; border-color:<color>，并且您的项目下方会出现一个栏。它不会滑动，也不会动画。但是，它会在他们悬停的地方下方放置一个彩色条。

Answer 3

这是一个 jQuery 解决方案：（JSFiddle 如果代码片段不起作用）

function BarMove(el) {
    var bar = $('#bar');
    var width = el.outerWidth();
    var left = el.offset().left;
    bar.animate({
        width: width,
        left: left
    });
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
    BarMove($(this));
}, function () {
    BarMove(Current);
});

#nav_ul a {
    color: #685e6d;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: color 0.4s ease-in-out;
    -moz-transition: color 0.4s ease-in-out;
    -ms-transition: color 0.4s ease-in-out;
    -o-transition: color 0.4s ease-in-out;
    transition: color 0.4s ease-in-out;
}

#nav_ul {
    display: inline-block;
    list-style-type: none;
}

#nav_ul li {
    display: inline-block;
    position: relative;
    left: 90px;
    bottom: 30px;
    font-size: 19px;
    margin-left: 40px;
    font-weight: 100;
    font-size: 16px;
}

#nav_ul a:hover {
    color: #4ad1fd;
}

#container {
    position: relative;
    left: 0;
    height: auto;
    width: 530px;
    top: 5px;
}

#bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 7px;
    width: 107px;
    background-color: #ffcc00;
    border-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
    <div class="logo">
        <nav id="nav_bar">
            <ul id="nav_ul">
                <li><a href="#" class="current">apples</a>
                </li>
                <li><a href="#">bananas</a>
                </li>
                <li><a href="#">tomatos</a>
                </li>
                <li><a href="#">onions</a>
                </li>
            </ul>
            <div id="container">
                <div id="bar"></div>
            </div>
        </nav>
    </div>
</header>

这并不准确，因此您需要调整数字，但据我所知，功能才是您所追求的。

创建一个移动栏（在导航栏内）移动到用户悬停的元素？

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

html

javascript

css

jquery

navbar