-1

我有一个包含主页、患者、报告等的菜单。这个菜单应该出现在每一页中，并且应该出现在每一页的右上角。我知道如何设计这个。现在我想把它隐藏起来，它应该只在鼠标放在页面右上角时才显示。请大家告诉我怎么做。如果你想要菜单栏的代码，那么这是这个

<html class="no-js" lang="en-US">
    <head>
<style type="css/text">
body{
overflow:hidden;
}
</style>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title> Home</title>
        <meta name="author" content="jQuery Foundation - jquery.org">
        <meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="base.css">
        <script src="jquery.min.js"></script>
        <script>try{Typekit.load();}catch(e){}</script>
        <meta name="generator" content="WordPress 3.5.1" />
    </head>
    <body >
        <header>
            <section id="global-nav">
                <nav>
                    <div class="constrain">
                        <ul class="links">
                            <li><a href="template.html" target="content">Home</a></li>
                            <li><a href="createpatient.html" target="content">Patient</a></li>
                            <li><a href="template.html" target="content">Appointments</a></li>
                            <li><a href="template1.html" target="content">Reports</a></li>
                            <li><a href="login.html" target="content">logout</a></li>
                        </ul>
                    </div>
                </nav>
            </section>
        </header>
    </body>
</html>
4

3 回答 3

0

假设global-nav在右上角

JS：

$("#global-nav").mouseenter(function(){

   $(".links", this).show();
}).mouseleave(function(){

   $(".links", this).hide();
});

CSS：

#global-nav .links {
  display:none;
}
于 2013-04-12T04:36:25.097 回答
0

如果它是隐藏的，并且您想让它在鼠标位于右上角时显示，那么您可能必须使用 JavaScript 和mousemove事件body等。然后检查鼠标坐标，如果它在您的预定义范围内（右上角），然后显示菜单。如您所见e.screenX，e.screenY它将为您提供相对于屏幕的鼠标坐标。

于 2013-04-12T04:37:24.223 回答
0

嗨，我为 ui 制作了一个示例，希望这有助于第一个示例显示，当您将鼠标悬停在菜单显示上时，但是当您停止将鼠标悬停在框上时，菜单将消失

http://jsfiddle.net/nFwWG/

    $("#righttopbox").on('mouseenter',function(){
  $("#global-nav").show();
});
$("#righttopbox").on('mouseleave',function(){
  $("#global-nav").hide();
});

当您将鼠标悬停在菜单将保留时，第二个显示

http://jsfiddle.net/nFwWG/1/

    $("#righttopbox").on('mouseenter',function(){
  $("#global-nav").show();
});

也不要忘记将 jquery 脚本放在标题上，您可以通过输入 google jquery google 来使用这个由 google 托管的脚本。

或者你可以在

www.jquery.com

希望这可以帮助

于 2013-04-12T05:42:06.093 回答