Question

我想创建一个在悬停时显示的导航但是我不知道如何去做。当我将鼠标悬停在名称上时，我想这样做是如何在左上角完成的：http://higz.ghosted.net/

我希望它就像显示为列表的示例和菜单<ul> <li>

Answer 1

如果要异步执行，请使用jquery和ajax。我更喜欢通过使用ajax在运行时计算导航来实现它，前提是它们不是静态页面。（取决于您使用的服务器端语言） 否则只需使用jquery来执行此操作。

使用jQuery的悬停事件，您可以显示导航，然后隐藏它：

$("#id").hover(function(){
$("#id").show();
});

$("#id").mouseleave/blur(function(){
$("#id").hide();
});

并将代码粘贴到您想要实现的位置。否则我们只能在这里提出理论。我们不应该编写完整的代码。

Answer 2

这不是一项艰巨的任务。

让我们开始吧：

步骤1）构建要在悬停

上显示的示例html内容

<div class="toggle-display">
Your HTML
</div>

步骤2）让我们给它一些css

    .toggle-display {
    opacity: 0.1; /*set to 0.0 to hide it completely */
    width: 200px;
    height: 50px;
    border: 1px solid #333;
    /* transitions */
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
    }

    .toggle-display:Hover {
        opacity: 1.0;
    }

3）全部放在一起

<html>
<head>
<style>
.toggle-display {
    opacity: 0.1; /*set to 0.0 to hide it completely */
    width: 200px;
    height: 50px;
    border: 1px solid #333;
    /* transitions */
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
}
.toggle-display:Hover {
    opacity: 1.0;
}
</style>
</head>
<body>
<div class="toggle-display">
Your content
</div>
</body>
</html>

Here is a sample

尝试并且工作正常，

希望这有助于你（如果是这样，请将此答案标记为好），最好的祝福。

阿尔贝托

Answer 3

使用Jquery：

$('.blog_title').on('mouseenter', function(){
      $('ul').show();
});

实际上你想要动画而不仅仅是show（）。它看起来像菜单淡入并从左侧移动。

此外，您还希望为ul提供一个类名，否则此代码将影响HTML中的所有ul。

你在'mouseleave'上反过来。

Answer 4

以下是与您所看到的内容相关的示例 - 您仍需要解决一些问题，但我已经为您提供了快速入门。

最终结果 -

http://jsbin.com/parok/4/edit?html,css,js,output

HTML -

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id='navigation'>
    <div class='logo'></div>
    <div class='menus'>
      <ul>
        <li><a href='#'>Home page</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Service</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

CSS -

body {margin:0; padding: 0;}
#navigation {
  width: 500px;
  height: 100px;
  background: wheat;
  border-radius: 5px;
}
.logo {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50px;
  float:left;
  margin-right: 20px;
  font-size: 20px;
  text-align:center;
  color: white;
  display: block;
}
.logo p {
  margin-top: 30px;
}
.menus {
  position: relative;
  opacity: 0;
  top: 40px;
}
.logo:hover {
  cursor: pointer;
}
.menus a:link, .menus a:visited {color: darkgray; text-decoration: none; text-transform: uppercase;}
.menus ul {
  list-style:none;
}
.menus ul li {
  display: inline-block;
  padding-right: 15px;
}

jQuery -

$(function(){
  $('.logo').mouseover(function(){
    //console.log('foo');
    $('.menus').animate({
      'opacity': 1,
      'left': '20px'
    }, 500);

  }).mouseout(function(){
    //console.log('bar');
    $('.menus').animate({
      'opacity': 0,
       'left': '0px'
    }, 500);
  });
});

如何制作悬停时显示的导航

4 个答案: