javascript - 创建一个移动栏(在导航栏内)移动到用户悬停的元素？

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/