1

I am trying to create a side menu using jQuery in which the div sideBarMinified will be hidden and hover and will display the sideBar. On mouseout, sideBar will be hidden and sideBarMinified will be displayed.

Here's what I have :

HTML :

<div class="sideBarMinified">
    <div class="topClear">&nbsp;</div>
    <img src="images/miniLogo.png">
</div>
<div class="sideBar">
    <div class="topClearBig">&nbsp;</div>
    <img src="images/logo.png">
  <div class="menuClear"></div>
        <a href="#">Sample</a>
</div>

JS :

$(document).ready(function() {
    $(".sideBar").hide();
    $.backstretch(["images/cover.jpg"],{fade:2000});
    $(".sideBarMinified").mouseover(function(){
        $(".sideBar").show();
        $(".sideBarMinified").animate({left: "-=60px"}, 0 );
        $(".sideBar").animate({left: "+=272px"}, 500 );
    });
    $(".sideBar").mouseout(function() {
        $(".sideBar").animate({left: "-=272px"}, 500 );
        $(".sideBarMinified").animate({left: "+=60px"}, 700 );
    });
});

CSS :

div.sideBarMinified {
    position:absolute;
    left:0px;
    width:20px;
    height:100%;
    background-color:rgba(208,198,168,0.9);
    border-right:1px solid #333333;
    padding:0 15px 0 15px;
    z-index:999;
}
div.sideBar {
    position:absolute;
    left:-272px;
    width:272px;
    height:100%;
    background-color:rgba(208,198,168,0.9);
    padding:0 2px 0 45px;
    z-index:500;
}

The issue is when I hover on the <a> tag, the div sideBar is hidden and the div sideBarMinified is moving to the left. What is wrong with my code?

4

2 に答える 2

1

あなたの問題は、.sidebar で使用されるハードコードされた幅と負のマージンが原因でした。標準の CSS ボックスモデル ( content-box) は、幅にパディングを追加するため、予想よりも幅の広いボックスになります。

div.sideBar {
    left: -319px;
    width: 272px; <!-- width is actually 319px when including padding -->
    padding: 0 2px 0 45px;
}​

Fiddle でコードを更新しました。確認して、ご不明な点がありましたらお知らせください。

http://jsfiddle.net/Hm7zB/1/

box-sizing: border-box;幅を定義してパディングを含めることにより、どちらがより論理的な方法で機能するかについて読むことをお勧めします: http://paulirish.com/2012/box-sizing-border-box-ftw/

于 2012-10-19T04:25:40.090 に答える
1

このコードはあなたのために働くはずだと思います。

$(document).ready(function() {
$(".sideBar").hide();
$.backstretch(["images/cover.jpg"], {
    fade: 2000
});
$(".sideBarMinified").mouseover(function() {
    $(".sideBar").show();
    $(".sideBarMinified").animate({
        left: "-=60px"
    }, 0);
    $(".sideBar").animate({
        left: "+=272px"
    }, 500);


});
$(".sideBar").mouseleave(function() {

    $(".sideBar").animate({
        left: "-=272px"
    }, 500);
    $(".sideBarMinified").animate({
        left: "+=60px"
    }, 700);
}); });​
于 2012-10-19T04:55:24.397 に答える