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

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 菜单，请查看以下示例...

＆＃13;

＆＃13;

/* ---- 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在此处查找更多内容http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Answer 2

这是一个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>

这不完全正确，所以你需要调整数字，但据我所知，功能就是你所追求的。

Answer 3

在您的CSS中，您有#nav_ul a:hover，因此您可以添加border-bottom-style: solid; border-color:<color>，并且您的商品下方会显示一个条形图。它不会滑动或动画。然而，它会在它们悬停的地方放置一个彩色条。