如何使导航显示悬停

How to make a navigation which reveals on hover

本文关键字：悬停 显示 导航 何使      更新时间：2023-09-26

我想创建一个导航显示悬停，但我不知道如何去做它。我想要像他们在左上角做的那样当你把鼠标悬停在名称上:http://higz.ghosted.net/

我希望它就像这个例子一样菜单显示为一个列表所以<ul> <li>

这是一个与您正在查看的内容相关的示例-仍然有一些问题需要修复，但我已经给了您快速开始。

最终结果-

http://jsbin.com/parok/4/edit?html、css、js、输出

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);
  });
});

如果你想异步完成，可以使用jquery和ajax。我更喜欢在运行时使用ajax计算导航，前提是它们不是静态页面。(取决于你使用的服务器端语言)否则，只需使用jquery即可。

使用jQuery的hover事件显示导航，然后隐藏它:

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

并将代码粘贴到您想要实现它的地方。否则我们只能提出理论。

这不是一项很难实现的任务。

我们开始吧:

步骤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;
    }
把它们放在一起 
<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>

这是一个示例

试过了，效果很好，

希望这对你有帮助(如果有的话，请把这个答案标记为ok)，致以最亲切的问候。

阿尔贝托。

使用Jquery:

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

在现实中，您想要动画而不仅仅是show()。它看起来像菜单淡出并从左边移动。

你还需要给你的ul一个类名，否则这段代码会影响HTML中的所有ul。

对'mouseleave'进行反向操作

相关文章：