0

Web サイトに非表示のサイドバーを追加しようとしています。これはまさに私が達成したいことです: http://demo.themebeans.com/pinto/しかし、クリックではなくホバーで表示したかったのです。クリックの代わりに...訪問者にカーソルを合わせてもらいたいだけです。

これが私がこれまでに持っているものです。上記のサンプルと同じ位置に配置したいと思います。:(誰か助けてくれますか？

#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}

jQuery:

$(function(){
$('#nav').hover(function(){
    $(this).animate({width:'200px'},500);
},function(){
    $(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});

HTML:

<div id="nav">
Contents of the sidebar like the one on my sample. 
</div>

http://jsfiddle.net/yztJ8/ここにフィドルがあります。

4

3 に答える 3

3

絶対位置を正しく設定する必要があります。

#nav { position: absolute; top: 0px; right: 0px; }

変更left: 0;するだけright: 0;です-更新されたフィドルは次のとおりです：http://jsfiddle.net/yGBkV/

hoverIntentプラグインを使用することを強くお勧めします。ユーザー エクスペリエンスが大幅に向上します。

http://cherne.net/brian/resources/jquery.hoverIntent.html

于 2013-10-11T04:54:10.377 に答える
0

単純に試す

$('#nav1').bind("mouseenter", function() {
    $('#nav').animate({width:'200px'},500);
});
$('#nav1').bind("mouseleave", function() {
    $('#nav').animate({width:'0px'},500);
});

jsfiddle: http://jsfiddle.net/yztJ8/5/

于 2013-10-11T05:18:52.490 に答える