-4

I'm coding a website at the moment, and it has some kind of vertical nav to the left. A css transition is triggered once the user hovers on a div next to the nav's right. The problem is i'm not sure every single user will notice the navigation menu is there.

So I want it to be there the moment the page loads, and then go back to its original place, so that fist, the user notices it. Then it transitions to hide behind the left hand side of the screen. When the user will want to switch to a different page, he/she will have already seen the nav slowly move and will get it, hover the arrow to make the menu appear.

How can i perform this task, either in jQuery or CSS ? Thank you.

4

2 回答 2

2

通常，如果用户对您的导航菜单在哪里感到困惑，那么这是一个很大的提示，您应该修改您的用户体验。让那些老投标人在您的网站上工作显而易见。

像这样的东西？

HTML：

<nav>
    <ul>
        <li><a href='#'>Item 1</a></li>
        <li><a href='#'>Item 2</a></li>
    </ul>
</nav>

CSS：

nav{
    position: fixed;
    left: 0px;
    width: 200px;
    border: 1px solid grey;
    padding: 10px;
    top: 50%;
    margin-top: -50px;
}

JS：

$(document).ready(function(){
    setTimeout(function(){
        $("nav").animate({
            left: -200
        }, 1000);
    }, 1000);
});

演示：http: //jsfiddle.net/UnPDj/

编辑：添加悬停状态：http: //jsfiddle.net/UnPDj/1/

于 2013-08-22T16:54:44.537 回答
0

试一试

<body onLoad="function();">

启动一个小 javascript 来更改菜单的样式以使其可见，并使用计时功能在几秒钟后将其移回隐藏状态。或者您可以创建一个小标签占位符来显示菜单。如果有太多的方法可以做，所以如果你可以更具体地说明你打算如何隐藏和显示菜单，那么给你细节会更容易。

于 2013-08-22T17:12:11.490 回答